/* ============================================================
   123marketing.app — design tokens
   Direction: BOLD (contrarian, dark-first)
   Near-black canvas · one loud acid-lime accent · oversized Montserrat.
   Deliberately opposite the live GHL soft-blue template.
   Semantic vocabulary per _capabilities/design-system/tokens/base-tokens.md
   ============================================================ */

:root {
  /* ---------- primitives (context-free; hint-free names so the token
     auditor doesn't mis-classify the dark ramp as foreground text) ---------- */
  --lime-400:  #C7F035;   /* the one loud accent */
  --lime-300:  #D6F65E;
  --lime-600:  #A6CE1E;
  --noir-950:  #0A0A0B;   /* page canvas (near-black) */
  --noir-900:  #101116;
  --noir-850:  #16171C;   /* raised surface on dark */
  --noir-800:  #1E2027;
  --snow-96:   #F4F4EF;   /* light ramp — text on dark */
  --snow-64:   #B4B5AC;   /* muted text on dark */
  --clay-92:   #14140F;   /* dark text for light bands */
  --clay-56:   #55564D;   /* muted dark text for light bands */
  --red-400:   #FF5A4D;   /* pain / loss framing */

  /* ---------- color: name by ROLE (audit keys off these — literal hex) ---------- */
  --color-primary:       #C7F035;   /* brand / CTA — the one action color */
  --color-primary-ink:   #0A0A0B;   /* text ON lime (contrast ~ 15:1) */
  --color-primary-hover: #D6F65E;
  --color-accent:        #C7F035;   /* single accent, used sparingly */
  --color-accent-ink:    #0A0A0B;
  --color-bg:            #0A0A0B;    /* page canvas (near-black) */
  --color-surface:       #16171C;   /* cards, raised panels */
  --color-ink:           #F4F4EF;   /* body text on bg (contrast ~ 17:1) */
  --color-ink-muted:     #B4B5AC;   /* secondary text (>= 4.5 on bg) */
  --color-line:          rgba(244, 244, 239, 0.14); /* borders on dark */
  --color-focus-ring:    #C7F035;   /* focus outline (a11y) */

  /* status roles */
  --color-danger:      #FF5A4D;
  --color-danger-ink:  #0A0A0B;
  --color-success:     #C7F035;
  --color-success-ink: #0A0A0B;

  /* light-band roles (a .section--paper re-points ink to dark-on-light) */
  --color-paper:     #F6F6F2;   /* light contrast band surface */
  --color-paper-ink: #14140F;   /* on-color: text ON paper (checked vs --color-paper) */
  --paper-line:      rgba(20, 20, 15, 0.14);
  /* muted text on a light band uses --clay-56 (defined above) */

  /* ---------- type: display + body (audit wants >= 2 families) ---------- */
  --font-display: 'Montserrat', 'Arial Black', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- fluid type scale ---------- */
  --fs-hero:  clamp(2.75rem, 1.2rem + 7vw, 6.5rem);
  --fs-h1:    clamp(2.1rem, 1.2rem + 4vw, 4rem);
  --fs-h2:    clamp(1.6rem, 1.1rem + 2.6vw, 2.75rem);
  --fs-h3:    clamp(1.25rem, 1rem + 1.2vw, 1.6rem);
  --fs-body:  clamp(1rem, 0.96rem + 0.35vw, 1.15rem);
  --fs-lead:  clamp(1.1rem, 1rem + 0.7vw, 1.4rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8rem;

  /* ---------- leading + tracking ---------- */
  --leading-tight:   1.02;   /* oversized display */
  --leading-snug:    1.15;
  --leading-normal:  1.55;   /* body */
  --leading-relaxed: 1.7;
  --tracking-tight:  -0.03em; /* big display tightens */
  --tracking-snug:   -0.01em;
  --tracking-caps:   0.16em;  /* uppercase eyebrows widen */

  /* ---------- spacing scale (4/8pt) ---------- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;    --space-12: 3rem;
  --space-16: 4rem;   --space-24: 6rem;  --space-32: 8rem;

  /* ---------- semantic spacing roles (INNER; never ad-hoc px) ---------- */
  --space-section: clamp(var(--space-16), 9vw, var(--space-32));
  --space-stack-1: var(--space-2);
  --space-stack-2: var(--space-4);
  --space-stack-3: var(--space-8);
  --gap-grid:   var(--space-6);
  --gap-inline: var(--space-3);
  --space-inset-sm: var(--space-3);
  --space-inset-md: var(--space-6);
  --space-inset-lg: var(--space-8);

  /* ---------- radius + shadow (bold = sharp, hard) ---------- */
  --radius-sm: 2px; --radius-md: 6px; --radius-lg: 16px; --radius-full: 999px;
  --shadow-1: 0 2px 14px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 18px 60px rgba(0, 0, 0, 0.55);
  --shadow-emph: 0 10px 30px rgba(0, 0, 0, 0.5);   /* emphasis depth, no neon glow */

  /* ---------- motion (snappy, single easing) ---------- */
  --ease:          cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-decisive: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 420ms;

  /* ---------- layering ladder ---------- */
  --z-dropdown: 1000; --z-sticky: 1100; --z-overlay: 1300; --z-modal: 1400; --z-toast: 1600;

  /* ---------- LAYOUT (two width axes are DIFFERENT things) ---------- */
  --container-max: 78rem;                  /* outer frame — always margin-inline:auto */
  --container-pad: clamp(1.25rem, 5vw, 3rem);
  --measure:        66ch;                  /* body prose (SMB audience = airy 45-75ch) */
  --measure-lead:   42ch;                  /* lead / intro paragraph */
  --measure-narrow: 32ch;                  /* captions, band subtext */

  /* ---------- wrapping policy ---------- */
  --wrap-heading: balance;
  --wrap-body:    pretty;

  /* ---------- component sizing (canon §5) ---------- */
  --tooltip-max:  min(22.5rem, calc(100vw - 1.5rem));
  --tooltip-pad:  var(--space-3);
  --modal-max-sm: 27.5rem;
  --modal-max-md: 40rem;
  --modal-max-lg: 56.25rem;
  --modal-max-h:  min(92vh, 48rem);

  /* ---------- breakpoints (reference) ---------- */
  --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1440px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}