/*
 * HADEF design tokens — the single source of truth for color, type, spacing,
 * motion, and radius across marketing, customer /app, Mode B host-side pages,
 * auth, and admin. Import this FIRST on every page. Every component-level CSS
 * reads from these variables, never hard-codes.
 */
:root {
  /* Core palette */
  --hadef-cream:        #F8F5F0;
  --hadef-cream-alt:    #F4F2ED;
  --hadef-ink:          #1C1917;
  --hadef-ink-soft:     #292524;
  --hadef-muted:        #67615A;
  --hadef-label:        #A8A29E;
  --hadef-line:         #E7E0D3;
  --hadef-line-strong:  #D6D3D1;
  --hadef-surface:      #FFFFFF;

  /* Brand accent */
  --hadef-accent:       #E8621A;
  --hadef-accent-dark:  #C2410C;
  --hadef-accent-soft:  #FFF1E8;
  --hadef-accent-glow:  rgba(232, 98, 26, 0.32);
  --hadef-on-accent:    #FFFFFF;
  --hadef-skeleton-1:   #F4F2ED;
  --hadef-skeleton-2:   #E7E0D3;

  /* Semantic colors */
  --hadef-green:        #16A34A;
  --hadef-green-soft:   #DCFCE7;
  --hadef-blue:         #2563EB;
  --hadef-blue-soft:    #EFF6FF;
  --hadef-amber:        #D97706;
  --hadef-amber-soft:   #FEF3C7;
  --hadef-red:          #DC2626;
  --hadef-red-soft:     #FEE2E2;
  --hadef-purple:       #7C3AED;
  --hadef-purple-soft:  #EDE9FE;

  /* Typography scale */
  --hadef-font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --hadef-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --hadef-text-xs:      11px;
  --hadef-text-sm:      12.5px;
  --hadef-text-base:    14px;
  --hadef-text-md:      16px;
  --hadef-text-lg:      20px;
  --hadef-text-xl:      24px;
  --hadef-text-2xl:     34px;
  --hadef-text-3xl:     44px;
  --hadef-weight-regular: 400;
  --hadef-weight-medium:  500;
  --hadef-weight-semi:    600;
  --hadef-weight-bold:    700;
  --hadef-weight-black:   800;

  /* Spacing scale */
  --hadef-space-1: 4px;
  --hadef-space-2: 8px;
  --hadef-space-3: 12px;
  --hadef-space-4: 16px;
  --hadef-space-5: 22px;
  --hadef-space-6: 28px;
  --hadef-space-7: 36px;
  --hadef-space-8: 48px;
  --hadef-space-9: 64px;

  /* Radius */
  --hadef-radius-xs:  6px;
  --hadef-radius-sm:  8px;
  --hadef-radius:    10px;
  --hadef-radius-md: 14px;
  --hadef-radius-lg: 18px;
  --hadef-radius-xl: 22px;
  --hadef-radius-pill: 999px;

  /* Shadow */
  --hadef-shadow-xs: 0 1px 2px rgba(28,25,23,0.04);
  --hadef-shadow:    0 1px 2px rgba(28,25,23,0.04), 0 8px 24px rgba(28,25,23,0.06);
  --hadef-shadow-md: 0 8px 22px rgba(28,25,23,0.08);
  --hadef-shadow-lg: 0 20px 60px rgba(28,25,23,0.14);
  --hadef-shadow-accent: 0 4px 12px var(--hadef-accent-glow);

  /* Motion */
  --hadef-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hadef-ease-std: ease;
  --hadef-dur-fast: 160ms;
  --hadef-dur-std:  220ms;
  --hadef-dur-slow: 320ms;
}

/* Back-compat: older inline component CSS uses unprefixed names. Alias. */
:root {
  --cream: var(--hadef-cream);
  --ink: var(--hadef-ink);
  --muted: var(--hadef-muted);
  --line: var(--hadef-line);
  --accent: var(--hadef-accent);
  --accent-dark: var(--hadef-accent-dark);
  --accent-soft: var(--hadef-accent-soft);
  --accent-glow: var(--hadef-accent-glow);
  --surface: var(--hadef-surface);
  --shadow: var(--hadef-shadow);
  --green: var(--hadef-green);
  --green-soft: var(--hadef-green-soft);
  --blue: var(--hadef-blue);
  --blue-soft: var(--hadef-blue-soft);
  --amber: var(--hadef-amber);
  --label: var(--hadef-label);

  /* ---- Typography scale (8-step) ---- */
  --text-xs: 11.5px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;

  /* ---- Line height scale ---- */
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --track-eyebrow: 0.08em;
  --track-loose: 0.04em;

  /* ---- Spacing scale (8px grid) ---- */
  --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;

  /* ---------- Type scale extensions (Stage 1) ---------- */
  --text-2xs:  10.5px;
  --text-4xl:  48px;
  --text-5xl:  60px;

  /* ---------- Line height extension ---------- */
  --lh-flat:   1.0;

  /* ---------- Letter spacing extensions ---------- */
  --track-tighter: -0.04em;
  --track-tight:   -0.02em;
  --track-default: 0em;
  --track-wide:    0.04em;

  /* ---------- Spacing scale extensions ---------- */
  --space-px:  1px;
  --space-0:   0;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ---------- Radii (unprefixed aliases for primitives) ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-pill: 9999px;

  /* ---------- Shadows (3 elevations + accents) ---------- */
  --shadow-1:      0 1px 2px rgba(28,25,23,0.04), 0 1px 1px rgba(28,25,23,0.03);
  --shadow-2:      0 2px 4px rgba(28,25,23,0.06), 0 4px 8px rgba(28,25,23,0.04);
  --shadow-3:      0 4px 12px rgba(28,25,23,0.08), 0 12px 24px rgba(28,25,23,0.06);
  --shadow-accent: 0 4px 12px rgba(232,98,26,0.18), 0 12px 24px rgba(232,98,26,0.10);
  --shadow-focus:  0 0 0 3px rgba(232,98,26,0.32);
  --shadow-inset:  inset 0 1px 2px rgba(28,25,23,0.04);

  /* ---------- Motion ---------- */
  --motion-instant: 100ms;
  --motion-fast:    180ms;
  --motion-base:    220ms;
  --motion-slow:    320ms;
  --motion-slower:  480ms;
  --motion-page:    280ms;
  --motion-modal:   220ms;
  --motion-toast:   180ms;
  --motion-tooltip: 120ms;

  /* ---------- Easing curves ---------- */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-decel:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-accel:    cubic-bezier(0.4, 0.0, 1, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear:   linear;

  /* ---------- Hover intent ---------- */
  --hover-intent-delay: 60ms;
  --tooltip-intent:     300ms;
  --menu-intent:        150ms;

  /* ---------- Z-index scale ---------- */
  --z-base:     0;
  --z-elevated: 10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-toast:    1100;
  --z-cmdpal:   1200;
  --z-max:      9999;

  /* ---------- Density tiers ---------- */
  --density-compact:  8px;
  --density-default:  12px;
  --density-spacious: 16px;

  /* ---------- Tap targets ---------- */
  --tap-min-mobile:  44px;
  --tap-min-desktop: 36px;
  --tap-gap:         8px;
}