/* ==========================================================================
   Design tokens — The Passport Project
   Palette is pulled straight from the logo artwork: passport-cover navy,
   iridescent teal/violet lettering, gold foil trail, pastel guilloche
   (pink / sky / mint) on cream security paper, and immigration-stamp red.
   ========================================================================== */

:root {
  /* Navy — Indian passport cover */
  --navy-950: #0b1430;
  --navy-900: #0f1a3a;
  --navy-800: #14224a;
  --navy-700: #1f3270;
  --navy-600: #2d4590;

  /* Iridescent lettering accents */
  --teal-600: #1d7482;
  --teal-400: #4fb0b6;
  --violet-500: #6a5aa8;

  /* Gold foil */
  --gold-600: #a8842f;
  --gold-500: #c9a352;
  --gold-300: #e6cf8f;

  /* Security paper + guilloche */
  --paper: #f8f4ec;
  --paper-2: #f1eadc;
  --paper-3: #e8dfcd;
  --guilloche-pink: #e9a6bd;
  --guilloche-sky: #9cc3e6;
  --guilloche-mint: #a8d8d0;
  --guilloche-lilac: #c9b6e4;

  /* Ink */
  --ink: #18203f;
  --ink-soft: #3a4366;
  --muted: #646b86;
  --line: rgba(20, 34, 74, 0.14);

  /* Immigration stamp */
  --stamp-red: #b4323f;
  --stamp-blue: #3b4f9a;

  /* Type */
  /* One typeface everywhere: the OCR-style monospace of a passport's
     machine-readable zone. Display/body stay as separate tokens so a
     heading face can be reintroduced later without touching components. */
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-display: var(--font-mono);
  --font-body: var(--font-mono);
  --font-hindi: "Noto Sans Devanagari", "Kohinoor Devanagari", sans-serif;

  /* Spacing / shape */
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1200px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  --header-h: 84px;

  --shadow-sm: 0 1px 2px rgba(15, 26, 58, 0.06), 0 2px 8px rgba(15, 26, 58, 0.06);
  --shadow: 0 2px 6px rgba(15, 26, 58, 0.06), 0 18px 48px -12px rgba(15, 26, 58, 0.22);
  --shadow-lg: 0 4px 10px rgba(15, 26, 58, 0.08), 0 40px 80px -24px rgba(15, 26, 58, 0.35);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1024px) {
  :root {
    --header-h: 68px;
  }
}