/* ═══════════════════════════════════════════════
   IJEN SPA — Design tokens (single source of truth)
   Consumed by: landing.css, kiosk.css, admin.css, components.css
   ═══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ───────── COLOR: surfaces ───────── */
  --bg-base:        #0c0905;   /* page background */
  --bg-surface-1:   #120e07;   /* first elevation (header blur, sticky bars) */
  --bg-surface-2:   #17120a;   /* cards default */
  --bg-surface-3:   #1e1810;   /* raised / summary / modals */

  /* ───────── COLOR: borders ───────── */
  --border-faint:   rgba(255,255,255,0.08);
  --border-strong:  rgba(255,255,255,0.14);
  --border-warm:    rgba(198,134,84,0.18);

  /* ───────── COLOR: text ───────── */
  --text-primary:   #f5e4c8;
  --text-muted:     rgba(245,228,200,0.72);
  --text-dim:       rgba(245,228,200,0.46);
  --text-inverse:   #0c0905;

  /* ───────── COLOR: accent (ember/amber) ───────── */
  --ember:          #c68654;   /* primary warm accent */
  --ember-bright:   #e4a06c;   /* hover state */
  --ember-deep:     #a84e16;   /* pressed / avoid-zone */
  --ember-copper:   #b9551b;   /* secondary warm, avoid-zone accent */
  --ember-glow:     rgba(198,134,84,0.18);  /* selected-state fill */
  --ember-halo:     rgba(198,134,84,0.28);  /* focus ring / selected halo */
  --ember-faint:    rgba(198,134,84,0.08);  /* subtle background wash */

  /* ───────── COLOR: state ───────── */
  --state-danger:   #c45c5c;
  --state-danger-bg: rgba(196,92,92,0.12);
  --state-success:  #6aaa60;

  /* ───────── TYPOGRAPHY ───────── */
  --font-display:   'Orbitron', sans-serif;    /* headings, brand */
  --font-body:      'Lato', sans-serif;        /* body, buttons, meta */

  /* Type scale (clamp for fluidity) */
  --fs-h1:          clamp(36px, 6vw, 72px);
  --fs-h2:          clamp(26px, 4vw, 44px);
  --fs-h3:          22px;
  --fs-body-lg:     18px;
  --fs-body:        15px;
  --fs-meta:        12px;
  --fs-micro:       11px;

  --lh-tight:       1.1;
  --lh-heading:     1.25;
  --lh-body:        1.65;

  --tracking-wide:  0.14em;     /* uppercase labels */
  --tracking-mid:   0.05em;     /* headings */
  --tracking-normal: 0;

  /* ───────── SPACING SCALE ───────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Section vertical padding */
  --section-py-desktop: 128px;
  --section-py-mobile:  72px;

  /* Container */
  --container-max: 1120px;
  --container-px-desktop: 32px;
  --container-px-mobile:  20px;

  /* ───────── RADII ───────── */
  --r-chip:    999px;
  --r-button:  20px;
  --r-card:    24px;
  --r-panel:   28px;
  --r-tight:   4px;

  /* ───────── SHADOWS / ELEVATION ───────── */
  --shadow-card:     0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 28px rgba(0,0,0,0.35);
  --shadow-hover:    0 14px 36px rgba(0,0,0,0.45);
  --shadow-glow:     0 0 0 1px var(--ember), 0 0 24px var(--ember-halo);
  --shadow-ring:     0 0 0 3px var(--ember-halo);

  /* ───────── MOTION ───────── */
  --ease-out:        cubic-bezier(.22,.61,.36,1);
  --t-fast:          140ms var(--ease-out);
  --t-base:          180ms var(--ease-out);
  --t-panel:         240ms var(--ease-out);

  /* ───────── LEGACY ALIASES (back-compat for existing CSS) ───────── */
  --bg:           var(--bg-base);
  --card:         var(--bg-surface-2);
  --card-hover:   var(--bg-surface-3);
  --border:       rgba(62,44,24,1);    /* warm dark border retained for kiosk look */
  --gold:         var(--ember);
  --gold2:        var(--ember-bright);
  --dim:          #6e4524;
  --text:         var(--text-primary);
  --muted:        var(--text-muted);
  --white:        var(--text-primary);
  --green:        var(--state-success);
  --red:          var(--state-danger);
  --danger:       #8b3a3a;
  --danger-light: var(--state-danger);
  --success:      #3a7a4a;
  --success-light: var(--state-success);
}

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

/* ───────── KEYFRAMES ───────── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes rise   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }