/* ============================================================
   Sanro IT — Design Tokens
   Single source of truth for color, type, spacing, motion.
   ============================================================ */

:root {
  /* ----- Base surfaces ----- */
  --bg:        #FAFAF7;
  --surface-1: #FFFFFF;

  /* ----- Tinted surfaces (bento cells, section bands) ----- */
  --lavender: #F1F4FF;
  --peach:    #FFF4EC;
  --mint:     #EEF8F2;
  --cream:    #FFF8E1;

  --lavender-strong: #E4E9FF;
  --peach-strong:    #FFE5D3;
  --mint-strong:     #DBF1E4;
  --cream-strong:    #FFEFC2;

  /* ----- Ink ----- */
  --ink:        #0A0A12;
  --ink-muted:  #4B5563;
  --ink-faint:  #9CA3AF;
  --ink-hair:   #E5E7EB;

  /* ----- Accents ----- */
  --accent:        #4F46E5;
  --accent-hover:  #4338CA;
  --accent-soft:   #EEF0FF;
  --accent-coral:  #FF6B4A;

  /* ----- Type families ----- */
  --font-display: 'Inter Tight', 'Satoshi', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ----- Fluid type scale (clamp: min, preferred, max) ----- */
  --fs-12:  12px;
  --fs-14:  14px;
  --fs-16:  16px;
  --fs-18:  18px;
  --fs-20:  20px;
  --fs-22:  clamp(18px, 1.4vw + 0.8rem, 22px);
  --fs-28:  clamp(22px, 1.8vw + 1rem, 28px);
  --fs-36:  clamp(28px, 2.4vw + 1rem, 36px);
  --fs-48:  clamp(34px, 3.2vw + 1rem, 48px);
  --fs-56:  clamp(38px, 3.6vw + 1rem, 56px);
  --fs-72:  clamp(44px, 5vw + 1rem, 72px);
  --fs-88:  clamp(48px, 6.2vw + 1rem, 88px);
  --fs-96:  clamp(52px, 7vw + 1rem, 96px);
  --fs-120: clamp(56px, 8.8vw + 1rem, 120px);

  /* ----- Line heights ----- */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* ----- Letter spacing ----- */
  --ls-tight:  -0.03em;
  --ls-tighter:-0.04em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.12em;

  /* ----- Spacing scale (8pt grid) ----- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  /* ----- Radius ----- */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl:40px;
  --radius-pill: 999px;

  /* ----- Shadows (subtle, light-theme appropriate) ----- */
  --shadow-1: 0 1px 2px rgba(10, 10, 18, 0.04), 0 1px 1px rgba(10, 10, 18, 0.02);
  --shadow-2: 0 4px 12px rgba(10, 10, 18, 0.05), 0 2px 4px rgba(10, 10, 18, 0.03);
  --shadow-3: 0 12px 32px rgba(10, 10, 18, 0.08), 0 4px 8px rgba(10, 10, 18, 0.04);
  --shadow-4: 0 24px 56px rgba(10, 10, 18, 0.10), 0 8px 16px rgba(10, 10, 18, 0.05);
  --shadow-glow: 0 0 0 4px rgba(79, 70, 229, 0.12);

  /* ----- Transitions ----- */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:         150ms;
  --t-base:         250ms;
  --t-slow:         400ms;
  --t-cinematic:    800ms;

  /* ----- Layout ----- */
  --container-max: 1280px;
  --container-pad: clamp(16px, 4vw, 48px);
  --nav-height:    72px;

  /* ----- Z-index scale ----- */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-nav:     200;
  --z-modal:   300;
  --z-toast:   400;
}

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast:      0ms;
    --t-base:      0ms;
    --t-slow:      0ms;
    --t-cinematic: 0ms;
  }
}