/* ==========================================================================
   SOLVO — Design tokens
   --------------------------------------------------------------------------
   THE ONE RULE: this is the only file in the project allowed to contain a
   raw color value. Every other stylesheet references these tokens.

   That rule is what makes both themes correct by construction. A hardcoded
   #fff anywhere else is a dark-mode bug waiting to happen — that is exactly
   how the previous version ended up with white chart cards on a dark page.

   Themes: dark is the default. app.js resolves the user's choice
   (dark | light | system) into data-theme="dark" or data-theme="light", so
   only those two states ever need styling. :root carries the dark values so
   that even a failure to stamp the attribute lands on the intended default.
   ========================================================================== */

:root,
html[data-theme="dark"] {
  color-scheme: dark;

  /* --- surfaces ------------------------------------------------------- */
  --canvas:        #0b0d11;   /* app background */
  --surface:       #151a21;   /* cards, panels */
  --surface-soft:  #1c222b;   /* table headers, inset areas, hover */
  --surface-high:  #1f2732;   /* modals, drawers, popovers */
  --line:          #2a323d;   /* default border */
  --line-strong:   #3a444f;   /* emphasized border, axis */

  /* --- ink ------------------------------------------------------------ */
  --ink:           #eef1f5;   /* primary text */
  --ink-2:         #aab4c2;   /* secondary text */
  --muted:         #7f8a99;   /* labels, captions, axis text */

  /* --- brand ----------------------------------------------------------
     Gold, after the Athenian owl tetradrachm the mark is drawn from.
     Validated: 8.97:1 on --canvas, 8.07:1 on --surface, and --on-brand
     sits at 8.60:1 on a brand fill. --brand is used as link/label text,
     not only as a fill, which is why it has to clear 4.5:1 unfilled.   */
  --brand:         #d8a949;
  --brand-hover:   #e9c273;
  --brand-soft:    #2a1f0c;   /* tinted background */
  --brand-line:    #59431a;   /* tinted border */
  --on-brand:      #17120a;   /* text on a brand fill */

  /* --- navigation rail (dark in BOTH themes — it anchors the layout) --- */
  --rail:          #0e1319;
  --rail-ink:      #aab4c2;
  --rail-ink-on:   #ffffff;
  --rail-active:   #1a2740;
  --rail-line:     #222b38;
  /* Accent for anything sitting ON a rail-coloured surface. Deliberately the
     same value in both themes: the light theme's --brand is a deep blue that
     disappears against a near-black panel. */
  --rail-accent:   #e0b45c;

  /* --- money & status -------------------------------------------------
     Reserved meanings. Never reused as a chart series color.
     pos = money in / paid down / healthy
     neg = money out / owed / over limit
     warn = due soon / elevated usage

     --warn moved from amber #e5a44f to orange when the brand went gold.
     It had to: against the new --brand it measured dE 6.0, well inside
     the confusion threshold, so "due soon" and "brand accent" were the
     same colour to the eye. At #ef8b3c the pair measures dE 15.7. The
     meaning is unchanged — only the hue moved, to make room.           */
  --pos:           #45c3a1;
  --pos-soft:      #12302a;
  --neg:           #ff8f96;
  --neg-soft:      #361f24;
  --warn:          #ef8b3c;
  --warn-soft:     #34200c;
  /* Declared but referenced by no stylesheet — the only blue left in the
     project. Kept as a reserved status slot, not wired to anything. */
  --info:          #6ea8fa;
  --info-soft:     #16233f;

  /* --- categorical chart series ---------------------------------------
     Fixed order, assigned by entity, NEVER cycled. Validated for
     protanopia/deuteranopia separation and contrast against --surface in
     this mode. Do not reorder or substitute without re-running the
     validator — the ordering IS the colorblind-safety mechanism.         */
  --chart-1: #3987e5;
  --chart-2: #d95926;
  --chart-3: #199e70;
  --chart-4: #c98500;
  --chart-5: #d55181;
  --chart-6: #008300;
  --chart-7: #9085e9;
  --chart-8: #e66767;
  /* Series 9+ do not get a generated hue. They fold into "Otros". */
  --chart-rest: #7f8a99;

  /* --- elevation ------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.34);
  --shadow-2: 0 1px 3px rgba(0,0,0,.38), 0 8px 24px rgba(0,0,0,.30);
  --shadow-3: 0 18px 48px rgba(0,0,0,.48);
  --overlay:  rgba(4,6,9,.72);
  --ring:     0 0 0 3px rgba(216,169,73,.34);
}

html[data-theme="light"] {
  color-scheme: light;

  --canvas:        #f2f4f7;
  --surface:       #ffffff;
  --surface-soft:  #f7f9fb;
  --surface-high:  #ffffff;
  --line:          #dfe4ea;
  --line-strong:   #c8d0da;

  --ink:           #10141b;
  --ink-2:         #4a5361;
  --muted:         #78818f;

  /* Bronze, not the dark theme's gold. A light gold on white cannot carry
     text — and --brand IS text here (links, sort arrows, pill labels).
     This reads 4.92:1 on --canvas and 5.42:1 on --surface, and takes white
     at 5.42:1 when filled. Same metal, darkened until it can do the job. */
  --brand:         #8a6314;
  --brand-hover:   #6d4d0d;
  --brand-soft:    #fbf3e1;
  --brand-line:    #e3d0a3;
  --on-brand:      #ffffff;

  /* The rail used to stay dark here, as the product's spine. It read as a
     slab of night down the side of a light workspace, and as the theme not
     having finished switching — which is exactly how it was reported. It now
     follows the theme like everything else.

     It keeps its own surface rather than becoming --canvas: slightly off the
     page colour, with --rail-line separating it, so it still reads as a
     distinct region instead of dissolving into the content field.

     To go back to the dark spine, restore the five values below; nothing
     else in the project needs touching. */
  --rail:          #ffffff;
  --rail-ink:      #4a5361;
  --rail-ink-on:   #10141b;
  --rail-active:   #fbf3e1;
  --rail-line:     #dfe4ea;
  /* Bronze, not the dark theme's gold: this now sits on white. */
  --rail-accent:   #8a6314;

  --pos:           #0f7a5f;
  --pos-soft:      #e4f4ee;
  --neg:           #c0334a;
  --neg-soft:      #fdecee;
  /* Same story as dark: against bronze --brand the old #a35a09 measured
     dE 10.0. At #ad5009 it measures 15.3 and still clears 4.85:1. */
  --warn:          #ad5009;
  --warn-soft:     #fdf0e3;
  --info:          #1d4ed8;
  --info-soft:     #e8edfd;

  --chart-1: #2a78d6;
  --chart-2: #eb6834;
  --chart-3: #1baf7a;
  --chart-4: #eda100;
  --chart-5: #e87ba4;
  --chart-6: #008300;
  --chart-7: #4a3aa7;
  --chart-8: #e34948;
  --chart-rest: #78818f;

  --shadow-1: 0 1px 2px rgba(16,20,27,.05);
  --shadow-2: 0 1px 3px rgba(16,20,27,.07), 0 8px 24px rgba(16,20,27,.06);
  --shadow-3: 0 18px 48px rgba(16,20,27,.16);
  --overlay:  rgba(16,20,27,.5);
  --ring:     0 0 0 3px rgba(138,99,20,.26);
}

/* ==========================================================================
   Non-color primitives — identical in both themes
   ========================================================================== */
:root {
  /* --- type ----------------------------------------------------------- */
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
          Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Brand voice only: the wordmark and the solvere entry. A serif is what
     makes the coin read as a coin rather than as an app icon. System faces
     on purpose — this app has no build step and loads no webfont, so a
     downloaded display face would be one more request and one more thing
     to break offline. */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                  "Times New Roman", serif;
  --font-num: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: 30px;   /* page title */
  --fs-hero:    26px;   /* hero money figure */
  --fs-xl:      21px;   /* card money figure */
  --fs-lg:      17px;   /* section heading */
  --fs-md:      15px;   /* card heading */
  --fs-base:    13.5px; /* body */
  --fs-sm:      12.5px; /* secondary */
  --fs-xs:      11.5px; /* captions */
  --fs-label:   10.5px; /* uppercase eyebrows */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.5;

  --fw-normal: 400;
  --fw-med:    500;
  --fw-semi:   600;
  --fw-bold:   680;

  --track-tight: -.02em;
  --track-num:   -.015em;
  --track-label: .07em;

  /* --- space (4px base) ----------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;  --s-9: 56px;

  /* --- radius ---------------------------------------------------------- */
  --r-xs: 6px;  --r-sm: 8px;  --r: 11px;  --r-lg: 14px;  --r-xl: 18px;  --r-full: 999px;

  /* --- layout ---------------------------------------------------------- */
  --rail-w:     236px;
  --topbar-h:   60px;
  --page-max:   1400px;
  --ctrl-h:     36px;   /* buttons, inputs — one height everywhere */
  --ctrl-h-sm:  30px;

  /* --- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.32,.72,.35,1);
  --t-fast: .13s var(--ease);
  --t:      .18s var(--ease);

  /* --- z ---------------------------------------------------------------- */
  --z-rail: 20; --z-topbar: 30; --z-drawer: 60; --z-modal: 70; --z-toast: 90;

  /* --- print -------------------------------------------------------------
     Paper is white in both themes, so print needs its own ink. It still
     lives here rather than inline, because the rule is absolute: no colour
     value exists outside this file. */
  --print-line: #ccc;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}