/* ═══════════════════════════════════════════════
   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 {
  /* ─────── ADMIN REDESIGN v3 (May 2026) ────────────────────────
     Calmer, tighter palette + strict 3-size type scale. New ink-*
     surface ramp drives the whole admin panel; legacy aliases below
     re-point old names (--bg / --card / --gold / --text / etc.) at
     these new values so 12k+ lines of existing CSS pick up the new
     look without a per-rule rewrite. */
  /* Surface ramp — was too compressed (page→card delta only ~11 RGB
     points), making panel edges visually muddy. User reported "глазам
     плывёт" when scanning the admin panel because everything sat on
     the same tonal plane. Lifting --ink-2 / --ink-3 / --ink-4 by ~8-10
     points gives the eye clear layering hierarchy without losing the
     warm-amber tint that's the brand's signature. */
  --ink-0:   #0a0806;          /* page background — stays near-black */
  --ink-1:   #14110d;          /* sidebar, topbar, kanban columns */
  --ink-2:   #1e1813;          /* cards default — visibly lifted */
  --ink-3:   #271f17;          /* raised surfaces (modals, drawer) */
  --ink-4:   #322920;          /* hover-raised */

  --line-1:  rgba(245,228,200,0.09);
  --line-2:  rgba(245,228,200,0.14);
  --line-3:  rgba(245,228,200,0.20);

  --text-1:  #f0e3cb;          /* primary text */
  --text-2:  rgba(240,227,203,0.62);  /* secondary text */
  --text-3:  rgba(240,227,203,0.36);  /* tertiary / placeholder */

  --amber:        #c68654;     /* primary accent */
  --amber-2:      #e4a06c;     /* hover */
  --amber-deep:   #a05a2c;     /* pressed */
  --amber-glow:   rgba(198,134,84,0.14);
  --amber-faint:  rgba(198,134,84,0.06);

  /* New tight type scale — admin only.
     Keep the older --fs-* variables below for landing pages. */
  --t-xs: 11px;   /* meta / badges / micro-copy */
  --t-sm: 13px;   /* body default / UI controls */
  --t-md: 15px;   /* service titles / modal labels */
  --t-lg: 22px;   /* modal hero amount */
  --t-xl: 36px;   /* modal hero header (only) */

  /* Geist Mono drives ALL numerics — times, prices, counters. */
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* Tighter motion easing for admin micro-interactions. */
  --ease-luxe: cubic-bezier(.22, .61, .36, 1);

  /* Legacy ramp — kept for landing.css / kiosk.css.
     Surfaces 2/3 lifted in lockstep with --ink-2/--ink-3 above so
     admin pages that still reference these old token names get the
     same layered look. */
  --bg-base:        #0c0905;
  --bg-surface-1:   #140f08;
  --bg-surface-2:   #1e1812;
  --bg-surface-3:   #271f16;

  /* ───────── 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:   'Fraunces', 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 (kiosk + landing keep these defaults) ─── */
  --bg:           var(--bg-base);
  --card:         var(--bg-surface-2);
  --card-hover:   var(--bg-surface-3);
  --border:       rgba(62,44,24,1);    /* warm dark border 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);
}

/* Admin redesign — re-points legacy aliases at the new ink/text/amber
   ramp so existing CSS (12k+ lines) picks up the redesigned look
   without per-rule churn. Scoped to body.admin so kiosk + landing
   pages keep their warmer brown palette unchanged. */
body.admin {
  --bg:           var(--ink-0);
  --card:         var(--ink-2);
  --card-hover:   var(--ink-3);
  --border:       var(--line-1);
  --gold:         var(--amber);
  --gold2:        var(--amber-2);
  --dim:          var(--text-3);
  --text:         var(--text-1);
  --muted:        var(--text-2);
}

/* ───────── REDUCED MOTION ─────────
   Only tame UI state transitions for users with the OS preference.
   Keep brand-essential ambient animations (lava shimmer on logos,
   crack corners) — they are slow (7s cycle) and non-triggering. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    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); } }