/* Global brand tokens — colors, type, spacing, radii, shadows, motion.
   See docs/superpowers/plans/2026-04-30-form-editor-redesign-pr1.md Task 1.
   Note: app/assets/stylesheets/move_out_landing.css declares the same tokens
   under .mo-page for legacy reasons. Same values; can be removed in a
   follow-up sweep. */
/* Petrona is 3.0's display face. It is loaded here but deliberately NOT wired to
   --zw-font-display or Tailwind's --font-display: the kit restricts it to three
   places per page (the hero, section headlines, one pull quote), while
   --font-display is consumed by 42 admin views and 34 stylesheet rules. Pointing
   those at a serif would scatter it through the admin UI, which the kit explicitly
   warns against. It gets applied deliberately when the homepage is rebuilt.

   Poppins stays for now for the same reason — 3.0 has no third face, so retiring it
   is a typography pass belonging with the page rebuilds, not a token swap. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Petrona:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --zw-blue-900: #1f4063;
  --zw-blue-800: #29527d;
  --zw-blue-700: #336699;
  --zw-blue-600: #4d7cb0;
  --zw-blue-500: #6f98c4;
  --zw-blue-300: #b3c8dd;
  --zw-blue-100: #e4ecf4;
  --zw-blue-50:  #f2f6fa;

  /* Green measures: the reduction ladder, progress, impact. Never a button.
     Design System 3.0 replaced the 2.x mint-leaning ramp (#00cc99 at 600) with the
     muted measurement greens, so this ramp now carries the kit's values rather than
     a second, brighter green that happened to share the name.

     The old ramp was also failing WCAG AA everywhere it was used as text: 700 was
     #00a881, which is 3.04:1 on white, across 32 `text-zw-green-700` usages. The
     steps below are ordered light-to-dark so `bg-zw-green-600 hover:bg-zw-green-700`
     still darkens on hover, and 600 is dark enough to carry white text (5.14:1).

     600 is the canonical 3.0 green. Mint (#00cc99) survives as --zw-mint, which is
     the logo and the 2027 goal bar and nothing else.

     test/assets/green_contrast_test.rb pins the legibility of every step. */
  --zw-green-900: #163f34; /* interpolated, darkest ink */
  --zw-green-800: #1f5a49; /* kit --zw-green-deep */
  --zw-green-700: #276754; /* interpolated, the hover for 600 */
  --zw-green-600: #2f7a63; /* kit --zw-green — the canonical 3.0 green */
  --zw-green-500: #4e9a80; /* kit --zw-green-mid */
  --zw-green-300: #a8d3c3; /* kit --zw-green-on-dk */
  --zw-green-100: #cfe6dc; /* kit --zw-green-line */
  --zw-green-50:  #eef6f2; /* kit --zw-green-tint */

  /* Brand palette: Red (Crayola) #ee4266, Jonquil #ffcb05, Safety orange #fa760a.
     The 500 step is the brand value; the rest are tints/shades around it so a
     traffic-light row can pair a 50 background with a 500 dot and a 900 label. */
  --zw-red-900: #8f1633;
  --zw-red-700: #c9284b;
  --zw-red-500: #ee4266;
  --zw-red-300: #f593a9;
  --zw-red-100: #fbd0d9;
  --zw-red-50:  #fdecef;

  --zw-yellow-900: #7a6100;
  --zw-yellow-700: #b38e00;
  --zw-yellow-500: #ffcb05;
  --zw-yellow-300: #ffe066;
  --zw-yellow-100: #fff0b0;
  --zw-yellow-50:  #fff9e0;

  --zw-orange-900: #8a3e04;
  --zw-orange-700: #c25806;
  --zw-orange-500: #fa760a;
  --zw-orange-300: #fdb972;
  --zw-orange-100: #ffdfc2;
  --zw-orange-50:  #fff2e5;

  --zw-ink:     #0f1a26;
  --zw-ink-2:   #2a3947;
  --zw-ink-3:   #566676;
  --zw-line:    #d9e0e8;
  --zw-line-2:  #eceff3;
  --zw-surface: #ffffff;
  --zw-surface-2: #f7f9fb;
  --zw-surface-3: #eef2f6;
  --zw-paper:   #fbfaf6;

  --zw-sun:  #ffb547;
  --zw-clay: #d97757;
  --zw-sky:  #7ac8e0;
  --zw-moss: #557a44;

  /* ---- Design System 3.0 additions ----------------------------------------
     Ported from the kit's tokens/colors.css. Declared here so later phase-1 PRs
     (the homepage, the four tool surfaces, the challenge category colours) have a
     palette to draw on rather than inventing hex.

     3.0 gives each colour exactly one job, and breaking that is what makes the
     system stop working:
       blue       acts   — buttons, links, focus. Nothing decorative is blue.
       green      measures — the reduction ladder, progress, impact. Never a button.
       dark green is the ground the page sits on. A substrate, not a section colour.
       warm paper + hairlines do structure. Never colour blocks.
       mint       is the logo, plus the 2027 goal bar. Nowhere else. */

  /* Warm grounds. 3.0's paper is warmer than the 2.x --zw-paper above. */
  --zw-paper-3:      #fdfcfa; /* page background */
  --zw-surface-warm: #fbfaf7; /* row hover, quiet fills */
  --zw-panel:        #f7f5f1; /* the panel the tool cards bouquet out of */

  /* The dark green ground beneath the page. */
  --zw-base:       #1b3b31;
  --zw-base-panel: #16332a;
  --zw-base-line:  #2a5044;
  --zw-base-quiet: #7fa494;
  --zw-base-body:  #b7cfc4;
  --zw-base-link:  #dcebe4;

  /* Warm hairlines — never grey-blue. */
  --zw-border-warm:       #ece9e3; /* section rules, sticky header */
  --zw-border-warm-2:     #e2ded6; /* card borders */
  --zw-border-warm-soft:  #eae6df; /* borders sitting under a shadow */
  --zw-border-warm-inner: #f1eee8; /* dividers inside a card */
  --zw-border-warm-grid:  #f4f2ee; /* calendar cells, faintest rule */

  /* Mint. The logo and the 2027 goal bar. Nowhere else. */
  --zw-mint: #00cc99;

  /* 3.0's quiet neutrals, for the greys that are not ink: eyebrow labels, unselected
     segments, disabled numerals. These are warm, while --zw-ink/-2/-3 above are the
     2.x cool navies and are left alone — repointing ink is an app-wide repaint, not a
     component change. So a 3.0 component can read warm-grey beside cool-ink body
     copy until that pass happens. */
  --zw-muted:   #6b6b70;
  --zw-faint:   #8b8880; /* unselected segment, neutral tag */
  --zw-quiet:   #9a978f; /* eyebrows */
  --zw-whisper: #c3bfb6; /* ladder numerals, disabled */

  /* The five Rs ladder. Green measures; this is the ramp it measures on. */
  --zw-ladder-1: #2f7a63;  --zw-ladder-1-ink: #ffffff;
  --zw-ladder-2: #4e9a80;  --zw-ladder-2-ink: #ffffff;
  --zw-ladder-3: #a8ccbc;  --zw-ladder-3-ink: #1c1c1e;
  --zw-ladder-4: #e6d3a4;  --zw-ladder-4-ink: #1c1c1e;
  --zw-ladder-5: #fdfcfa;  --zw-ladder-5-ink: #8b8880;

  /* Sand — ladder step 4, the one surviving warm accent. */
  --zw-sand:      #d9cfae;
  --zw-sand-ink:  #4a4230;
  --zw-sand-tint: #faf1e2; /* the sand tag's ground */

  /* The four tools, each a muted stroke on its own soft tint. These recur wherever
     that tool's content appears, so they are identity, not decoration. Never darken a
     stroke to fix a contrast problem — use the -ink companion below.

     STROKES: icons, borders, dots. Decorative or large, so 3:1 is the bar. */
  --zw-tool-actions:  #7d6a9c;  --zw-tool-actions-tint:  #f1eef7;
  --zw-tool-calendar: #a68a3f;  --zw-tool-calendar-tint: #f8f2e3;
  --zw-tool-map:      #5d8a72;  --zw-tool-map-tint:      #eef4f0;
  --zw-tool-wiki:     #5c7d9e;  --zw-tool-wiki-tint:     #eff3f7;

  /* INKS: text sitting on the matching tint, as in a tag. The strokes above do not
     reach 4.5:1 on their own tints at 14px (map 3.54:1, wiki 3.89:1, actions 4.17:1),
     so text uses these instead. The kit already made exactly this distinction for the
     calendar tool via --zw-tool-clay; these three extend the pattern.

     test/assets/component_tone_contrast_test.rb pins every pair. */
  --zw-tool-actions-ink: #74628f;
  --zw-tool-clay:        #7a6a41; /* text on the ochre tint — the kit's own name */
  --zw-tool-map-ink:     #4d7460;
  --zw-tool-wiki-ink:    #52708d;

  /* 3.0's display face. Loaded, but applied only where the kit allows — see the
     @import note at the top of this file. */
  --zw-font-serif: Petrona, Georgia, serif;

  /* ---- Chart series -------------------------------------------------------
     A small categorical palette, declared here rather than inside any one chart,
     because a chart drawn in JS and a legend rendered in ERB describe the same
     series and must not be able to disagree. Both read these.

     Ordered by emphasis, not by hue: series 1 is the subject of the chart, 2 the
     comparison, 3 a reference or projection. Green first honours 3.0's rule that
     green measures — a chart is measurement, which is exactly its job. Blue appears
     here as data rather than decoration; nothing in a chart is clickable. */
  --zw-series-1: var(--zw-green-800);
  --zw-series-2: var(--zw-blue-700);
  --zw-series-3: var(--zw-ink-3);

  /* Area fill under series 1. Stated as an explicit rgba rather than derived from
     --zw-series-1, because Chart.js needs a resolved colour string and colour-mix()
     resolution through getComputedStyle is not dependable across browsers. Keep the
     rgb in step with --zw-green-800 (#1f5a49). */
  --zw-series-1-fill: rgba(31, 90, 73, 0.07);

  /* Chart chrome. Axis labels want to be readable but quiet; gridlines want to be
     nearly invisible — 3.0 does structure with hairlines, not colour blocks. */
  --zw-chart-axis: var(--zw-ink-3);
  --zw-chart-grid: rgba(15, 26, 38, 0.08);

  /* ---- Avatar palette ------------------------------------------------------
     Six hues for identity chips, where the only requirement is that adjacent
     avatars are told apart. Assigned by index, so nothing here carries meaning and
     none of it should be read as status.

     Drawn from the ramps and 3.0's muted tool colours rather than the saturated
     one-offs these replace (#00b386, #3b82c4, #e08a3c, #d1587e, #7c5cbf), which sat
     outside the palette and could not follow a rebrand. Ordered so neighbours in
     the rotation differ in hue rather than only in lightness. */
  --zw-avatar-1: var(--zw-green-700);
  --zw-avatar-2: var(--zw-tool-wiki);
  --zw-avatar-3: var(--zw-tool-calendar);
  --zw-avatar-4: var(--zw-red-500);
  --zw-avatar-5: var(--zw-tool-actions);
  --zw-avatar-6: var(--zw-moss);

  --zw-success: var(--zw-green-700);
  /* Brand Jonquil. This is a FILL, not a text colour: 1.52:1 on white. Anything
     textual — a label sitting on the fill, or warning-coloured copy — uses
     --zw-warning-ink (5.94:1 on white, 3.9:1 on the fill). For small text on the
     fill, go darker still with --zw-ink (11.5:1). */
  --zw-warning: var(--zw-yellow-500);
  --zw-warning-ink: var(--zw-yellow-900);
  --zw-danger:  #d64545;
  --zw-info:    var(--zw-blue-700);

  --fg-1: var(--zw-ink);
  --fg-2: var(--zw-ink-2);
  --fg-3: var(--zw-ink-3);
  --fg-on-brand: #ffffff;

  --bg-1: var(--zw-surface);
  --bg-2: var(--zw-surface-2);
  --bg-3: var(--zw-surface-3);

  --border-1: var(--zw-line);
  --border-2: var(--zw-line-2);
  --border-strong: var(--zw-blue-700);

  --link: var(--zw-blue-700);
  --link-hover: var(--zw-blue-800);

  /* Every token below is --zw-* prefixed, and that is load-bearing rather than
     stylistic. This file is linked unlayered; Tailwind v4 compiles its theme into
     `@layer theme`, and unlayered declarations beat layered ones regardless of
     source order. So a bare --font-*, --shadow-*, --ease-*, --radius-* or --text-*
     here silently rewrites the matching Tailwind utility across the whole app.

     That already happened twice: --radius-* inflated every rounded-* into a pill,
     and --shadow-sm / --shadow-md / --ease-out were quietly redefining 724 utility
     usages. Where we genuinely want to change a Tailwind utility, it is declared in
     app/assets/tailwind/application.css's @theme block instead.

     test/assets/token_namespace_test.rb enforces this. */
  --zw-font-display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --zw-font-sans:    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --zw-font-mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Not a Tailwind namespace — Tailwind uses --spacing-*. Left unprefixed. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* Radii, aligned to the 3.0 kit's shape.css so translating a component from the
     kit is a name swap rather than a judgement call. Two steps moved to get there:
     sm 8px -> 10px (the kit's button radius, which ButtonComponent previously
     hardcoded as rounded-[10px]) and lg 18px -> 14px (input shells). */
  --zw-radius-xs:   4px;
  --zw-radius-sm:  10px;  /* buttons */
  --zw-radius-md:  12px;
  --zw-radius-lg:  14px;  /* input shells */
  --zw-radius-xl:  16px;  /* cards */
  --zw-radius-2xl: 24px;  /* the tools panel */
  --zw-radius-page: 26px; /* page bottom corners over the dark base */
  --zw-radius-pill: 999px;

  --zw-shadow-xs: 0 1px 0 rgba(15,26,38,0.04);
  --zw-shadow-sm: 0 1px 2px rgba(15,26,38,0.06), 0 1px 3px rgba(15,26,38,0.04);
  --zw-shadow-md: 0 4px 12px rgba(15,26,38,0.08), 0 2px 4px rgba(15,26,38,0.04);
  --zw-shadow-ring: 0 0 0 3px rgba(51,102,153,0.25);

  /* 3.0's depth ladder, ported from the kit's shape.css. Warmer and shallower than
     the --zw-shadow-xs/sm/md trio above, which stays because ~724 Tailwind utility
     usages resolve through it via the @theme block. */
  --zw-shadow-hairline: 0 1px 2px rgba(28, 28, 30, 0.04);
  --zw-shadow-card:     0 2px 6px rgba(28, 28, 30, 0.05);
  --zw-shadow-float:    0 10px 28px rgba(28, 28, 30, 0.09), 0 2px 6px rgba(28, 28, 30, 0.05);
  --zw-shadow-dock:     0 6px 18px rgba(28, 28, 30, 0.10), 0 1px 3px rgba(28, 28, 30, 0.05);
  --zw-shadow-lift:     0 20px 44px rgba(28, 28, 30, 0.14);
  --zw-shadow-page:     0 14px 28px rgba(28, 28, 30, 0.16);

  --zw-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;

  /* The eyebrow's type, the one place 3.0 fixes a size and tracking together. 13px
     rather than Tailwind's text-xs (12px), so it needs its own token. */
  --zw-text-xs: 13px;
  --zw-tracking-eyebrow: 0.06em;
}