/* ===========================================================================
   flo-theme.css — THE Flourisha neutral palette, light and dark.
   2026-08-05.

   Greg, looking at the productivity report: "This needs to be default light
   mode. And even as a dark mode you can see that it doesn't contrast right,
   all the text is too dark. So the universal dark mode should be improved and
   we should really decide on the colour palette, because we've got a mix of
   blues and browns. It feels like it should be much more neutral — a warm
   grey, not a brown."

   Three separate faults, one root cause: nothing owned the neutrals.

   1. THE MIX OF BLUES AND BROWNS was two dark themes sitting side by side on
      the same screen. The app's globals.css painted dark on #1a1a2e (navy) and
      set --fg2 #c9d1d9 / --fg3 #8b95a1 (cool greys); the productivity report
      painted dark on #170f0a (chocolate). The shared top bar was navy
      rgba(25,25,42,.85) above a brown page. Both were "the dark theme".

   2. TEXT TOO DARK was flo-nav.css consuming --fg1/--fg2/--fg3, which the
      report never defines, so every rail item resolved to the LIGHT fallback
      #4a3f3a — measured at 1.9:1 on the report's own dark rail. Correct in the
      app, unreadable on any standalone page. flo-nav.css's header says it
      consumes tokens and does not define them, and that is still right; what
      was missing was a token sheet a standalone page could actually load.

   3. DEFAULT DARK was each page calling prefers-color-scheme at boot. Light is
      the designed surface, so light is the default; the OS no longer decides.

   THIS FILE IS THE ONE PLACE THE NEUTRALS LIVE. Load it from /nav/ before
   flo-nav.css and a page with no token sheet of its own renders correctly in
   both themes. Override any variable below in a [data-theme="..."] or
   [data-workspace-theme="..."] block to re-skin every surface at once — that
   is the point, and it is why nothing here is a literal at a call site.

   WHAT IS NOT HERE: the brand hues. Cyan, carrot orange, olive and lava are
   the brand and they stay exactly as colors_and_type.css defines them. Only
   the NEUTRALS — canvas, surfaces, text, borders, shadows — move to warm grey.
   =========================================================================== */

:root {
  /* ── THE WARM-NEUTRAL RAMP ────────────────────────────────────────────────
     Hue held around 30°, chroma kept at 5–12% saturation. That is the whole
     trick: enough warmth that it never reads cold or blue next to the carrot
     orange, little enough that it never reads brown. For comparison, the
     coffee neutral this replaces (#1c0800) runs at 100% saturation, and
     #170f0a at 39% — that saturation is what Greg was seeing as "brown".
     Kept as a ramp rather than only semantic names so a future theme can
     re-pitch the whole neutral scale by overriding eleven values. */
  --warm-25:  #fdfcfb;
  --warm-50:  #f8f6f3;
  --warm-100: #f1eeea;
  --warm-200: #e4dfd9;
  --warm-300: #d1cbc3;
  --warm-400: #ada69d;
  --warm-500: #8a837b;
  --warm-600: #6d665f;
  --warm-700: #55504a;
  --warm-800: #38332e;
  --warm-900: #27231f;
  --warm-950: #1a1715;

  /* ── LIGHT (the default, and the designed surface) ──────────────────────
     The canvas stays #fdfbf7. Greg did not object to it and it is the warm
     off-white every light screen was designed against; the brown he named is
     in the TEXT and the dark surfaces, not here. */
  --bg-base: #fdfbf7;

  /* Text. --fg1 was #1c0800, a fully saturated red-black, and --fg3 was
     #636e72, a COOL blue-grey — the two ends of the palette disagreeing with
     each other inside one text ramp. Both are warm grey now.
     Contrast on #fdfbf7: fg1 15.7:1, fg2 7.6:1, fg3 5.0:1. */
  --fg1: #26221f;
  --fg2: #55504a;
  --fg3: #736c65;
  --fg-disabled: #b9b3ac;
  --fg-on-dark: #ffffff;
  --fg-on-cyan: #ffffff;

  /* Surfaces, brightest to deepest. A page picks by ELEVATION, not by colour:
     surface-0 is the canvas, -1 a tile on it, -2 a card, -3 a nested subcard. */
  --surface-0: var(--bg-base);
  --surface-1: #fbf8f2;
  --surface-2: #f7f3ec;
  --surface-3: #f2ede4;
  --surface-sunken: #f4f1eb;

  --glass-bg:        rgba(255, 253, 249, 0.90);
  --glass-bg-light:  rgba(255, 253, 249, 0.72);
  --glass-bg-hover:  rgba(255, 253, 249, 0.97);
  --glass-bg-strong: var(--surface-2);
  --surface-elevated: var(--surface-1);

  --glass-border:   rgba(38, 34, 31, 0.10);
  --glass-hairline: rgba(38, 34, 31, 0.07);
  --border-subtle:  rgba(38, 34, 31, 0.10);

  --shadow-1: 0 2px 8px   rgba(38, 34, 31, 0.05);
  --shadow-2: 0 10px 28px rgba(38, 34, 31, 0.07);
  --shadow-3: 0 16px 44px rgba(38, 34, 31, 0.11);

  /* Chrome surfaces. Named separately from --surface-* because the bar and the
     rail are the one thing on screen in EVERY app, so re-pitching them is a
     decision on its own — see the navy-above-brown fault this file records. */
  --chrome-bar:      rgba(255, 255, 255, 0.90);
  --chrome-rail:     var(--bg-base);
  --chrome-menu:     rgba(255, 253, 249, 0.97);
  --chrome-border:   var(--glass-border);
  --chrome-field:    rgba(38, 34, 31, 0.045);
  --chrome-field-bd: rgba(38, 34, 31, 0.10);
  --chrome-shadow:   rgba(38, 34, 31, 0.12);

  /* Brand semantics that had no canonical home. frontend/web/CLAUDE.md rule 6
     already recorded the gap: the productivity report drew its meter bars with
     var(--accent) and var(--flagship) and "neither token is canonical" — both
     lived in that page's own :root and nowhere else, so lifting the component
     would have resolved to real colours there and to hardcoded fallbacks
     everywhere else. Declared once, here, in both themes.
     Deliberately NOT declared: --success / --danger / --info. globals.css
     already owns those and its values differ (--success #5a8a32 vs the brand
     bundle's #888d31); reconciling that is its own decision, not a side effect
     of a palette change. */
  --accent:          #1a97b8;
  --accent-strong:   #126b82;
  --flagship:        #f09029;
  --flagship-strong: #a85208;
}

/* Light, stated explicitly as well as at :root, so a page that stamps
   data-theme="light" is not relying on the absence of a dark rule. */
:root[data-theme="light"] {
  --bg-base: #fdfbf7;
  --fg1: #26221f;
  --fg2: #55504a;
  --fg3: #736c65;
  --fg-disabled: #b9b3ac;

  --surface-1: #fbf8f2;
  --surface-2: #f7f3ec;
  --surface-3: #f2ede4;
  --surface-sunken: #f4f1eb;

  --glass-bg:        rgba(255, 253, 249, 0.90);
  --glass-bg-light:  rgba(255, 253, 249, 0.72);
  --glass-bg-hover:  rgba(255, 253, 249, 0.97);
  --glass-bg-strong: var(--surface-2);
  --surface-elevated: var(--surface-1);

  --glass-border:   rgba(38, 34, 31, 0.10);
  --glass-hairline: rgba(38, 34, 31, 0.07);
  --border-subtle:  rgba(38, 34, 31, 0.10);

  --shadow-1: 0 2px 8px   rgba(38, 34, 31, 0.05);
  --shadow-2: 0 10px 28px rgba(38, 34, 31, 0.07);
  --shadow-3: 0 16px 44px rgba(38, 34, 31, 0.11);

  --chrome-bar:      rgba(255, 255, 255, 0.90);
  --chrome-rail:     var(--bg-base);
  --chrome-menu:     rgba(255, 253, 249, 0.97);
  --chrome-border:   var(--glass-border);
  --chrome-field:    rgba(38, 34, 31, 0.045);
  --chrome-field-bd: rgba(38, 34, 31, 0.10);
  --chrome-shadow:   rgba(38, 34, 31, 0.12);
}

/* ── DARK ─────────────────────────────────────────────────────────────────
   Written as :root[data-theme="dark"] — specificity (0,2,0) — on purpose, so
   it beats globals.css's legacy [data-theme="dark"] (0,1,0) whatever order the
   two sheets load in. globals.css is being brought to these same values in the
   same commit; the specificity is a belt, not the plan.

   Text contrast, measured rather than eyeballed:
     fg1 #f4f2ef  on canvas #1a1715  16.2:1
     fg2 #cdc7c0  on card   #38332e   7.5:1
     fg3 #a39c94  on card   #38332e   4.6:1
   Every one of those is a rail item or a caption that previously rendered at
   1.9:1 because it fell through to the light fallback. */
:root[data-theme="dark"] {
  --bg-base: #1a1715;

  --fg1: #f4f2ef;
  --fg2: #cdc7c0;
  --fg3: #a39c94;
  --fg-disabled: #6d665f;
  --fg-on-dark: #ffffff;

  --surface-1: #232019;
  --surface-2: #2e2a26;
  --surface-3: #38332e;
  --surface-sunken: #151312;

  --glass-bg:        rgba(39, 35, 31, 0.90);
  --glass-bg-light:  rgba(39, 35, 31, 0.72);
  --glass-bg-hover:  rgba(56, 51, 46, 0.95);
  --glass-bg-strong: var(--surface-2);
  --surface-elevated: var(--surface-3);

  --glass-border:   rgba(247, 243, 238, 0.11);
  --glass-hairline: rgba(247, 243, 238, 0.075);
  --border-subtle:  rgba(247, 243, 238, 0.11);

  --shadow-1: 0 2px 10px  rgba(0, 0, 0, 0.34);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.40);
  --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.48);

  /* The navy is gone. This was rgba(25,25,42,.85) above a brown page. */
  --chrome-bar:      rgba(39, 35, 31, 0.88);
  --chrome-rail:     var(--bg-base);
  --chrome-menu:     rgba(46, 42, 38, 0.97);
  --chrome-border:   var(--glass-border);
  --chrome-field:    rgba(247, 243, 238, 0.06);
  --chrome-field-bd: rgba(247, 243, 238, 0.09);
  --chrome-shadow:   rgba(0, 0, 0, 0.45);

  /* Brand hues brighten on a dark canvas — the same values the report already
     used, kept here so every surface brightens identically instead of each
     page picking its own. */
  --accent:          #5cc2dc;
  --accent-strong:   #8ad6ea;
  --dark-cyan:       #5cc2dc;
  --dark-cyan-10:    rgba(92, 194, 220, 0.12);
  --dark-cyan-15:    rgba(92, 194, 220, 0.18);
  --flagship:        #f4af50;
  --flagship-strong: #f4af50;

  color-scheme: dark;
}