/* ============================================================================
   GoldKiosk — Design Tokens
   Luxury fintech aesthetic. Single source of truth for the design system.
   ============================================================================ */

:root {
  /* ── Canvas & ink (LIGHT — default) ──────────────────────────────────── */
  --canvas:           #ffffff;
  --canvas-elevated:  #fbfaf6;   /* very soft warm white — KPI cards */
  --canvas-sunken:    #f4f2eb;   /* subtle warm — sidebar bg */
  --canvas-inverse:   #0a0a0a;

  --ink:              #0a0a0a;   /* primary text */
  --ink-soft:         #3a3835;   /* secondary text */
  --ink-faint:        #807d75;   /* tertiary, captions */
  --ink-ghost:        #b5b1a6;   /* placeholders */

  --line:             #ebe8df;   /* hairline borders */
  --line-strong:      #d6d1c2;   /* stronger dividers */

  /* ── Champagne gold — the accent that earns the brand ───────────────── */
  --accent:           #b8941f;   /* primary */
  --accent-hover:     #9a7917;
  --accent-pressed:   #7e6213;
  --accent-soft:      #f4ead0;   /* tinted backgrounds, badges */
  --accent-ring:      rgba(184, 148, 31, 0.22);

  /* ── Semantic ───────────────────────────────────────────────────────── */
  --success:          #2a7d4f;
  --success-soft:     #e2efe5;
  --danger:           #a83232;
  --danger-soft:      #f6e2e2;
  --warning:          #c47419;
  --warning-soft:     #faead7;
  --info:             #2a5d8c;
  --info-soft:        #e2ecf3;

  /* ── Surfaces, shadows, radii ───────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(20, 18, 12, 0.04);
  --shadow-sm:  0 2px 6px rgba(20, 18, 12, 0.05), 0 1px 2px rgba(20, 18, 12, 0.04);
  --shadow-md:  0 8px 24px rgba(20, 18, 12, 0.07), 0 2px 6px rgba(20, 18, 12, 0.04);
  --shadow-lg:  0 24px 60px rgba(20, 18, 12, 0.12), 0 8px 24px rgba(20, 18, 12, 0.06);
  --shadow-gold: 0 12px 32px rgba(184, 148, 31, 0.18);

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* ── Typography ─────────────────────────────────────────────────────── */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.14em;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --header-h: 64px;
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 64px;
  --content-max: 1480px;

  /* ── Brand wordmark spacing ─────────────────────────────────────────── */
  --brand-mark-sz: 28px;
  --brand-mark-sz-lg: 44px;

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-instant: 80ms;
  --dur-fast:    180ms;
  --dur-med:     320ms;
  --dur-slow:    560ms;

  /* ── Grain texture (used by dark theme primarily) ───────────────────── */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ── DARK theme overrides ──────────────────────────────────────────────── */
[data-theme="dark"] {
  --canvas:           #0a0a0a;
  --canvas-elevated:  #141312;
  --canvas-sunken:    #050505;
  --canvas-inverse:   #ffffff;

  --ink:              #f1ede2;
  --ink-soft:         #b4afa0;
  --ink-faint:        #75716a;
  --ink-ghost:        #4a4845;

  --line:             #1c1a16;
  --line-strong:      #2a2620;

  --accent:           #d4af37;
  --accent-hover:     #e8c554;
  --accent-pressed:   #b8941f;
  --accent-soft:      rgba(212, 175, 55, 0.10);
  --accent-ring:      rgba(212, 175, 55, 0.32);

  --success:          #4ade80;
  --success-soft:     rgba(74, 222, 128, 0.10);
  --danger:           #f87171;
  --danger-soft:      rgba(248, 113, 113, 0.10);
  --warning:          #fbbf24;
  --warning-soft:     rgba(251, 191, 36, 0.10);
  --info:             #60a5fa;
  --info-soft:        rgba(96, 165, 250, 0.10);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.50);
  --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.60), 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 24px 60px rgba(0, 0, 0, 0.70), 0 8px 24px rgba(0, 0, 0, 0.50);
  --shadow-gold: 0 12px 36px rgba(212, 175, 55, 0.22);
}