/* ============================================================
   PASSPORT GATEWAY — Design Tokens
   Single source of truth for all brand values.
   See docs/style-guide.md §2 for usage rules.
   ============================================================ */
:root {
  /* Brand colors (locked, see docs/style-guide.md §2) */
  --color-navy:       #1B2A5B;
  --color-navy-deep:  #0A0F22;
  --color-gold:       #C9A24A;
  --color-gold-soft:  #E5C97A;
  --color-cream:      #F7F4EC;
  --color-white:      #FFFFFF;
  --color-text-on-dark: #F7F4EC;
  --color-text-muted: #5B6480;

  /* Semantic surface tokens — use these for any layered UI (cards, modals) */
  --color-surface:     #131D3B;              /* Elevated surface on navy-deep — modals, cards */
  --color-surface-input: rgba(247, 244, 236, 0.04); /* Input field background on dark surface */
  --color-border-gold: rgba(201, 162, 74, 0.15);    /* Subtle gold outline — borders, dividers */
  --color-border-gold-focus: var(--color-gold);     /* Gold border on focus */
  --color-text-dim:    rgba(247, 244, 236, 0.5);    /* Secondary/dimmed text on dark */
  --color-gold-tint:   rgba(201, 162, 74, 0.03);    /* Very subtle gold wash — section backgrounds */
  --color-error:       #e57373;                     /* Inline validation error */

  /* Fluid type scale (clamp scales mobile → desktop without media queries) */
  --text-xs:   clamp(0.7rem,  0.65rem + 0.2vw, 0.78rem);
  --text-sm:   clamp(0.85rem, 0.8rem  + 0.2vw, 0.9rem);
  --text-base: clamp(0.95rem, 0.9rem  + 0.3vw, 1.05rem);
  --text-lg:   clamp(1.1rem,  1rem    + 0.5vw, 1.25rem);
  --text-xl:   clamp(1.35rem, 1.2rem  + 0.8vw, 1.5rem);
  --text-2xl:  clamp(1.6rem,  1.4rem  + 1.2vw, 2rem);
  --text-3xl:  clamp(2rem,    1.6rem  + 2vw,   2.75rem);
  --text-4xl:  clamp(2.4rem,  1.8rem  + 3vw,   4rem);

  /* Spacing scale (4px / 8px system) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  /* Layout */
  --max-width: 1180px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm:   0 2px 6px rgba(10, 15, 34, 0.08);
  --shadow-md:   0 10px 30px rgba(10, 15, 34, 0.12);
  --shadow-gold: 0 6px 20px rgba(201, 162, 74, 0.35);

  /* Fonts */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}