/* ==========================================================================
   Design tokens — "Ledger".

   The visual language is an editorial-financial one: ink on ivory, structured
   by hairline rules rather than a field of floating cards. Elevation is rare
   and meaningful — reserved for things that genuinely float (the drawer, a
   tooltip, the one hero). Everything else sits flat on the page, separated by
   a single confident line, the way a fine ledger or a broadsheet is.

   Two data hues carry all the saturation: a deep ink-blue for buying, a
   terracotta for renting. Nothing else on the page competes with them.

   The elevation trick: most surfaces draw their edge from `--edge`, which is a
   1px inset ring in the rule colour — a crisp hairline, not a soft shadow. So
   flattening the whole app is two token changes, not a hundred edits.

   Both themes are chosen, not flipped: the dark values are their own steps,
   picked against the dark surface. The `data-theme` attribute (the in-app
   toggle) must win over the OS preference in both directions, which is why the
   dark values appear twice — once behind the media query with a :not() guard,
   once behind the attribute.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces & ink — ivory paper, warm near-black */
  --plane:            #edece7;
  --plane-deep:       #e5e3dc;
  --surface-1:        #faf9f5;
  --surface-2:        #efede6;
  --surface-raised:   #ffffff;
  --text-primary:     #1b1913;
  --text-secondary:   #55524a;
  --text-muted:       #8d897e;

  /* The structural motif: hairline rules. */
  --rule:             rgba(27, 25, 19, 0.11);
  --rule-strong:      rgba(27, 25, 19, 0.20);
  --border:           var(--rule);
  --border-strong:    var(--rule-strong);
  --overlay:          rgba(27, 25, 19, 0.42);

  /* Chart chrome */
  --chart-grid:       #e6e3da;
  --chart-axis:       #c9c3b5;

  /* Categorical series — fixed order, never cycled.
     1 buying · 2 renting · 3 property · then the stacked-breakdown slots. */
  --series-1: #2f6fce;
  --series-2: #d95f2e;
  --series-3: #1baf7a;
  --series-4: #d99a12;
  --series-5: #cf6690;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #d83f3e;

  /* Diverging blue <-> terracotta, neutral midpoint.
     Terracotta end = renting wins, blue end = buying wins. */
  --div-1: #9a3410;
  --div-2: #d1592a;
  --div-3: #e79b7e;
  --div-4: #f3c4b1;
  --div-5: #ece9e1;
  --div-6: #b6cff2;
  --div-7: #7fb0ec;
  --div-8: #3a7fdd;
  --div-9: #1d549e;

  /* Status — reserved, never reused as a series color */
  --good:     #0ca30c;
  --good-ink: #006300;
  --warning:  #e0a200;
  --serious:  #ec835a;
  --critical: #cc3b3b;

  /* Accent (interactive chrome) tracks the buying hue */
  --accent:        #2f6fce;
  --accent-hover:  #275fb3;
  --accent-soft:   rgba(47, 111, 206, 0.08);
  --accent-ring:   rgba(47, 111, 206, 0.32);
  --accent-ink:    #ffffff;

  /* The signature: the fork, blue to terracotta. */
  --fork:   linear-gradient(100deg, var(--series-1) 0%, #915f8e 52%, var(--series-2) 100%);
  --fork-v: linear-gradient(180deg, var(--series-1) 0%, #915f8e 52%, var(--series-2) 100%);

  /* Shape — precise, not pillowy. */
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 13px;
  --r-xl: 18px;

  /* Elevation. --edge is the hairline every flat surface wears; --lift-1 is
     deliberately none so cards read as ruled paper, not chips. --lift-2/-3 are
     the only real shadows, for things that truly float. */
  --edge:   inset 0 0 0 1px var(--rule);
  --lift-1: none;
  --lift-2:
    0 1px 1px rgba(27, 25, 19, 0.04),
    0 6px 16px rgba(27, 25, 19, 0.07),
    0 18px 40px rgba(27, 25, 19, 0.06);
  --lift-3:
    0 2px 4px rgba(27, 25, 19, 0.06),
    0 14px 34px rgba(27, 25, 19, 0.10),
    0 40px 80px rgba(27, 25, 19, 0.14);

  /* Rhythm */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 24px;
  --gap-6: 32px;
  --gap-7: 48px;

  --font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.3, 0.64, 1);

  --sidebar-w: 384px;
  --topbar-h: 62px;

  /* A whisper of tooth on the paper, so large flat areas aren't dead. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --grain-opacity: 0.022;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme='light'])) {
    color-scheme: dark;

    --plane:          #0d0c0a;
    --plane-deep:     #060504;
    --surface-1:      #16150f;
    --surface-2:      #1e1c15;
    --surface-raised: #211f17;
    --text-primary:   #faf8f2;
    --text-secondary: #c4bfb2;
    --text-muted:     #8d897e;

    --rule:           rgba(250, 248, 242, 0.11);
    --rule-strong:    rgba(250, 248, 242, 0.22);
    --overlay:        rgba(0, 0, 0, 0.6);

    --chart-grid:     #2a2820;
    --chart-axis:     #3b3830;

    --series-1: #3a89e6;
    --series-2: #df6a34;
    --series-3: #199e70;
    --series-4: #c98d10;
    --series-5: #d15e88;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e26463;

    --div-1: #ea9c80;
    --div-2: #df6a34;
    --div-3: #b6440e;
    --div-4: #8a2c04;
    --div-5: #34322a;
    --div-6: #17497f;
    --div-7: #245f9f;
    --div-8: #3a89e6;
    --div-9: #86b6ef;

    --good-ink: #0ca30c;
    --warning:  #e0a200;

    --accent:       #3a89e6;
    --accent-hover: #5a9def;
    --accent-soft:  rgba(58, 137, 230, 0.14);
    --accent-ring:  rgba(58, 137, 230, 0.42);

    --fork:   linear-gradient(100deg, var(--series-1) 0%, #9a6f97 52%, var(--series-2) 100%);
    --fork-v: linear-gradient(180deg, var(--series-1) 0%, #9a6f97 52%, var(--series-2) 100%);

    --edge:   inset 0 0 0 1px var(--rule);
    --lift-1: none;
    --lift-2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 14px 34px rgba(0, 0, 0, 0.44);
    --lift-3: 0 8px 24px rgba(0, 0, 0, 0.5), 0 36px 80px rgba(0, 0, 0, 0.6);

    --grain-opacity: 0.04;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --plane:          #0d0c0a;
  --plane-deep:     #060504;
  --surface-1:      #16150f;
  --surface-2:      #1e1c15;
  --surface-raised: #211f17;
  --text-primary:   #faf8f2;
  --text-secondary: #c4bfb2;
  --text-muted:     #8d897e;

  --rule:           rgba(250, 248, 242, 0.11);
  --rule-strong:    rgba(250, 248, 242, 0.22);
  --overlay:        rgba(0, 0, 0, 0.6);

  --chart-grid:     #2a2820;
  --chart-axis:     #3b3830;

  --series-1: #3a89e6;
  --series-2: #df6a34;
  --series-3: #199e70;
  --series-4: #c98d10;
  --series-5: #d15e88;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e26463;

  --div-1: #ea9c80;
  --div-2: #df6a34;
  --div-3: #b6440e;
  --div-4: #8a2c04;
  --div-5: #34322a;
  --div-6: #17497f;
  --div-7: #245f9f;
  --div-8: #3a89e6;
  --div-9: #86b6ef;

  --good-ink: #0ca30c;
  --warning:  #e0a200;

  --accent:       #3a89e6;
  --accent-hover: #5a9def;
  --accent-soft:  rgba(58, 137, 230, 0.14);
  --accent-ring:  rgba(58, 137, 230, 0.42);

  --fork:   linear-gradient(100deg, var(--series-1) 0%, #9a6f97 52%, var(--series-2) 100%);
  --fork-v: linear-gradient(180deg, var(--series-1) 0%, #9a6f97 52%, var(--series-2) 100%);

  --edge:   inset 0 0 0 1px var(--rule);
  --lift-1: none;
  --lift-2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 14px 34px rgba(0, 0, 0, 0.44);
  --lift-3: 0 8px 24px rgba(0, 0, 0, 0.5), 0 36px 80px rgba(0, 0, 0, 0.6);

  --grain-opacity: 0.04;
}

/* Paper is always light in print. */
@media print {
  :root, :root[data-theme='dark'] {
    color-scheme: light;
    --plane:          #ffffff;
    --plane-deep:     #ffffff;
    --surface-1:      #ffffff;
    --surface-2:      #f4f2ec;
    --surface-raised: #ffffff;
    --text-primary:   #1b1913;
    --text-secondary: #3c3a35;
    --text-muted:     #6b675e;
    --rule:           rgba(27, 25, 19, 0.2);
    --rule-strong:    rgba(27, 25, 19, 0.3);
    --chart-grid:     #e6e3da;
    --chart-axis:     #b3ad9f;
    --edge:   inset 0 0 0 1px var(--rule);
    --lift-1: none;
    --lift-2: none;
    --lift-3: none;
    --grain-opacity: 0;
  }
}