/* 7EMPLE — Shared design tokens.
   Loaded before inline <style> blocks so inline rules still win on any
   page-specific overrides. New tokens defined here are available everywhere. */

:root {
  /* Core palette (mirrors main theme — variant pages override in their inline <style>) */
  --bg: #161616;
  --text: #F9F9F9;
  --muted: #BEBEBE;
  --dim: #999999;
  --surface: #181f1f;
  --surface2: #222a2a;
  --border: rgba(249, 249, 249, 0.1);
  --border-strong: rgba(249, 249, 249, 0.2);

  /* Brand */
  --orange: #FE4C04;
  --orange-dark: #d93e00;   /* hover / pressed */
  --orange-soft: rgba(254, 76, 4, 0.1);
  --orange-ring: rgba(254, 76, 4, 0.35);

  /* Semantic */
  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, 0.08);
  --success-ring: rgba(34, 197, 94, 0.25);
  --success-text: #86efac;

  /* Typography scale */
  --font-2xs: 10px;
  --font-xs:  11px;
  --font-sm:  13px;
  --font-base: 15px;
  --font-md:  17px;
  --font-lg:  22px;
  --font-xl:  clamp(28px, 3vw, 44px);
  --font-2xl: clamp(40px, 5vw, 72px);
  --font-3xl: clamp(56px, 7.5vw, 128px);
  --font-hero: clamp(72px, 10vw, 160px);

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

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* Motion */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sharp:  cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast:    0.2s;
  --dur-base:    0.35s;
  --dur-slow:    0.6s;
  --dur-reveal:  0.9s;

  /* Z-index scale (5 tiers — collapse from ad-hoc 0..99999) */
  --z-base:    1;
  --z-raised:  10;
  --z-nav:     200;
  --z-overlay: 500;
  --z-top:     9999;

  /* Layout */
  --wrap-max: 1480px;
}