/* ChekLearn design tokens — 2026-06-12 UI revamp (spec §3). Loaded by landing, auth, app, admin. */
:root {
  --navy-950:#122843; --navy-900:#16304F; --navy-700:#1E4470;
  --steel-600:#2E5E94; --steel-500:#3D6EA5;
  --sky-400:#6FA8D8; --sky-300:#8FBEE3;
  --ice-50:#F3F8FC; --ice-100:#E4EEF7;
  --ink-600:#43597A; --ink-400:#7B8DA8;
  --line:#E7EDF4; --bg:#FAFCFE;
  --ok:#2F855A; --ok-bg:#EAF5EF;
  --warn:#B7791F; --warn-bg:#FBF3E4;
  --bad:#B3503E; --bad-bg:#FBEFEC;
  --accent-grad:linear-gradient(112deg,var(--navy-950),var(--navy-700) 52%,var(--steel-500));
  --font-display:'Fraunces',Georgia,serif;
  --font-ui:'Inter',system-ui,-apple-system,sans-serif;
  --shadow-card:0 1px 2px rgba(22,48,79,.04);
  --shadow-pop:0 18px 50px rgba(22,48,79,.14);
  --shadow-btn:0 4px 14px rgba(30,68,112,.28);
  --radius-card:14px; --radius-btn:11px;
}
.cl-h, .cl-h1, .cl-h2 { font-family:var(--font-display); font-weight:600; color:var(--navy-900); letter-spacing:-0.01em; }
.cl-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow-card); }
.cl-btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--navy-700); color:#fff; font-family:var(--font-ui); font-size:13.5px; font-weight:700;
  padding:11px 22px; border:0; border-radius:var(--radius-btn); box-shadow:var(--shadow-btn); cursor:pointer; text-decoration:none; }
.cl-btn-primary:hover { background:var(--navy-900); color:#fff; }
.cl-btn-outline { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#fff; color:var(--navy-700); font-family:var(--font-ui); font-size:13px; font-weight:650;
  padding:10px 20px; border:1.5px solid var(--ice-100); border-radius:var(--radius-btn); cursor:pointer; text-decoration:none; }
.cl-input { width:100%; border:1.5px solid var(--ice-100); border-radius:var(--radius-btn);
  padding:12px 15px; font-family:var(--font-ui); font-size:13.5px; color:var(--navy-900); background:#fff; }
.cl-input:focus { outline:none; border-color:var(--steel-500); box-shadow:0 0 0 3.5px rgba(61,110,165,.14); }
.cl-label { display:block; font-size:12px; font-weight:650; color:var(--ink-600); margin-bottom:7px; font-family:var(--font-ui); }
.cl-pill { display:inline-flex; font-size:10.5px; font-weight:650; color:var(--steel-600);
  background:var(--ice-50); border:1px solid var(--ice-100); border-radius:99px; padding:4px 11px; }
.cl-link { color:var(--steel-600); font-weight:650; text-decoration:none; }
.cl-num { font-variant-numeric:tabular-nums; }

/* ── LEGACY COMPATIBILITY (2026-06-12 UI revamp Task 1 fix) ─────────────
   Old-palette variable names mapped to the NEW brand palette so nothing
   renders unstyled and indigo stays retired. RETAINED PERMANENTLY: live
   consumers remain (templates/legal/_layout.html, static/js/cookie_banner.js,
   index_dev.html var fallbacks). Do NOT delete without re-auditing usage. */
:root {
  /* Brand – old indigo colours mapped to steel/navy by role */
  --brand-primary: var(--steel-500);         /* buttons/links accent; steel reads on white */
  --brand-primary-hover: var(--steel-600);   /* darker hover state */
  --brand-primary-deep: var(--navy-700);     /* text on light bg; navy-700 for heading weight */
  --brand-primary-bg: var(--ice-50);         /* subtle accent surface; ice-50 ≈ old indigo-50 */

  /* Ink scale – 0 = darkest, 3 = lightest */
  --ink-0: var(--navy-950);   /* primary text */
  --ink-1: var(--navy-900);   /* secondary headings */
  --ink-2: var(--ink-600);    /* body emphasis */
  --ink-3: var(--ink-400);    /* muted text */

  /* Semantic text helpers */
  --text-muted: var(--ink-600);    /* body copy on white — 7.12:1, AA (Phase 6.A contrast fix preserved) */
  --text-subtle: var(--ink-400);   /* placeholders, disabled — decorative only */

  /* Surfaces – lightest to darkest fill */
  --surface-0: #fff;            /* page background */
  --surface-1: var(--bg);       /* cards, alt rows */
  --surface-2: var(--ice-50);   /* hover states, tinted surface */
  --surface-3: var(--ice-100);  /* default borders / emphasis */

  /* Semantic – success */
  --success: var(--ok);
  --success-bg: var(--ok-bg);
  --success-text: var(--ok);

  /* Semantic – danger */
  --danger: var(--bad);
  --danger-bg: var(--bad-bg);
  --danger-text: var(--bad);

  /* Semantic – warning */
  --warning: var(--warn);
  --warning-bg: var(--warn-bg);
  --warning-text: var(--warn);

  /* Elevation – sm/md → card-level; lg/xl → pop-level */
  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-card);
  --shadow-lg: var(--shadow-pop);
  --shadow-xl: var(--shadow-pop);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: var(--radius-btn);    /* 11px */
  --radius-lg: var(--radius-card);   /* 14px */
  --radius-pill: 99px;

  /* Spacing – palette-neutral; restored verbatim from old tokens */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
}