/* ═══════════════════════════════════════════════════════════════════════════
   Design tokens — the ONE place colours, type, radii and shadows are defined.

   Four scopes, in cascade order:
     :root                         Amazon-ops product (emerald). Untouched.
     :root[data-theme="dark"]      …its dark palette.
     html.pondros                  Pondros. Values taken from the Figma file
                                   (tnFvyxWLrsiVALfGl0WlcS, page "Flow").
     html.pondros[data-theme=dark] …its dark palette.

   Loaded by base.html AND board/pondros_app.html, so the server-rendered app
   and the board SPA read the same values. Nothing else may declare these
   names — pondros.css only aliases them.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Pin native form controls (input/textarea/select) to a LIGHT control scheme
     so a Mac/Chrome in OS Dark Mode doesn't render our inputs with dark UA
     chrome + washed-out light text. The dark override below flips this only
     when the user opts into our own dark theme. */
  color-scheme: light;

  /* Amazon-ops palette — cool emerald canvas, white floating cards, deep
     emerald ink. Emerald (#04342C) is brand + primary action; water-teal
     (#1D9E75) is the AI / secondary spark. */
  --bg: #F4F7F5;                   /* cool emerald-tinted canvas */
  --bg-2: #EDF2EF;                 /* hover / zebra grey */
  --panel: rgba(255,255,255,0.88); /* translucent white — floats on the canvas */
  --panel-solid: #FFFFFF;          /* pure-white card surface */
  --surface: var(--panel-solid);   /* inputs / raised fields */
  --surface-2: #F1F5F3;            /* inset / secondary surface */
  --chip: #EAF0ED;                 /* neutral chip fill */
  --line: rgba(16,42,32,.10);      /* emerald hairline */
  --line-2: rgba(16,42,32,.16);    /* stronger hairline */
  --line-strong: rgba(16,42,32,.16);
  --ink: #0E1A15;                  /* deep emerald near-black (heading) */
  --ink-2: #33433c;                /* body copy on cards */
  --ink-3: #5A6B63;                /* muted — WCAG-AA */
  --ink-4: #90A099;                /* faint */
  --accent: #04342C;               /* primary action — deep emerald */
  --accent-2: rgba(4,52,44,.12);   /* pale emerald tint */
  --accent-ink: #085041;
  --on-accent: #FFFFFF;            /* text on the primary-action pill */
  --brand: #04342C;
  --brand-700: #085041;
  --brand-soft: rgba(4,52,44,.12);
  --brand-deep: #04342C;           /* logo squircle base */
  --ocean: #1D9E75;                /* water-teal secondary */
  --ocean-700: #0F6E56;
  --ocean-soft: rgba(29,158,117,.12);
  --spark: #1D9E75;                /* AI accent — water-teal */
  --violet: #7C3AED;
  --blue: #2563EB;
  --rose: #E11D48;
  --rose-soft: rgba(225,29,72,.10);
  --amber: #C2740B;
  --amber-soft: rgba(217,119,6,.14);
  --ok: #0F6E56;
  --ok-bg: rgba(29,158,117,.13);
  --warn: #C2740B;
  --warn-bg: rgba(217,119,6,.14);
  --crit: #E11D48;
  --crit-bg: rgba(225,29,72,.10);
  --row-h: 44px;
  --radius: 14px;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --shadow-card: 0 1px 2px rgba(16,42,32,.04), 0 16px 44px -24px rgba(16,42,32,.22);
  --shadow-hover: 0 2px 4px rgba(16,42,32,.05), 0 22px 50px -20px rgba(16,42,32,.30);
  --shadow-drawer: 0 0 0 1px rgba(16,42,32,.06), -24px 0 60px -20px rgba(16,42,32,.20);

  /* Easing curves — one set used everywhere instead of ad-hoc ease values. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Type scale — Figma's named text styles ("Body/text sm/regular" etc.).
     Declared here so both skins share one scale. */
  --text-xs: 12px;   --leading-xs: 18px;
  --text-sm: 14px;   --leading-sm: 20px;
  --text-base: 16px; --leading-base: 24px;
  --text-lg: 18px;   --leading-lg: 26px;
  --text-xl: 20px;   --leading-xl: 28px;
  --text-2xl: 24px;  --leading-2xl: 32px;

  /* Radii + shell geometry. Pondros overrides the values, not the names. */
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --rail-w: 248px;

  /* Legacy shadcn-style tokens kept so existing templates still render.
     Mapped to the emerald palette. */
  --background: 150 13% 96%;
  --foreground: 153 30% 8%;
  --card: 0 0% 100%;
  --card-foreground: 153 30% 8%;
  --muted: 150 13% 93%;
  --muted-foreground: 157 9% 39%;
  --border: 152 16% 89%;
  --input: 152 16% 89%;
  --ring: 158 69% 37%;
  --primary: 169 86% 11%;
  --primary-foreground: 0 0% 100%;
  --destructive: 347 77% 50%;
  --destructive-foreground: 0 0% 100%;
}

/* ── Dark mode ── same token names, dark cool-grey palette. Every template
   inherits it because the whole UI reads these tokens. Follows the OS
   (prefers-color-scheme) — applied pre-paint in <head> to avoid a flash. */
:root[data-theme="dark"] {
  color-scheme: dark;                      /* native form controls follow our dark theme */
  --bg: #0B1512;                           /* deep emerald-black canvas */
  --bg-2: rgba(255,255,255,0.05);          /* hover/zebra */
  --panel: rgba(20,32,28,0.82);            /* translucent card */
  --panel-solid: #142019;                  /* card surface */
  --surface: var(--panel-solid);
  --surface-2: #18241e;
  --chip: rgba(255,255,255,0.06);
  --line: rgba(255,255,255,.09);           /* hairline on dark */
  --line-2: rgba(255,255,255,.14);
  --line-strong: rgba(255,255,255,.14);
  --ink: #EAF2EE;                          /* near-white heading */
  --ink-2: #cdd9d3;
  --ink-3: #94a59d;
  --ink-4: #6b7c74;
  --accent: #2BB988;                       /* emerald, brighter on dark */
  --accent-2: rgba(43,185,136,.16);
  --accent-ink: #5fd3a8;
  --on-accent: #FFFFFF;
  --brand: #2BB988;
  --brand-700: #5fd3a8;
  --brand-soft: rgba(43,185,136,.16);
  --brand-deep: #04342C;
  --ocean: #2BB988;
  --ocean-700: #5fd3a8;
  --ocean-soft: rgba(43,185,136,.16);
  --spark: #2BB988;
  --rose: #fb7185;
  --rose-soft: rgba(225,29,72,.18);
  --amber: #e6b366;
  --amber-soft: rgba(230,179,102,.16);
  --ok: #2BB988;
  --ok-bg: rgba(43,185,136,.16);
  --warn: #e6b366;
  --warn-bg: rgba(230,179,102,.16);
  --crit: #fb7185;
  --crit-bg: rgba(225,29,72,.18);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 18px 48px -22px rgba(0,0,0,0.6);
  --shadow-hover: 0 2px 4px rgba(0,0,0,0.35), 0 22px 50px -20px rgba(0,0,0,0.7);
  --shadow-drawer: 0 0 0 1px rgba(255,255,255,0.07), -24px 0 60px -20px rgba(0,0,0,0.6);
  /* Legacy shadcn HSL tokens → emerald-dark equivalents */
  --background: 160 28% 6%;
  --foreground: 156 18% 92%;
  --card: 156 22% 10%;
  --card-foreground: 156 18% 92%;
  --muted: 156 14% 14%;
  --muted-foreground: 157 9% 62%;
  --border: 156 14% 18%;
  --input: 156 14% 18%;
  --ring: 158 62% 45%;
  --primary: 158 62% 45%;
  --primary-foreground: 160 28% 6%;
  --destructive: 351 95% 71%;
  --destructive-foreground: 160 28% 6%;
}

/* Hardcoded light pockets in the chrome that tokens don't reach */
:root[data-theme="dark"] .nav.active { background: var(--bg-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   PONDROS — values read off the Figma file with the inspect panel.
     canvas #FFFFFF · rail #F9F9F9 · hairline #E8E8E8 · ink #1D1F21
     muted #646464 · danger #F00000 · rail 244px · card radius 8px
   Neutral greys only: the redesign has no coloured accent. The primary action
   is ink. --gold / --ocean / --spark survive as aliases onto ink because ~130
   templates still read them; nothing renders gold any more.
   ═══════════════════════════════════════════════════════════════════════════ */
html.pondros {
  --bg: #FFFFFF;                /* content canvas */
  --bg-2: #F9F9F9;              /* rail / well / hover wash */
  --panel: #FFFFFF;             /* card */
  --panel-solid: #FFFFFF;
  --surface: var(--panel-solid);
  --surface-2: #F9F9F9;
  --chip: rgba(0,0,0,.06);      /* nav-active + chip fill — Figma: #000 @ 6% */
  --paper: #F9F9F9;
  --line: #E8E8E8;
  --line-2: #DCDCDC;
  --line-strong: #DCDCDC;
  --ink: #1D1F21;               /* body + headings */
  --ink-2: #3F4245;
  --ink-3: #646464;             /* meta, labels, placeholders */
  --ink-4: #9A9A9A;             /* faint */

  /* Primary action is ink. No coloured accent in this design. The action fill is
     a touch lighter than body ink — Figma's "Button - Create" is #404244 on
     #1D1F21 text, which keeps a dark pill from reading as a hole in the page. */
  --accent: #404244;
  --accent-2: rgba(0,0,0,.06);
  --accent-ink: #1D1F21;
  --on-accent: #F2F3F4;
  --brand: #1D1F21;
  --brand-700: #2E3032;   /* primary-button hover */
  --brand-soft: rgba(0,0,0,.06);
  --brand-deep: #1D1F21;

  /* Status. Danger is Figma's #F00000; ok/warn kept from the live palette
     because the Figma frames don't show a success or warning state. */
  --ok: #1F8E5A;   --ok-bg: rgba(31,142,90,.10);
  --warn: #B45309; --warn-bg: rgba(180,83,9,.10);
  --crit: #F00000; --crit-bg: rgba(240,0,0,.08);

  /* The gold accent is retired: the redesign is neutral greys plus red for
     overdue. These names survive only because ~130 templates still read them —
     they now resolve to ink, so nothing renders gold. Delete a name once no
     template references it. */
  --ocean: var(--ink); --ocean-700: var(--ink); --ocean-soft: var(--accent-2);
  --spark: var(--ink);
  --gold: var(--ink); --gold-deep: var(--ink);
  --gold-wash: var(--accent-2); --gold-line: var(--line-2);

  --radius: 12px;               /* rail + panel corners */
  --radius-sm: 8px;             /* nav rows, cards, chips */
  --radius-lg: 16px;            /* composer */
  --rail-w: 244px;
  --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Figma: 0 1 2 #000 5% + 0 0 1 #000 26.7% */
  --shadow-card: 0 1px 2px rgba(0,0,0,.05), 0 0 1px rgba(0,0,0,.27);
  --shadow-hover: 0 2px 6px rgba(0,0,0,.07), 0 0 1px rgba(0,0,0,.27);
  --shadow-drawer: 0 0 0 1px rgba(0,0,0,.06), 30px 0 60px -30px rgba(0,0,0,.4);

  /* Compatibility vocabulary. The board SPA's markup and css/shell.css were
     written against these shorter names; they are aliases, never values, so
     there is still exactly one place a colour is decided. */
  --paper: var(--bg);
  --side: var(--bg-2);          /* rail */
  --well: var(--chip);          /* inset / active row */
  --faint: var(--ink-4);
  --hair: var(--line);
  --hair-2: var(--line-2);
  --gold-soft: var(--gold-wash);
  --rose: var(--crit);
  --rose-soft: var(--crit-bg);
  --teal: var(--ok);
  --amber: var(--warn);
  --amber-soft: var(--warn-bg);
  --amber-line: var(--warn);
  --serif: var(--font-display);
  --sans: var(--font-display);
  --hover: var(--accent-2);     /* interactive overlay */
  --accent-btn: var(--accent);  /* the dark "primary pill" */
  --accent-btn-fg: var(--on-accent);
  --accent-btn-hover: var(--brand-700);

  /* legacy shadcn HSL → neutral white */
  --background: 0 0% 100%; --foreground: 210 6% 12%;
  --card: 0 0% 100%; --card-foreground: 210 6% 12%;
  --muted: 0 0% 98%; --muted-foreground: 0 0% 39%;
  --border: 0 0% 91%; --input: 0 0% 91%;
  --ring: 210 6% 12%; --primary: 210 6% 12%; --primary-foreground: 0 0% 100%;
}

/* ── Pondros DARK ── derived from the light scale (the Figma file has no dark
   frames): the canvas/rail relationship inverts, greys stay neutral. */
html.pondros[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131416;                /* content canvas */
  --bg-2: #1B1D1F;              /* rail / well / hover */
  --panel: #1A1C1E;
  --panel-solid: #1A1C1E;
  --surface: var(--panel-solid);
  --surface-2: #1B1D1F;
  --chip: rgba(255,255,255,.07);
  --paper: #0F1113;
  --line: #2A2D30;
  --line-2: #383B3E;
  --line-strong: #383B3E;
  --ink: #E8EAEC;
  --ink-2: #C2C5C8;
  --ink-3: #90959A;
  --ink-4: #63686D;
  /* The ink pill inverts to a light pill on dark. */
  --accent: #E8EAEC;
  --accent-2: rgba(255,255,255,.08);
  --accent-ink: #E8EAEC;
  --on-accent: #131416;
  --brand: #E8EAEC;
  --brand-700: #D2D5D8;
  --brand-soft: rgba(255,255,255,.08);
  --brand-deep: #1D1F21;
  --ok: #5FB88F;   --ok-bg: rgba(95,184,143,.16);
  --warn: #E8B44A; --warn-bg: rgba(232,180,74,.16);
  --crit: #FF6B6B; --crit-bg: rgba(255,107,107,.14);
  /* Retired accent — see the light scope. */
  --ocean: var(--ink); --ocean-700: var(--ink); --ocean-soft: var(--accent-2);
  --spark: var(--ink);
  --gold: var(--ink); --gold-deep: var(--ink);
  --gold-wash: var(--accent-2); --gold-line: var(--line-2);
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 0 1px rgba(0,0,0,.6);
  --shadow-hover: 0 2px 6px rgba(0,0,0,.5), 0 0 1px rgba(0,0,0,.6);
  --shadow-drawer: 0 0 0 1px rgba(255,255,255,.07), 30px 0 60px -30px rgba(0,0,0,.6);
  /* legacy shadcn HSL → neutral dark */
  --background: 220 6% 9%; --foreground: 210 8% 92%;
  --card: 220 6% 11%; --card-foreground: 210 8% 92%;
  --muted: 220 5% 12%; --muted-foreground: 210 4% 58%;
  --border: 213 5% 18%; --input: 213 5% 18%;
  --ring: 210 8% 92%; --primary: 210 8% 92%; --primary-foreground: 220 6% 9%;
}