/* 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;

  --zw-green-900: #006b4f;
  --zw-green-800: #008c6a;
  --zw-green-700: #00a881;
  --zw-green-600: #00cc99;
  --zw-green-500: #33d6ad;
  --zw-green-300: #80e7cc;
  --zw-green-100: #ccf5e8;
  --zw-green-50:  #e8faf3;

  /* 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;

  /* 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;

  /* 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. */
  --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;
  --zw-tool-clay:     #7a6a41;  /* text on the ochre tint */

  /* 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 (#008c6a). */
  --zw-series-1-fill: rgba(0, 140, 106, 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;

  --zw-radius-xs: 4px; --zw-radius-sm: 8px; --zw-radius-md: 12px; --zw-radius-lg: 18px; --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);

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