/* ==========================================================================
   TOKENS — EtchTechDenver  ·  Direction A "Frosted Alabaster"

   Light-first. The ground is a warm paper that echoes the frosted, sandblasted
   surface this workshop actually produces; the accent is the amber of a laser
   beam, darkened to --accent-ink wherever it has to carry type.

   NOTE ON THE LOGO: the supplied mark is pure white line-art on transparency,
   so it is invisible on a light ground. assets/img/logo-ink.webp is the same
   file recoloured to --ink with its alpha preserved. Use logo-ink on light
   surfaces and the original logo.webp inside .invert sections.

   Two contexts exist, and every component reads the same token names in both:
     default   → light paper ground
     .invert   → graphite ground (tribute band, footer)
   ========================================================================== */

:root {
  /* ---- GROUNDS ---- */
  --paper:          #F5F3F0;   /* page ground */
  --paper-2:        #EFEBE6;   /* alternating band */
  --surface:        #FFFFFF;   /* cards, panels */
  --surface-2:      #FAF8F5;   /* inset / field fill */

  /* ---- DARK GROUNDS (for .invert and for ink fills) ---- */
  --ink-deep:       #14181C;
  --ink-graphite:   #1B2129;
  --ink-slate:      #232B35;

  /* ---- ACCENTS ---- */
  --accent:         #C8791B;   /* fills: buttons, rules, dots */
  --accent-bright:  #E29024;   /* hover, and amber type on dark */
  --accent-ink:     #8A5209;   /* AA-safe amber TYPE on light — 5.8:1 */
  --copper:         #A8551F;
  --accent-glow:      rgba(200, 121, 27, 0.30);
  --accent-glow-soft: rgba(200, 121, 27, 0.10);

  /* ---- INK ---- */
  --heading:        #14181C;   /* 16.1:1 on paper */
  --body:           #55606B;   /*  5.8:1 on paper */
  --body-dim:       #616C75;   /*  4.9:1 on paper — safe for small meta labels */
  --on-accent:      #14181C;   /*  5.3:1 on --accent */

  /* ---- EDGES & GLASS ---- */
  --line:           #E2DDD6;
  --line-strong:    #D3CCC2;
  --surface-glass:  rgba(255, 255, 255, 0.72);
  --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --glass-blur:     blur(16px) saturate(150%);

  /* ---- SHADOWS (neutral, multi-layer — never a single flat shadow) ---- */
  --shadow-1: 0 1px 2px rgba(20,24,28,.05), 0 2px 6px rgba(20,24,28,.05);
  --shadow-2: 0 1px 2px rgba(20,24,28,.05), 0 6px 16px rgba(20,24,28,.07), 0 14px 34px rgba(20,24,28,.06);
  --shadow-3: 0 2px 4px rgba(20,24,28,.06), 0 12px 28px rgba(20,24,28,.09), 0 32px 68px rgba(20,24,28,.10);
  --shadow-glow: 0 0 0 3px rgba(200,121,27,.16), 0 6px 20px rgba(200,121,27,.20);

  /* ---- TYPOGRAPHY ---- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-h1:    clamp(2.35rem, 5.1vw, 4.5rem);
  --fs-h2:    clamp(2rem, 4vw, 3.4rem);
  --fs-h3:    clamp(1.35rem, 2vw, 1.9rem);
  --fs-h4:    clamp(1.125rem, 1.4vw, 1.35rem);
  --fs-body:  clamp(1rem, 1.05vw, 1.115rem);
  --fs-lead:  clamp(1.075rem, 1.5vw, 1.3rem);
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.6875rem;

  --lh-tight: 1.08;
  --lh-snug:  1.28;
  --lh-body:  1.65;
  --measure:  68ch;

  /* ---- SPACE (8px scale) ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;    --sp-11: 6rem;
  --section-y: clamp(5rem, 10vw, 9rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --container: 1280px;
  --container-narrow: 920px;

  /* ---- GEOMETRY ---- */
  --r-xs: 3px;  --r-sm: 6px;  --r-md: 10px;
  --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; --r-pill: 999px;

  /* ---- MOTION ---- */
  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-micro: 180ms;
  --dur-base:  280ms;
  --dur-enter: 420ms;
  --dur-hero:  700ms;

  /* ---- Z-INDEX SCALE ---- */
  --z-grain:  1;   --z-raised: 10;  --z-sticky: 20;
  --z-header: 30;  --z-drawer: 40;  --z-modal:  50;  --z-toast: 60;

  /* ---- LAYOUT CONSTANTS ---- */
  --topbar-h: 42px;
  --header-h: 88px;
  --header-h-shrunk: 66px;
  --mobilebar-h: 62px;
}

/* ==========================================================================
   .invert — graphite context. Re-points the SAME token names so every
   component renders correctly in both worlds with no component-level forks.
   Used by the tribute band, the footer, the popup and the lightbox.
   ========================================================================== */
.invert {
  --paper:          #14181C;
  --paper-2:        #1B2129;
  --surface:        #1B2129;
  --surface-2:      #232B35;

  --heading:        #F6F8FA;
  --body:           #A8B2BD;   /* 7.9:1 on --paper */
  --body-dim:       #808B96;
  --accent-ink:     var(--accent-bright);   /* amber type needs to lighten here */

  --line:           rgba(255, 255, 255, 0.11);
  --line-strong:    rgba(255, 255, 255, 0.18);
  --surface-glass:  rgba(255, 255, 255, 0.06);
  --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.10);

  --shadow-1: 0 1px 2px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.22);
  --shadow-2: 0 2px 4px rgba(0,0,0,.30), 0 8px 20px rgba(0,0,0,.28), 0 18px 44px rgba(0,0,0,.22);
  --shadow-3: 0 4px 8px rgba(0,0,0,.32), 0 16px 36px rgba(0,0,0,.30), 0 40px 90px rgba(0,0,0,.34);
  --shadow-glow: 0 0 0 1px rgba(226,144,36,.30), 0 8px 30px rgba(226,144,36,.22);

  background: var(--paper);
  color: var(--body);
}

@media (max-width: 900px) {
  :root { --topbar-h: 0px; --header-h: 72px; --header-h-shrunk: 60px; }
}