/* ==========================================================================
   METRIX LAB - tokens.css
   Design tokens: the single source of truth for every shared value.
   Load order: 1st (before base.css, components.css, animations.css).
   --------------------------------------------------------------------------
   BREAKPOINTS (mobile-first; used via min-width media queries in other files):
     - sm:  480px   (large phone)
     - md:  768px   (tablet / nav desktop switch)
     - lg:  1024px  (small laptop)
     - xl:  1200px  (container max + desktop)
     - xxl: 1440px  (wide desktop)
   Section builders SHOULD author mobile styles first, then layer
   @media (min-width: 768px) {} etc.
   ========================================================================== */

:root {
  /* ----- CORE COLORS -------------------------------------------------- */
  --color-bg: #000000;            /* pure black page base */
  --color-bg-alt: #050505;        /* hair-different alt base */
  --color-surface: #121212;       /* default raised surface */
  --color-surface-2: #1A1A1A;     /* second-level surface / cards on surface */
  --color-surface-3: #202020;     /* hover/active surface lift */

  /* ----- PRIMARY ACCENT (vibrant orange) ------------------------------ */
  --color-accent: #EA580C;        /* PRIMARY accent - CTAs, active, glow */
  --color-accent-strong: #C2410C; /* pressed / darker accent */
  --color-accent-soft: #FB923C;   /* lighter orange (mid gradient) */
  --color-amber: #FCD34D;         /* amber (gradient terminus, highlights) */
  --color-accent-tint: rgba(234, 88, 12, 0.12); /* faint orange wash bg */
  --color-accent-tint-2: rgba(234, 88, 12, 0.22);/* stronger orange wash */

  /* ----- METALLIC GREYS (borders / dividers / inactive) --------------- */
  --color-grey-900: #1F1F1F;
  --color-grey-800: #2A2A2A;
  --color-grey-700: #3A3A3A;      /* default borders */
  --color-grey-600: #525252;      /* dividers / inactive icons */
  --color-grey-500: #737373;      /* muted strokes */
  --color-grey-400: #8F8F8F;

  /* ----- TEXT --------------------------------------------------------- */
  --color-text: #F5F5F5;          /* near-white headings */
  --color-text-body: #C8C8C8;     /* default body text */
  --color-text-muted: #A3A3A3;    /* muted/secondary body */
  --color-text-faint: #6B6B6B;    /* captions, meta, disabled */
  --color-text-on-accent: #0A0A0A;/* text sitting ON the orange fill */

  /* ----- BORDERS ------------------------------------------------------ */
  --border-color: var(--color-grey-700);
  --border-color-soft: rgba(255, 255, 255, 0.07);
  --border-color-strong: var(--color-grey-600);
  --border-width: 1px;
  --border: var(--border-width) solid var(--border-color);
  --border-soft: var(--border-width) solid var(--border-color-soft);

  /* ----- GRADIENTS ---------------------------------------------------- */
  --gradient-accent: linear-gradient(135deg, #EA580C 0%, #FB923C 55%, #FCD34D 100%);
  --gradient-accent-h: linear-gradient(90deg, #EA580C 0%, #FB923C 50%, #FCD34D 100%);
  --gradient-surface: linear-gradient(180deg, #1A1A1A 0%, #121212 100%);
  --gradient-fade-top: linear-gradient(180deg, #000000 0%, rgba(0,0,0,0) 100%);
  --gradient-fade-bottom: linear-gradient(0deg, #000000 0%, rgba(0,0,0,0) 100%);
  /* text-clip helper gradient (apply with background-clip:text).
     Starts at the PRIMARY brand accent so headline accents match the signature
     orange (was amber-shifted: #FB923C -> #FCD34D, omitting #EA580C). */
  --gradient-text: linear-gradient(95deg, #EA580C 0%, #FB923C 55%, #FCD34D 100%);

  /* ----- SHADOWS & GLOW ----------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5);
  /* the signature orange glow used on hover / active / focus accents */
  --glow-orange: 0 0 0 1px rgba(234, 88, 12, 0.55), 0 0 18px rgba(234, 88, 12, 0.35), 0 0 42px rgba(234, 88, 12, 0.18);
  --glow-orange-sm: 0 0 14px rgba(234, 88, 12, 0.30);
  --glow-orange-lg: 0 0 28px rgba(234, 88, 12, 0.45), 0 0 64px rgba(234, 88, 12, 0.22);
  --glow-amber: 0 0 22px rgba(252, 211, 77, 0.30);

  /* ----- FONT FAMILIES ------------------------------------------------ */
  --font-heading: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* ----- FLUID TYPE SCALE (clamp: min, vw, max) ----------------------- */
  --fs-display: clamp(2.75rem, 1.6rem + 6.0vw, 6rem);   /* hero headline */
  --fs-h1: clamp(2.25rem, 1.4rem + 4.2vw, 4rem);        /* section-title XL */
  --fs-h2: clamp(1.85rem, 1.2rem + 2.8vw, 3rem);        /* section-title */
  --fs-h3: clamp(1.4rem, 1.05rem + 1.6vw, 2rem);        /* card / sub-title */
  --fs-h4: clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem);   /* lead paragraph */
  --fs-body: clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem); /* base body */
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-eyebrow: 0.8rem;

  /* line-heights & tracking */
  --lh-tight: 1.05;
  --lh-heading: 1.12;
  --lh-snug: 1.35;
  --lh-body: 1.65;
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.035em;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.22em;

  /* ----- SPACING SCALE (8pt-ish, fluid section gaps) ------------------ */
  --space-2xs: 0.25rem;   /* 4 */
  --space-xs: 0.5rem;     /* 8 */
  --space-sm: 0.75rem;    /* 12 */
  --space-md: 1rem;       /* 16 */
  --space-lg: 1.5rem;     /* 24 */
  --space-xl: 2rem;       /* 32 */
  --space-2xl: 3rem;      /* 48 */
  --space-3xl: 4rem;      /* 64 */
  --space-4xl: 6rem;      /* 96 */
  --space-5xl: 8rem;      /* 128 */
  /* fluid vertical padding for sections */
  --section-padding-y: clamp(4rem, 2.5rem + 7vw, 8rem);
  --section-padding-y-sm: clamp(3rem, 2rem + 4vw, 5rem);

  /* ----- RADIUS SCALE ------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* ----- LAYOUT ------------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 880px;
  --container-pad: clamp(1.25rem, 0.5rem + 3.2vw, 3rem);
  --header-height: 72px;

  /* ----- TRANSITION TIMING ------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;
  --dur-slower: 700ms;
  --transition-base: var(--dur-base) var(--ease-out);
  --reveal-duration: 700ms;
  --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-distance: 24px;

  /* ----- Z-INDEX SCALE ------------------------------------------------ */
  --z-below: -1;
  --z-base: 1;
  --z-decor: 2;     /* parallax / decorative layers above bg, below content */
  --z-content: 10;
  --z-sticky: 100;
  --z-header: 1000;
  --z-overlay: 1500; /* mobile nav backdrop */
  --z-modal: 2000;
  --z-top: 9999;

  /* ----- FOCUS RING --------------------------------------------------- */
  --focus-ring: 0 0 0 3px rgba(234, 88, 12, 0.55);
  --focus-ring-offset: 2px;
}