/* =========================================================================
   TocynID — Design Tokens
   Part of the Tocyn family (matches TocynTicket v5 + SE Digital v5)
   Warm cream palette, Fraunces display + Manrope body
   ========================================================================= */

:root {
  /* ---------- Colour: foundations ---------- */
  --paper:        #FAF6EE;   /* off-white — default page background */
  --cream:        #F4E9D6;   /* warm cream — panels, hero backgrounds */
  --cream-soft:   #EFE3CC;   /* slightly deeper for contrast cards */
  --linen:        #E8DBC0;   /* deeper cream for footers / dividers */
  --ink:          #0E1A15;   /* near-black body text */
  --ink-soft:     #3D4B43;   /* secondary text */
  --ink-mute:     #6B7A70;   /* muted / captions */
  --line:         #D9CFBC;   /* default hairlines */
  --line-soft:    #E4DAC4;   /* subtler hairlines on cream backgrounds */

  /* ---------- Colour: brand ---------- */
  --tocyn-green:   #00AB39;  /* "Tocyn" always green */
  --tocyn-green-d: #008A2E;  /* pressed / hover */
  --tocyn-green-l: #E4F7E8;  /* tint for backgrounds / badges */
  --id-red:        #E63946;  /* "ID" always red */
  --id-red-d:      #C1293A;  /* pressed */
  --id-red-l:      #FCE7E8;  /* tint */
  --gold:          #B08D3A;  /* accent — serif flourishes, corner marks */
  --gold-soft:     #D4B56A;

  /* ---------- Colour: semantic ---------- */
  --success:       #00AB39;
  --warn:          #D97706;
  --danger:        #E63946;

  /* ---------- Typography ---------- */
  --font-display:  'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:     'Manrope', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:     'IBM Plex Mono', 'Courier New', monospace;

  /* Type scale — modular, 1.25 ratio from 16px */
  --fs-xs:     0.75rem;    /* 12px */
  --fs-sm:     0.875rem;   /* 14px */
  --fs-base:   1rem;       /* 16px */
  --fs-md:     1.125rem;   /* 18px */
  --fs-lg:     1.375rem;   /* 22px */
  --fs-xl:     1.75rem;    /* 28px */
  --fs-2xl:    2.25rem;    /* 36px */
  --fs-3xl:    3rem;       /* 48px */
  --fs-4xl:    3.75rem;    /* 60px */
  --fs-5xl:    4.75rem;    /* 76px */

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-body:   1.6;
  --lh-loose:  1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;

  /* ---------- Spacing ---------- */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.5rem;
  --sp-6:   2rem;
  --sp-7:   2.5rem;
  --sp-8:   3rem;
  --sp-10:  4rem;
  --sp-12:  5rem;
  --sp-16:  7rem;
  --sp-20:  9rem;

  /* ---------- Layout ---------- */
  --container: 1180px;
  --container-narrow: 880px;
  --container-reading: 680px;
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-xs: 0 1px 0 rgba(14, 26, 21, 0.04);
  --shadow-sm: 0 2px 8px rgba(14, 26, 21, 0.05);
  --shadow-md: 0 8px 28px rgba(14, 26, 21, 0.08);
  --shadow-lg: 0 24px 60px rgba(14, 26, 21, 0.12);
  --shadow-gold: 0 8px 32px rgba(176, 141, 58, 0.18);
  --shadow-green: 0 8px 32px rgba(0, 171, 57, 0.18);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.15s;
  --t-med:  0.3s;
  --t-slow: 0.6s;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}