/* Design tokens — the single source of truth for colour, type and elevation.
   Every other stylesheet references these; no raw hex values elsewhere. */

:root {
  /* brand palette */
  --ink: #122a4a;
  --royal: #2e5c94;
  --royal-light: #5b9bd5;
  --royal-dark: #0b1b30;
  --gold: #f2a93c;
  --gold-deep: #d98f1f;
  --gold-pale: #fff3dd;
  --cloud: #ffffff;
  --mist: #f4f7fb;
  --line: #dce4ee;
  --error: #c0392b;

  /* channel values, for building rgba() from a token */
  --ink-rgb: 18, 42, 74;
  --royal-rgb: 46, 92, 148;
  --gold-rgb: 242, 169, 60;
  --error-rgb: 192, 57, 43;

  /* error surfaces — for messages that need to read as a problem, not a hint */
  --error-soft: rgba(var(--error-rgb), 0.07);
  --error-border: rgba(var(--error-rgb), 0.32);

  /* ink tints — used constantly for secondary text on light backgrounds */
  --ink-75: rgba(var(--ink-rgb), 0.75);
  --ink-70: rgba(var(--ink-rgb), 0.7);
  --ink-65: rgba(var(--ink-rgb), 0.65);
  --ink-60: rgba(var(--ink-rgb), 0.6);
  --ink-55: rgba(var(--ink-rgb), 0.55);
  --ink-50: rgba(var(--ink-rgb), 0.5);
  --ink-45: rgba(var(--ink-rgb), 0.45);
  --ink-40: rgba(var(--ink-rgb), 0.4);
  --ink-35: rgba(var(--ink-rgb), 0.35);

  /* typography */
  --font-display: "Barlow Condensed", sans-serif;
  --font-ui: "Barlow", sans-serif;
  --font-body: "Inter", sans-serif;

  /* elevation */
  --shadow-sm: 0 8px 18px -8px rgba(var(--ink-rgb), 0.25);
  --shadow-md: 0 12px 32px -12px rgba(var(--ink-rgb), 0.18);
  --shadow-lg: 0 20px 44px -14px rgba(var(--ink-rgb), 0.35);
  --shadow-xl: 0 30px 60px -20px rgba(var(--ink-rgb), 0.5);
  --shadow-card: 0 12px 32px -12px rgba(var(--ink-rgb), 0.12);
  --shadow-card-hover: 0 20px 44px -14px rgba(var(--ink-rgb), 0.24);
  --shadow-lift: 0 24px 48px -16px rgba(var(--ink-rgb), 0.28);

  /* geometry */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* layout */
  --wrap-max: 1180px;
  --header-height: 68px;

  /* motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}