/* ==========================================================================
   Infinity Edges — Design Tokens
   Palette sampled directly from the brand logo (5cd793_6e09705e...png)
   #161616 charcoal · #D72024 ember · #FEFEFE white · #EBEBEB smoke
   ========================================================================== */

:root {
  /* ---- Brand core (verified from logo) ---- */
  --ink: #161616;
  --ink-deep: #0b0b0c;
  --ink-soft: #1e1e1f;
  --ink-lift: #242426;
  --ember: #d72024;
  --ember-lo: #a5161a;
  --ember-hi: #f2444a;
  --white: #fefefe;
  --smoke: #ebebeb;
  --brass: #c9a227;
  --brass-lo: #8f7318;

  /* ---- Semantic surfaces ---- */
  --bg: var(--ink);
  --bg-alt: var(--ink-deep);
  --surface: var(--ink-soft);
  --surface-lift: var(--ink-lift);

  /* ---- Text (all AA-verified on --ink) ---- */
  --text: var(--white);          /* 19.4:1 */
  --text-muted: #b9b9bc;         /* 8.4:1  */
  --text-dim: #8e8e93;           /* 4.9:1  — meets AA for normal text */

  /* ---- Glass + hairlines ---- */
  --glass: rgba(255, 255, 255, 0.055);
  --glass-lift: rgba(255, 255, 255, 0.085);
  --glass-solid: #1c1c1e;        /* @supports fallback */
  --hairline: rgba(255, 255, 255, 0.1);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --brass-line: rgba(201, 162, 39, 0.34);

  /* ---- Multi-layer shadows (3 stacked: tight / ambient / far) ---- */
  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.28),
    0 6px 16px rgba(0, 0, 0, 0.2);
  --shadow-md:
    0 2px 4px rgba(0, 0, 0, 0.44),
    0 8px 18px rgba(0, 0, 0, 0.34),
    0 20px 44px rgba(0, 0, 0, 0.28);
  --shadow-lg:
    0 4px 8px rgba(0, 0, 0, 0.48),
    0 16px 34px rgba(0, 0, 0, 0.38),
    0 40px 80px rgba(0, 0, 0, 0.34);
  --shadow-ember:
    0 2px 6px rgba(215, 32, 36, 0.3),
    0 10px 26px rgba(215, 32, 36, 0.24),
    0 0 44px rgba(215, 32, 36, 0.16);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, 0.07);

  /* ---- Typography ---- */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.75rem, 6.4vw, 5.5rem);
  --fs-h1: clamp(2.25rem, 5vw, 4rem);
  --fs-h2: clamp(1.85rem, 3.6vw, 3rem);
  --fs-h3: clamp(1.3rem, 2.2vw, 1.85rem);
  --fs-lead: clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-body: clamp(1rem, 1.05vw, 1.075rem);
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.08;
  --lh-snug: 1.28;
  --lh-body: 1.7;
  --ls-eyebrow: 0.18em;
  --measure: 68ch;

  /* ---- Spacing ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  /* ---- Layout ---- */
  --container: 1280px;
  --container-narrow: 920px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 620ms;
  --dur-reveal: 900ms;

  /* ---- Z-index scale (per UX guideline) ---- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 20;
  --z-header: 60;
  --z-dropdown: 300;
  --z-overlay: 900;
  --z-modal: 999;
  --z-toast: 9999;

  /* ---- Chrome heights ---- */
  --topbar-h: 40px;
  --header-h: 78px;
  --mobilebar-h: 62px;
}

/* Mobile chrome adjustments */
@media (max-width: 768px) {
  :root {
    --header-h: 66px;
    --topbar-h: 36px;
  }
}