/* =====================================================================
   DESIGN TOKENS · ATM Ticket aesthetic
   ===================================================================== */

:root {
  /* ---------- COLOR ---------- */
  --color-paper:        #F5F1E8;
  --color-paper-warm:   #EFE9DA;
  --color-paper-edge:   #E5DFCE;

  --color-ink:          #0A0A0A;
  --color-ink-soft:     #1A1A1A;
  --color-ink-mid:      #2C2C2C;

  --color-stage:        #060606;
  --color-stage-2:      #0E0E0E;

  --color-accent:       #E94E1B;
  --color-accent-soft:  #F26A3A;
  --color-accent-deep:  #C03E11;

  --color-gray-100:     #D9D5C9;
  --color-gray-200:     #B5B0A4;
  --color-gray-300:     #8A8579;
  --color-gray-400:     #5C584F;
  --color-gray-500:     #3A372F;
  --color-gray-600:     #28261F;
  --color-gray-700:     #1A1814;

  --color-line:         rgba(10, 10, 10, 0.16);
  --color-line-strong:  rgba(10, 10, 10, 0.32);
  --color-line-dark:    rgba(245, 241, 232, 0.12);

  --color-ok:           #2EA85B;

  /* ---------- TYPE ---------- */
  --font-display: "Archivo Black", "Inter", system-ui, sans-serif;
  --font-body:    "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-xxs:  clamp(0.625rem, 0.6rem + 0.1vw, 0.7rem);
  --text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm:   clamp(0.875rem, 0.84rem + 0.2vw, 0.95rem);
  --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --text-md:   clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
  --text-lg:   clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --text-xl:   clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --text-2xl:  clamp(3rem, 2.2rem + 3vw, 5rem);
  --text-3xl:  clamp(4rem, 2.4rem + 6vw, 8.5rem);
  --text-4xl:  clamp(5rem, 2.4rem + 10vw, 12rem);

  /* ---------- SPACING ---------- */
  --gutter:     clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.5rem;
  --space-6:    2rem;
  --space-7:    3rem;
  --space-8:    4rem;
  --space-9:    6rem;
  --space-10:   9rem;

  --section-gap: clamp(5rem, 3rem + 6vw, 10rem);

  /* ---------- RADII ---------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-card:
    0 1px 0 rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.08),
    0 32px 64px rgba(0,0,0,0.18);
  --shadow-paper:
    0 1px 0 rgba(0,0,0,0.06),
    0 12px 32px rgba(0,0,0,0.22),
    0 48px 96px rgba(0,0,0,0.35);
  --shadow-float:
    0 4px 12px rgba(0,0,0,0.18),
    0 28px 60px rgba(0,0,0,0.28),
    0 72px 120px rgba(0,0,0,0.45);

  /* ---------- MOTION ---------- */
  --dur-fast:    150ms;
  --dur-mid:     320ms;
  --dur-slow:    640ms;
  --dur-xslow:   1200ms;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.5, 1.6, 0.4, 1);

  /* ---------- LAYOUT ---------- */
  --max-w:        1440px;
  --max-w-narrow: 1080px;
  --nav-h:        72px;
}