/*
 * Design tokens for the Jinja surfaces (marketing, docs, legacy app pages).
 *
 * Frost editorial, the same contract as the React app (frontend/src/styles.css)
 * and docs/FRONTEND_DESIGN_PROMPT.md: cool frost neutrals, slate ink, one
 * steel-blue accent for everything interactive, hairlines instead of shadows,
 * Newsreader for titles over Instrument Sans for everything else.
 *
 * Dark mode is a single `data-theme` attribute on <html>, set by
 * static/js/theme.js BEFORE paint (no FOUC).
 */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,500;6..72,600&family=Instrument+Sans:wght@400;500;600;700&display=swap');

/* -----------------------------------------------------------------------
 * Tokens: light theme (default)
 * --------------------------------------------------------------------- */
:root {
  --font-sans:  'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:  ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Scale */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  44px;
  --text-5xl:  58px;

  /* Surfaces, hairlines, text */
  --surface-0:        #ffffff;
  --surface-1:        #f8fbfd;
  --surface-2:        #f3f7fa;
  --surface-inverse:  #14202b;

  --hairline:          rgba(20, 32, 43, 0.10);
  --hairline-strong:   rgba(20, 32, 43, 0.18);

  --text-0:   #14202b;   /* primary */
  --text-1:   #3d4b57;   /* secondary */
  --text-2:   #5b6b78;   /* tertiary / labels */
  --text-3:   #8a97a3;   /* placeholder / disabled */

  --accent:        #14202b;
  --accent-hover:  #14506f;
  --accent-fg:     #ffffff;

  /* Status: dots and chips only, never page colour */
  --success: #2f7d5b;
  --warning: #8a5a12;
  --danger:  #b42318;

  /* Brand: steel blue. Links, active states, focus rings, the CTA. */
  --brand:        #1f6f9c;
  --brand-dark:   #14506f;
  --brand-light:  #5fa8d3;
  --brand-subtle: rgba(31, 111, 156, 0.10);
  --ember:        #b4530a;   /* money only */

  /* Kept for older components that set background-image: flat, no washes. */
  --gradient-brand: linear-gradient(#1f6f9c, #1f6f9c);
  --gradient-hero:  linear-gradient(#f3f7fa, #f3f7fa);
  --gradient-card:  linear-gradient(#f8fbfd, #f8fbfd);

  /* Radius */
  --radius-sm: 8px;
  --radius:    10px;
  --radius-lg: 14px;

  /* 4px spacing grid */
  --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;  --space-16: 64px;  --space-20: 80px;  --space-24: 96px;

  /* Shadows: floating surfaces only */
  --shadow-1:        0 1px 2px rgba(20, 32, 43, 0.05);
  --shadow-overlay:  0 24px 48px -16px rgba(20, 32, 43, 0.28);

  /* Motion */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  120ms;
  --dur:       180ms;
  --dur-slow:  320ms;

  /* Layout */
  --rail-w:        220px;
  --rail-w-mini:   60px;
  --topbar-h:      64px;
  --content-max:   1200px;

  color-scheme: light;
}

/* -----------------------------------------------------------------------
 * Tokens: dark theme
 * --------------------------------------------------------------------- */
[data-theme="dark"] {
  --surface-0:        #0f1720;
  --surface-1:        #16222e;
  --surface-2:        #1a2733;
  --surface-inverse:  #e9eef3;

  --hairline:          rgba(233, 238, 243, 0.10);
  --hairline-strong:   rgba(233, 238, 243, 0.18);

  --text-0:   #e9eef3;
  --text-1:   #c3cdd6;
  --text-2:   #93a2af;
  --text-3:   #6b7a87;

  --accent:        #e9eef3;
  --accent-hover:  #8cc3e4;
  --accent-fg:     #0f1720;

  --success: #5cc08e;
  --warning: #e0a84a;
  --danger:  #f0776c;

  --brand:        #5fa8d3;
  --brand-dark:   #8cc3e4;
  --brand-light:  #79b8dd;
  --brand-subtle: rgba(95, 168, 211, 0.16);
  --ember:        #e8853a;
  --gradient-brand: linear-gradient(#5fa8d3, #5fa8d3);
  --gradient-hero:  linear-gradient(#16222e, #16222e);
  --gradient-card:  linear-gradient(#1a2733, #1a2733);

  --shadow-1:        0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-overlay:  0 28px 56px -16px rgba(0, 0, 0, 0.7);

  color-scheme: dark;
}

/* -----------------------------------------------------------------------
 * Resets + base
 * --------------------------------------------------------------------- */
* { box-sizing: border-box; }
*::selection { background: var(--brand); color: #ffffff; }

html {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--surface-0);
  color: var(--text-0);
  font-size: var(--text-base);
  line-height: 1.5;
  letter-spacing: 0;
  scroll-behavior: smooth;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface-0);
}

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--brand-dark); }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }

/* Tabular numerals wherever numbers line up */
.tnum, table, .stat-value, .price { font-variant-numeric: tabular-nums; }

/* Hairline utilities */
.hairline    { border: 1px solid var(--hairline); }
.hairline-b  { border-bottom: 1px solid var(--hairline); }
.hairline-t  { border-top: 1px solid var(--hairline); }
.hairline-r  { border-right: 1px solid var(--hairline); }
.hairline-l  { border-left: 1px solid var(--hairline); }

/* Eyebrow: a small sentence-case label above a section or a number */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}

/* Type helpers. Titles from 3xl up take the serif. */
.t-xs   { font-size: var(--text-xs);   line-height: 1.45; }
.t-sm   { font-size: var(--text-sm);   line-height: 1.5;  }
.t-base { font-size: var(--text-base); line-height: 1.55; }
.t-lg   { font-size: var(--text-lg);   line-height: 1.5;  }
.t-xl   { font-size: var(--text-xl);   line-height: 1.35; font-weight: 600; }
.t-2xl  { font-size: var(--text-2xl);  line-height: 1.3;  font-weight: 600; }
.t-3xl  { font-size: var(--text-3xl);  line-height: 1.2;  font-weight: 600; font-family: var(--font-serif); }
.t-4xl  { font-size: var(--text-4xl);  line-height: 1.1;  font-weight: 600; font-family: var(--font-serif); }
.t-5xl  { font-size: var(--text-5xl);  line-height: 1.05; font-weight: 600; font-family: var(--font-serif); }

.text-0 { color: var(--text-0); }
.text-1 { color: var(--text-1); }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }