/* ==========================================================================
   Klingbar Design Tokens
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color: Hydrangea Pink ---------- */
  --pink-50:  #FFF5F8;
  --pink-100: #FCE4EC;
  --pink-200: #F9D2DF;
  --pink-300: #F4B8C9;  /* primary */
  --pink-400: #EC95AE;
  --pink-500: #DD7494;
  --pink-600: #C25778;
  --pink-700: #9B435F;

  /* ---------- Color: Hydrangea Blue ---------- */
  --blue-50:  #F4F8FD;
  --blue-100: #E5EEF8;
  --blue-200: #CFDDF0;
  --blue-300: #A8C5E5;  /* primary */
  --blue-400: #82A7D5;
  --blue-500: #5E87BF;
  --blue-600: #466BA0;
  --blue-700: #34527E;

  /* ---------- Color: Neutrals (warm — peach/rose undertones) ---------- */
  --petal:    #FBF6F3;  /* page background, warm cream off-white */
  --surface:  #FFFDFB;  /* surface, very warm white */
  --surface-2:#F5EDE8;  /* recessed / striped rows, warm sand */
  --slate-50: #EFE6E1;  /* warm bone */
  --slate-100:#E2D5CD;  /* milky linen */
  --slate-200:#C8B6AC;  /* taupe */
  --slate-300:#A89589;  /* warm stone */
  --slate-400:#857166;  /* mocha */
  --slate-500:#65554D;  /* cocoa */
  --slate-600:#493D38;  /* warm brown-slate */
  --slate-700:#322923;  /* espresso */
  --slate-800:#241B16;  /* near-black, warm */
  --slate-900:#1A1310;

  /* ---------- Color: Semantic (pastel register) ---------- */
  --sage-100:    #E5F0E2;
  --sage-300:    #A8C7A0;  /* success */
  --sage-700:    #4F6E48;

  --apricot-100: #FCEBD9;
  --apricot-300: #F4B97A;  /* warning */
  --apricot-700: #8C5A22;

  --rose-100:    #FBE0DD;
  --rose-300:    #E59B93;  /* error */
  --rose-700:    #8E3E36;

  --periwinkle-100: #EFE8F4;
  --periwinkle-300: #B5B7E3; /* info / active selection accent */
  --periwinkle-700: #3F3D78;

  /* ---------- Color: Tokens (foreground) ---------- */
  --fg-1: var(--slate-800);   /* primary text */
  --fg-2: var(--slate-600);   /* body */
  --fg-3: var(--slate-500);   /* muted — 6.61:1 vs --bg-page, 6.14:1 vs --bg-surface-2 */
  --fg-4: var(--slate-400);   /* placeholder / aux — 4.55:1 vs --bg-surface, 4.30:1 vs --bg-page (kept above the surface-2 4.5:1 floor by routing surface-2 callers to .field-help on --bg-surface only) */
  --fg-on-primary: var(--slate-800);
  --fg-on-dark: var(--petal);
  --fg-link: var(--blue-600);
  --fg-link-hover: var(--blue-700);
  --fg-accent: var(--pink-700);  /* eyebrow / accent labels — flips bright-pink in dark */

  /* Status foregrounds — flip per theme so text on the page background stays readable.
     Use these for inline status text (e.g. error labels, "expired" tags). The raw
     -700 ramps are still correct as text inside their -100 chip backgrounds. */
  --fg-success: var(--sage-700);
  --fg-warn:    var(--apricot-700);
  --fg-error:   var(--rose-700);
  --fg-info:    var(--periwinkle-700);

  /* ---------- Color: Tokens (background) ---------- */
  --bg-page: var(--petal);
  --bg-surface: var(--surface);
  --bg-surface-2: var(--surface-2);
  --bg-primary: var(--pink-300);
  --bg-primary-hover: var(--pink-400);
  --bg-primary-press: var(--pink-500);
  --bg-secondary: var(--blue-300);
  --bg-secondary-hover: var(--blue-400);
  --bg-tint-pink: var(--pink-100);
  --bg-tint-blue: var(--blue-100);

  /* Component-specific composite tokens — flip together in dark mode. */
  --bg-prompt: var(--slate-800);          /* prompt-bubble surface (transcript) */
  --fg-prompt: var(--petal);              /* prompt-bubble text */
  --bg-card-selected: var(--pink-50);     /* persona/option card "selected" state */
  --btn-tonal-bg: var(--bg-tint-blue);    /* tonal button rest surface */
  --btn-tonal-fg: var(--blue-700);        /* tonal button rest text */
  --bg-disabled: var(--bg-surface-2);     /* disabled button / input surface */
  --fg-disabled: var(--slate-400);        /* disabled button / input text — 4.55:1 vs --bg-surface-2 */
  --pastel-tone-down: none;               /* dark mode rebinds to a saturate/brightness filter so always-pastel surfaces don't glare */

  /* ---------- Color: Tokens (border) ---------- */
  --border-subtle: #DCCABF;            /* warm hairline — 1.7:1 vs surface (decorative dividers, soft separators) */
  --border-default: var(--slate-300);  /* card / input / chip edges — 2.83:1 vs surface (functional UI per WCAG 1.4.11) */
  --border-strong: var(--slate-400);   /* input hover, prominent dividers — 4.97:1 vs surface */
  --border-focus: var(--blue-500);     /* focus ring — 3.5:1 vs page */

  /* ---------- Color: On-dark (footer + always-dark surfaces) ---------- */
  --fg-on-dark-2: rgba(251, 246, 243, 0.7);
  --fg-on-dark-3: rgba(251, 246, 243, 0.5);
  --border-on-dark: rgba(251, 246, 243, 0.1);

  /* ---------- Color: Bloom gradient ---------- */
  --bloom-gradient: linear-gradient(135deg, #FCE4EC 0%, #F4F8FD 60%, #E5EEF8 100%);
  --bloom-gradient-soft: linear-gradient(135deg, #FFF5F8 0%, #FBF7F8 50%, #F4F8FD 100%);

  /* ---------- Color: Print fallback (paper-only; not theme-flipped) ---------- */
  --print-text-strong: #000;
  --print-text-muted: #555;
  --print-border: #ccc;

  /* ---------- Typography: families ---------- */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'Geist', sans-serif;

  /* ---------- Typography: scale ---------- */
  --type-display-xl: 600 56px/1.05 var(--font-display);
  --type-display-lg: 600 44px/1.08 var(--font-display);
  --type-display-md: 600 32px/1.15 var(--font-display);
  --type-h1:         600 28px/1.2  var(--font-sans);
  --type-h2:         600 22px/1.3  var(--font-sans);
  --type-h3:         600 18px/1.35 var(--font-sans);
  --type-h4:         600 16px/1.4  var(--font-sans);
  --type-display-section: 600 40px/1.1 var(--font-display);
  --type-body-lg:    400 18px/1.55 var(--font-sans);
  --type-body:       400 16px/1.55 var(--font-sans);
  --type-body-sm:    400 14px/1.5  var(--font-sans);
  --type-label:      500 13px/1.4  var(--font-sans);
  --type-caption:    400 12px/1.4  var(--font-sans);
  --type-eyebrow:    600 11px/1.3  var(--font-sans);
  --type-mono:       400 13px/1.45 var(--font-mono);
  --type-mono-sm:    400 12px/1.4  var(--font-mono);

  /* tracking */
  --track-display: -0.02em;
  --track-tight:   -0.01em;
  --track-normal:  0;
  --track-eyebrow: 0.12em;

  /* ---------- Spacing (8px base) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 36px;
  --space-8: 44px;
  --space-9: 52px;
  --space-10: 60px;
  --space-12: 72px;
  --space-14: 84px;
  --space-16: 96px;

  /* ---------- Radii ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ---------- Shadows (warm-tinted) ---------- */
  --shadow-1: 0 1px 2px rgba(155, 67, 95, 0.06);
  --shadow-2: 0 1px 2px rgba(155, 67, 95, 0.05), 0 4px 12px rgba(155, 67, 95, 0.06);
  --shadow-3: 0 2px 4px rgba(155, 67, 95, 0.06), 0 8px 24px rgba(155, 67, 95, 0.09);
  --shadow-4: 0 4px 8px rgba(155, 67, 95, 0.08), 0 16px 40px rgba(155, 67, 95, 0.12);
  --shadow-5: 0 8px 16px rgba(155, 67, 95, 0.10), 0 32px 64px rgba(155, 67, 95, 0.16);
  --shadow-bloom: 0 0 0 2px var(--border-focus), 0 0 0 6px rgba(168, 197, 229, 0.25);  /* focus ring — 2px solid ring (>=3:1 vs every surface) plus outer alpha bloom for aesthetic */
  --shadow-inner: inset 0 1px 2px rgba(51, 43, 50, 0.06);

  /* ---------- Motion ---------- */
  --ease-out-quint: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.6, 1);
  --dur-fast: 80ms;
  --dur-state: 150ms;
  --dur-entry: 240ms;
  --dur-page:  360ms;

  /* ---------- Layout ---------- */
  --max-content: 1200px;
  --max-prose: 720px;
  --nav-height: 64px;
  --sidebar-w: 280px;
  --sidebar-w-collapsed: 64px;

  /* Tells the UA to render scrollbars + form controls in light mode by default. */
  color-scheme: light;
}

/* ==========================================================================
   Dark mode — semantic-token overrides only.
   The raw palette (pink-*, blue-*, slate-*, sage-*, etc.) is unchanged so
   anything that references the palette directly (e.g. the marketing footer's
   `var(--slate-800)` background) keeps the same identity in both themes.
   Two activation paths: explicit `data-theme="dark"`, or the default
   `data-theme="system"` when the OS prefers dark.
   ========================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Note: --petal, --surface, --surface-2 are PALETTE tokens — they stay invariant
     so consumers like .m-footer (which expects cream-on-slate-800 in both themes)
     don't silently flip. Theme flipping happens at the SEMANTIC layer below. */

  --fg-1: #F8EFE8;
  --fg-2: #D8C9BD;
  --fg-3: #B5A498;            /* muted — 7.82:1 vs --bg-page */
  --fg-4: #9C8A7E;            /* placeholder / aux — 5.69:1 vs --bg-page */
  --fg-on-primary: var(--slate-800);
  --fg-on-dark: var(--petal);
  --fg-link: var(--blue-300);
  --fg-link-hover: var(--blue-200);
  --fg-accent: var(--pink-300);

  /* Status foregrounds — bright pastels read on dark page (8–10:1) */
  --fg-success: var(--sage-300);
  --fg-warn:    var(--apricot-300);
  --fg-error:   var(--rose-300);
  --fg-info:    var(--periwinkle-300);

  --bg-page: #14110E;
  --bg-surface: #1E1814;
  --bg-surface-2: #271F1A;
  --bg-primary: var(--pink-300);
  --bg-primary-hover: var(--pink-400);
  --bg-primary-press: var(--pink-500);
  --bg-secondary: var(--blue-300);
  --bg-secondary-hover: var(--blue-400);
  --bg-tint-pink: rgba(244, 184, 201, 0.12);
  --bg-tint-blue: rgba(168, 197, 229, 0.12);

  --bg-prompt: var(--bg-surface-2);
  --fg-prompt: var(--fg-1);
  --bg-card-selected: rgba(244, 184, 201, 0.18);
  --btn-tonal-bg: rgba(168, 197, 229, 0.20);
  --btn-tonal-fg: var(--blue-200);
  --bg-disabled: var(--bg-surface-2);
  --fg-disabled: #9C8A7E;
  --pastel-tone-down: saturate(0.85) brightness(0.92);

  --border-subtle: #3F342B;          /* hairline — 1.85:1 vs dark surface */
  --border-default: #7A6557;         /* card / input / chip edges — 3.10:1 vs dark surface */
  --border-strong: #9C8675;          /* input hover, prominent dividers — 5.12:1 vs dark surface */
  --border-focus: var(--blue-300);

  --bloom-gradient: linear-gradient(135deg, #2A1A20 0%, #1B1A28 60%, #1A2230 100%);
  --bloom-gradient-soft: linear-gradient(135deg, #1F1813 0%, #1B181A 50%, #181E26 100%);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-3: 0 2px 4px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.50);
  --shadow-4: 0 4px 8px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-5: 0 8px 16px rgba(0, 0, 0, 0.50), 0 32px 64px rgba(0, 0, 0, 0.60);
  --shadow-bloom: 0 0 0 2px var(--border-focus), 0 0 0 6px rgba(168, 197, 229, 0.30);
  --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.40);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;

    --fg-1: #F8EFE8;
    --fg-2: #D8C9BD;
    --fg-3: #B5A498;
    --fg-4: #9C8A7E;
    --fg-on-primary: var(--slate-800);
    --fg-on-dark: var(--petal);
    --fg-link: var(--blue-300);
    --fg-link-hover: var(--blue-200);
    --fg-accent: var(--pink-300);

    --fg-success: var(--sage-300);
    --fg-warn:    var(--apricot-300);
    --fg-error:   var(--rose-300);
    --fg-info:    var(--periwinkle-300);

    --bg-page: #14110E;
    --bg-surface: #1E1814;
    --bg-surface-2: #271F1A;
    --bg-primary: var(--pink-300);
    --bg-primary-hover: var(--pink-400);
    --bg-primary-press: var(--pink-500);
    --bg-secondary: var(--blue-300);
    --bg-secondary-hover: var(--blue-400);
    --bg-tint-pink: rgba(244, 184, 201, 0.12);
    --bg-tint-blue: rgba(168, 197, 229, 0.12);

    --bg-prompt: var(--bg-surface-2);
    --fg-prompt: var(--fg-1);
    --bg-card-selected: rgba(244, 184, 201, 0.18);
    --btn-tonal-bg: rgba(168, 197, 229, 0.20);
    --btn-tonal-fg: var(--blue-200);
    --bg-disabled: var(--bg-surface-2);
    --fg-disabled: #9C8A7E;
    --pastel-tone-down: saturate(0.85) brightness(0.92);

    --border-subtle: #3F342B;          /* hairline — 1.85:1 vs dark surface */
    --border-default: #7A6557;         /* card / input / chip edges — 3.10:1 vs dark surface */
    --border-strong: #9C8675;          /* input hover, prominent dividers — 5.12:1 vs dark surface */
    --border-focus: var(--blue-300);

    --bloom-gradient: linear-gradient(135deg, #2A1A20 0%, #1B1A28 60%, #1A2230 100%);
    --bloom-gradient-soft: linear-gradient(135deg, #1F1813 0%, #1B181A 50%, #181E26 100%);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.40);
    --shadow-3: 0 2px 4px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.50);
    --shadow-4: 0 4px 8px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.55);
    --shadow-5: 0 8px 16px rgba(0, 0, 0, 0.50), 0 32px 64px rgba(0, 0, 0, 0.60);
    --shadow-bloom: 0 0 0 2px var(--border-focus), 0 0 0 6px rgba(168, 197, 229, 0.30);
    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.40);
  }
}

/* ==========================================================================
   Semantic element styles — the type system in use
   ========================================================================== */

html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font: var(--type-body);
  letter-spacing: var(--track-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--type-display-md); letter-spacing: var(--track-display); margin: 0; }
h2 { font: var(--type-h1);  letter-spacing: var(--track-tight); margin: 0; }
h3 { font: var(--type-h2);  letter-spacing: var(--track-tight); margin: 0; }
h4 { font: var(--type-h3);  margin: 0; }

.display-xl { font: var(--type-display-xl); letter-spacing: var(--track-display); }
.display-lg { font: var(--type-display-lg); letter-spacing: var(--track-display); }
.display-md { font: var(--type-display-md); letter-spacing: var(--track-display); }

p { font: var(--type-body); color: var(--fg-2); margin: 0; max-width: var(--max-prose); }
.body-lg { font: var(--type-body-lg); color: var(--fg-2); }
.body-sm { font: var(--type-body-sm); color: var(--fg-2); }

.label    { font: var(--type-label); color: var(--fg-1); }
.caption  { font: var(--type-caption); color: var(--fg-3); }
.eyebrow  {
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

code, .mono { font: var(--type-mono); color: var(--fg-1); }

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-state) var(--ease-in-out);
}
a:hover { color: var(--fg-link-hover); }

::selection { background: var(--pink-200); color: var(--slate-800); }

/* ==========================================================================
   Background utilities
   ========================================================================== */

.bg-bloom { background: var(--bloom-gradient); }
.bg-bloom-soft { background: var(--bloom-gradient-soft); }
.bg-floret {
  background-color: var(--bg-page);
  background-image: url('/static/img/floret-tile.svg');
  background-size: 80px 80px;
  background-repeat: repeat;
}
/* The tile bakes light pastels; in dark mode mute it so it doesn't glare on the
   dark page background. Mirrors the two-path pattern used for theme overrides
   above (explicit data-theme="dark" + system preference). */
:root[data-theme="dark"] .bg-floret { filter: brightness(0.4) saturate(0.7); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .bg-floret { filter: brightness(0.4) saturate(0.7); }
}

/* Skip-link — visually hidden until focused, then a high-contrast bar at the
   top-left of the viewport. Required by WCAG 2.4.1 Bypass Blocks. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1000;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  color: var(--fg-1);
  border: 2px solid var(--border-focus);
  border-radius: var(--radius-sm);
  font: var(--type-label);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-state) var(--ease-out-quint);
}
.skip-link:focus {
  transform: translateY(0);
  outline: none;
}