/* ─────────────────────────────────────────────────────────────────
   PennaSystems — app theme tokens
   Light + dark. Mirrors marketing's paper/ink language.
   The --slate-* aliases keep ~284 inline references theme-aware.
   ───────────────────────────────────────────────────────────────── */

:root,
:root[data-theme="light"] {
  /* Paper / ink */
  --paper:    #F5EFE3;
  --paper-hi: #FBF6EA;
  --paper-lo: #ECE4D2;
  --ink:      #1B1A17;
  --ink-2:    #3A372F;
  --muted:    #6E665A;
  --rule:     #D9CFB8;
  --gold:     #B58A3F;
  --gold-text: #83642A; /* text/link-safe gold — ≥4.5:1 on --paper/--paper-hi/#fff (A11Y-02) */
  --on-gold:  #1B1A17; /* dark text for gold-filled buttons — invariant, ≥4.5:1 on --gold either theme (A11Y-02b) */

  /* Status — text, bg, border */
  --success:    #16a34a;
  --success-bg: #f0fdf4;
  --success-br: #bbf7d0;
  --danger:     #dc2626;
  --danger-bg:  #fef2f2;
  --danger-br:  #fecaca;
  --warning:    #d97706;
  --warning-bg: #fefce8;
  --warning-br: #fde68a;
  --warning-fg: #5c3a00;  /* text ON --warning-bg: 9.3:1 */
  --info:       #1d4ed8;
  --info-bg:    #eff6ff;
  --info-br:    #bfdbfe;

  /* Typography */
  --serif: 'Newsreader', 'Source Serif Pro', Georgia, serif;
  --sans:  'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Shape */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;

  /* Spacing scale — 4px base, 8px rhythm */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Elevation — subtle on paper */
  --shadow-sm: 0 1px 2px rgba(27,26,23,.06);
  --shadow:    0 2px 8px rgba(27,26,23,.08);
  --shadow-lg: 0 12px 32px rgba(27,26,23,.10);

  /* Legacy slate aliases — inline var(--slate-*) refs auto-theme */
  --slate-50:  var(--paper-hi);
  --slate-100: var(--paper-lo);
  --slate-200: var(--rule);
  --slate-300: var(--rule);
  --slate-400: var(--muted);
  --slate-500: var(--muted);
  --slate-600: var(--ink-2);
  --slate-700: var(--ink-2);
  --slate-800: var(--ink);
  --slate-900: var(--ink);

  /* Legacy accent aliases */
  --accent:       var(--gold);
  --accent-dark:  #9E7530;
  --accent-light: #F2E8D3;

  /* Legacy font alias */
  --font: var(--sans);
}

:root[data-theme="dark"] {
  --paper:    #1B1A17;
  --paper-hi: #25231F;
  --paper-lo: #14130F;
  --ink:      #F5EFE3;
  --ink-2:    #D9CFB8;
  --muted:    #A89E92;
  --rule:     #3A372F;
  --gold:     #C9A05A;
  --gold-text: #C9A05A; /* unchanged — already passes at 7.18:1 on dark --paper (A11Y-02) */
  --on-gold:  #1B1A17; /* unchanged — invariant, ≥4.5:1 on --gold (A11Y-02b) */

  --success:    #4ade80;
  --success-bg: #052e1f;
  --success-br: #14532d;
  --danger:     #f87171;
  --danger-bg:  #2d0a0a;
  --danger-br:  #7f1d1d;
  --warning:    #fbbf24;
  --warning-bg: #2a1f00;
  --warning-br: #78350f;
  --warning-fg: #fde68a;  /* text ON --warning-bg: 12.9:1 */
  --info:       #93c5fd;
  --info-bg:    #0a1830;
  --info-br:    #1e3a8a;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 2px 8px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.6);

  --slate-50:  var(--paper-hi);
  --slate-100: var(--paper-lo);
  --slate-200: var(--rule);
  --slate-300: var(--rule);
  --slate-400: var(--muted);
  --slate-500: var(--muted);
  --slate-600: var(--ink-2);
  --slate-700: var(--ink-2);
  --slate-800: var(--ink);
  --slate-900: var(--ink);

  --accent:       var(--gold);
  --accent-dark:  #B58A3F;
  --accent-light: #3A2F1A;
}

/* Body defaults pulled here so theme flips paint immediately */
html, body {
  background: var(--paper);
  color: var(--ink);
  transition: background-color 180ms ease, color 180ms ease;
}

/* ═════════════════════════════════════════════════════════════════
   PROPOSAL — PennaPay-identity app theme (app-shell re-theme, Phase 0)
   Rune request 2026-08-30. ADDITIVE ONLY: nothing above this line is
   changed, and nothing below applies until an element carries
   data-app-theme="pennapay". Today only frontend/styleguide.html does.
   Later phases flip the app shell onto these names; marketing converges
   on the same file in a later wave.

   Derivation — the greens are a hue-locked ramp off the PennaPay brand
   forest green #335e43 (H=142.3°, S≈30%, L=28.4% — logos/README.md):
     L=6 #0A140E · L=7 #0C1710 · L=10 #122118 · L=14 #1A2E21
     L=20 #264030 · L=28 #325D42 ≈ the brand green itself
     L=34 #3E6F50 · L=42 #4F8764 · L=70 #A3C2AF · L=85 #D3DED7
     L=94 #EEF1EF · L=97 #F7F8F7
   Raw #335e43 is NEVER a full-screen ground — it is a mid-ramp value.

   Two rules the palette exists to enforce (measured, not asserted —
   /styleguide.html recomputes every ratio in-browser):
     · LIGHT: green #335e43 is the interactive colour (7.44:1 on white).
       Gold #c1a551 is DECORATION ONLY — 2.39:1 on white, which fails
       AA text (4.5) AND the 3:1 UI-component floor. It must never
       carry copy, a control, or a state. Where a gold-family colour
       must carry meaning, use --pp-app-accent-decorative-strong.
     · DARK: gold is the interactive colour (7.48:1 on the ground);
       green drops back to decoration.

   Convergence note: the marketing dark ramp in pennapay-theme.css
   (--pp-bg #0c1a13 / --pp-surface #13261b / --pp-border #284736) is the
   same forest family two degrees off-hue. Aligning the two is a
   two-value decision in the later wave, not a re-derivation.
   ═════════════════════════════════════════════════════════════════ */

/* ── LIGHT: white ground, green interactive, gold decorative ── */
[data-app-theme="pennapay"],
[data-app-theme="pennapay"][data-theme="light"] {
  /* Native controls (select popups, scrollbars, date pickers) follow the
     theme rather than the OS — otherwise a dark app shell renders a white
     <select> dropdown. */
  color-scheme: light;

  /* Grounds & surfaces */
  --pp-app-ground:          #FFFFFF;  /* page background                   */
  --pp-app-surface:         #F7F8F7;  /* cards, sidebar, table wrap        */
  --pp-app-surface-raised:  #FFFFFF;  /* modals, popovers, hover rows      */
  --pp-app-surface-sunken:  #EEF1EF;  /* table headers, wells, inert fills */

  /* Text */
  --pp-app-text:            #0E1B13;  /* 17.72:1 on ground                 */
  --pp-app-text-muted:      #546B5C;  /*  5.78:1 on ground, 5.08 on sunken */
  --pp-app-text-on-accent:  #FFFFFF;  /* copy on a green fill              */

  /* Lines */
  --pp-app-border:          #D3DED7;  /* hairlines, card edges (decorative)*/
  --pp-app-border-strong:   #6E8A79;  /* input borders — 3.77:1 on ground,
                                         3.31 on sunken (UI floor is 3:1) */

  /* Interactive — GREEN in light */
  --pp-app-accent-interactive:       #335E43;
  --pp-app-accent-interactive-hover: #264030;
  --pp-app-accent-interactive-soft:  rgba(51,94,67,.08);
  --pp-app-focus-ring:               #335E43;

  /* Decorative — GOLD in light. Borders, icons, the crown feather.
     NEVER text, never a control, never the only carrier of a state. */
  --pp-app-accent-decorative:        #C1A551;
  --pp-app-accent-decorative-soft:   rgba(193,165,81,.14);
  /* Use this when a gold-family colour must carry meaning (5.50:1). */
  --pp-app-accent-decorative-strong: #83642A;

  /* Status — text / tint / border */
  --pp-app-success:     #116B35;  --pp-app-success-bg: #EDF9F1;  --pp-app-success-br: #A8DCBE;
  --pp-app-warning:     #96540A;  --pp-app-warning-bg: #FDF6E3;  --pp-app-warning-br: #E8CE95;
  --pp-app-error:       #B3261E;  --pp-app-error-bg:   #FDF1F0;  --pp-app-error-br:   #EFB6B2;
  --pp-app-info:        #2E64A8;  --pp-app-info-bg:    #EEF4FB;  --pp-app-info-br:    #B4CDE8;

  /* Elevation — neutral shadow on a white ground */
  --pp-app-shadow-sm: 0 1px 2px rgba(14,27,19,.06);
  --pp-app-shadow:    0 2px 8px rgba(14,27,19,.09);
  --pp-app-shadow-lg: 0 12px 32px rgba(14,27,19,.12);
}

/* ── DARK: deep-green ground, gold interactive, green decorative ── */
[data-app-theme="pennapay"][data-theme="dark"] {
  color-scheme: dark;

  /* Grounds & surfaces — the darkened #335e43 ramp, never raw #335e43 */
  --pp-app-ground:          #0C1710;
  --pp-app-surface:         #122118;
  --pp-app-surface-raised:  #1A2E21;
  --pp-app-surface-sunken:  #0A140E;

  /* Text */
  --pp-app-text:            #EEF1EF;  /* 16.12:1 on ground                 */
  --pp-app-text-muted:      #8FAE9C;  /*  7.60:1 on ground, 6.93 on surface*/
  --pp-app-text-on-accent:  #0C1710;  /* dark copy on a gold fill          */

  /* Lines */
  --pp-app-border:          #264030;
  --pp-app-border-strong:   #4F8764;  /* 4.35:1 on ground — UI floor is 3:1*/

  /* Interactive — GOLD in dark */
  --pp-app-accent-interactive:       #C1A551;
  --pp-app-accent-interactive-hover: #D6BC70;
  --pp-app-accent-interactive-soft:  rgba(193,165,81,.16);
  --pp-app-focus-ring:               #C1A551;

  /* Decorative — GREEN in dark (the light theme's roles, swapped) */
  --pp-app-accent-decorative:        #4F8764;
  --pp-app-accent-decorative-soft:   rgba(79,135,100,.20);
  --pp-app-accent-decorative-strong: #71A885;

  /* Status */
  --pp-app-success:     #5BE096;  --pp-app-success-bg: #0E2A1B;  --pp-app-success-br: #1C5233;
  --pp-app-warning:     #F5A524;  --pp-app-warning-bg: #2C1E06;  --pp-app-warning-br: #6B4A0E;
  --pp-app-error:       #FF8B8B;  --pp-app-error-bg:   #2A1416;  --pp-app-error-br:   #7F2A2A;
  --pp-app-info:        #7FB0E0;  --pp-app-info-bg:    #0E1E33;  --pp-app-info-br:    #2E5480;

  --pp-app-shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --pp-app-shadow:    0 2px 8px rgba(0,0,0,.55);
  --pp-app-shadow-lg: 0 12px 32px rgba(0,0,0,.65);
}

/* ═════════════════════════════════════════════════════════════════
   PHASE 1 — legacy-alias bridge (app-shell adoption)
   Rune request 2026-08-30. The app shell consumes the ORIGINAL
   semantic names at the top of this file (--paper*, --ink*, --muted,
   --rule, --gold*, --on-gold, status, shadows) — ~2,300 references
   across 44 app-shell pages and 8 stylesheets. Rather than rename
   anything, this block re-points those same names at the approved
   --pp-app-* values whenever the root carries data-app-theme="pennapay".

   Consequences, all deliberate:
     · Every token-consuming rule re-themes with ZERO per-page CSS edits.
     · The --slate-* and --accent aliases above are declared as
       var(--paper-hi) / var(--gold) / …, so they resolve against the
       redefined values automatically — they are NOT restated here.
     · The existing dark-mode mechanism is untouched: the FOUC bootstrap
       and theme-toggle.js still write [data-theme] on <html>, and the
       dark half of this bridge keys off exactly that attribute.
     · Marketing pages, portal*, the public /p/{slug} folio shell, the
       Jinja invoice/PDF templates and styleguide.html never carry
       data-app-theme, so none of this reaches them.

   Two values below are not --pp-app-* tokens because the palette has no
   third text step, and the shell has three (--ink / --ink-2 / --muted).
   Both are exact entries from the approved hue-locked ramp documented
   above — nothing is invented:
     light --ink-2: #264030 (ramp L=20)   dark --ink-2: #D3DED7 (ramp L=85)

   The specificity pairs (bare + :root-prefixed) exist so a page-level
   `:root { … }` block in an app-shell <style> — onboarding.html has one —
   cannot outrank the theme on source order at equal specificity.
   ═════════════════════════════════════════════════════════════════ */

/* ── LIGHT: white ground, GREEN interactive, gold decorative ──
   --gold / --gold-text / --accent are the shell's "interactive" names, so
   in light they carry GREEN. Gold #C1A551 is 2.39:1 on white — it fails AA
   text AND the 3:1 UI floor, so it must never land on a control here. It
   stays available for decoration as --pp-app-accent-decorative. */
[data-app-theme="pennapay"],
:root[data-app-theme="pennapay"],
[data-app-theme="pennapay"][data-theme="light"] {
  --paper:     var(--pp-app-ground);          /* #FFFFFF */
  --paper-hi:  var(--pp-app-surface);         /* #F7F8F7 — cards, inputs  */
  --paper-lo:  var(--pp-app-surface-sunken);  /* #EEF1EF — wells, headers */
  --ink:       var(--pp-app-text);            /* #0E1B13 — 17.72:1        */
  --ink-2:     #264030;                       /* ramp L=20 — 11.15:1      */
  --muted:     var(--pp-app-text-muted);      /* #546B5C —  5.78:1        */
  /* Hairline: 30% of the way from --pp-app-border to --pp-app-border-strong
     (#B5C5BB, 1.80:1 on the ground, was 1.38) — Rune 2026-10-03: cards and
     list rows looked faded next to the buttons. */
  --rule:      color-mix(in srgb, var(--pp-app-border-strong) 30%, var(--pp-app-border));
  /* Form fields (main.css): the strong border on a --paper fill. */
  --field-line: var(--pp-app-border-strong);  /* #6E8A79 — 3.77:1        */
  --field-fill: var(--pp-app-ground);

  --gold:      var(--pp-app-accent-interactive);        /* #335E43 7.44:1 */
  --gold-text: var(--pp-app-accent-interactive);        /* link-safe      */
  --on-gold:   var(--pp-app-text-on-accent);            /* #FFFFFF        */
  --accent-dark:  var(--pp-app-accent-interactive-hover);
  --accent-light: var(--pp-app-accent-interactive-soft);

  --success:    var(--pp-app-success);
  --success-bg: var(--pp-app-success-bg);
  --success-br: var(--pp-app-success-br);
  --danger:     var(--pp-app-error);
  --danger-bg:  var(--pp-app-error-bg);
  --danger-br:  var(--pp-app-error-br);
  --warning:    var(--pp-app-warning);
  --warning-bg: var(--pp-app-warning-bg);
  --warning-br: var(--pp-app-warning-br);
  --info:       var(--pp-app-info);
  --info-bg:    var(--pp-app-info-bg);
  --info-br:    var(--pp-app-info-br);

  --shadow-sm: var(--pp-app-shadow-sm);
  --shadow:    var(--pp-app-shadow);
  --shadow-lg: var(--pp-app-shadow-lg);
}

/* ── DARK: deep-green ground, GOLD interactive, green decorative ──
   Roles swap exactly as the palette prescribes; the shell's names do not. */
[data-app-theme="pennapay"][data-theme="dark"],
:root[data-app-theme="pennapay"][data-theme="dark"] {
  --paper:     var(--pp-app-ground);          /* #0C1710 */
  --paper-hi:  var(--pp-app-surface);         /* #122118 — cards, inputs  */
  --paper-lo:  var(--pp-app-surface-sunken);  /* #0A140E — wells, headers */
  --ink:       var(--pp-app-text);            /* #EEF1EF — 16.12:1        */
  --ink-2:     #D3DED7;                       /* ramp L=85 — 12.55:1      */
  --muted:     var(--pp-app-text-muted);      /* #8FAE9C —  7.60:1        */
  --rule:      color-mix(in srgb, var(--pp-app-border-strong) 30%, var(--pp-app-border)); /* #325540, 2.19:1 (was 1.62) */
  --field-line: var(--pp-app-border-strong);  /* #4F8764 — 4.35:1        */
  --field-fill: var(--pp-app-ground);

  --gold:      var(--pp-app-accent-interactive);        /* #C1A551 7.48:1 */
  --gold-text: var(--pp-app-accent-interactive);
  --on-gold:   var(--pp-app-text-on-accent);            /* #0C1710        */
  --accent-dark:  var(--pp-app-accent-interactive-hover);
  --accent-light: var(--pp-app-accent-interactive-soft);

  --success:    var(--pp-app-success);
  --success-bg: var(--pp-app-success-bg);
  --success-br: var(--pp-app-success-br);
  --danger:     var(--pp-app-error);
  --danger-bg:  var(--pp-app-error-bg);
  --danger-br:  var(--pp-app-error-br);
  --warning:    var(--pp-app-warning);
  --warning-bg: var(--pp-app-warning-bg);
  --warning-br: var(--pp-app-warning-br);
  --info:       var(--pp-app-info);
  --info-bg:    var(--pp-app-info-bg);
  --info-br:    var(--pp-app-info-br);

  --shadow-sm: var(--pp-app-shadow-sm);
  --shadow:    var(--pp-app-shadow);
  --shadow-lg: var(--pp-app-shadow-lg);
}