/* ============================================================
   cuecom GmbH — Design Tokens
   Dark-first, Bold. Brand orange derived from the cuecom logo
   (Pantone orange square), warm charcoal from night-event
   photography. All other files consume these tokens only.
   ============================================================ */

/* ---- Self-hosted fonts (GDPR: never load from Google CDN) ----
   Files live in ./fonts/ — variable weight ranges.
   jakarta-var.woff2   Plus Jakarta Sans 200–800 (display)
   jakarta-italic.woff2 Plus Jakarta Sans italic 200–800
   dmsans-var.woff2    DM Sans 100–1000 (body)
   dmsans-italic.woff2 DM Sans italic 100–1000            */

@font-face{
  font-family:'Space Grotesk';
  src:url('./fonts/spacegrotesk-var.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap}
@font-face{
  font-family:'Figtree';
  src:url('./fonts/figtree-var.woff2') format('woff2');
  font-weight:300 900;font-style:normal;font-display:swap}
@font-face{
  font-family:'Figtree';
  src:url('./fonts/figtree-var-italic.woff2') format('woff2');
  font-weight:300 900;font-style:italic;font-display:swap}

:root{
  /* ---- Typography: Space Grotesk (display, techy-creative) +
          Figtree (body, friendly & highly legible) ---- */
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Figtree',system-ui,sans-serif;

  --fs-xs:0.75rem;
  --fs-sm:0.875rem;
  --fs-base:1rem;
  --fs-md:1.125rem;
  --fs-lg:1.25rem;
  --fs-xl:1.5rem;
  --fs-2xl:2rem;
  --fs-3xl:clamp(1.75rem,3.5vw,2.75rem);
  --fs-4xl:clamp(2.25rem,4.5vw,3.75rem);
  --fs-hero:clamp(2.75rem,5.5vw,5rem); /* absolute maximum */

  --fw-light:300;--fw-regular:400;--fw-medium:500;
  --fw-semibold:600;--fw-bold:700;--fw-xbold:700; /* Space Grotesk caps at 700 */

  --lh-tight:1.15;--lh-snug:1.3;--lh-base:1.6;--lh-relaxed:1.75;
  --ls-tight:-0.03em;--ls-snug:-0.015em;--ls-normal:0;
  --ls-wide:0.06em;--ls-wider:0.12em;

  /* ---- Spacing ---- */
  --sp-1:0.25rem;--sp-2:0.5rem;--sp-3:0.75rem;--sp-4:1rem;
  --sp-5:1.25rem;--sp-6:1.5rem;--sp-8:2rem;--sp-10:2.5rem;
  --sp-12:3rem;--sp-16:4rem;--sp-20:5rem;--sp-24:6rem;--sp-32:8rem;
  --section-gap:clamp(4.5rem,9vw,8rem);

  /* ---- Color: backgrounds — bone & ink: clean warm bone white,
          deep ink islands, orange as the only loud color ---- */
  --c-bg:#FAF8F3;
  --c-bg-2:#F1ECE2;
  --c-bg-3:#E8E1D2;
  --c-surface:#FFFEFB;
  --c-dark:#14171C;      /* dark islands: rich ink */
  --c-dark-2:#1D2127;
  /* deeper "paper" sections for rhythm contrast */
  --c-light:#F0E9DA;
  --c-light-2:#E6DCC6;

  /* ---- Color: brand (cuecom logo orange) ---- */
  --c-brand:#F08A00;
  --c-brand-2:#FFA228;
  --c-brand-3:#C87300;
  --c-brand-dark:#8F5300; /* AA-safe orange for small text on light bg */
  --c-brand-soft:rgba(240,138,0,.13);
  --c-brand-mid:rgba(240,138,0,.38);
  /* emphasis color: AA-safe orange on light, vivid orange in dark scopes */
  --c-emph:var(--c-brand-dark);

  /* ---- Color: accent (logo grey + warm cream highlight) ---- */
  --c-accent:#8A8378;
  --c-accent-2:#FFD9A0;

  /* ---- Color: text (on light) ---- */
  --c-text:#1E1B15;
  --c-text-2:#544F45;
  --c-text-3:#6B6558;
  --c-text-inv:#191510;        /* dark text on the orange brand color */
  --c-text-brand:#8F5300;
  /* legacy aliases (paper sections) */
  --c-text-dark:#1E1B15;
  --c-text-dark-2:#544F45;
  /* light text for dark islands (re-scoped below via .bg-deep etc.)
     ondark-3 raised for WCAG AA on the warm-ink backgrounds (was #98948A) */
  --c-ondark:#F6F4EF;
  --c-ondark-2:#CBC9C2;
  --c-ondark-3:#B4B0A6;

  /* ---- Borders ---- */
  --c-border:rgba(30,27,21,.13);
  --c-border-2:rgba(30,27,21,.24);
  --c-border-dark:rgba(30,27,21,.15);

  /* ---- Status ---- */
  --c-success:#2E7D43;
  --c-success-bg:rgba(46,125,67,.12);
  --c-error:#C03B2B;
  --c-error-bg:rgba(192,59,43,.12);

  /* ---- Radius (Bold: decisive, not bubbly) ---- */
  --r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:24px;--r-full:9999px;

  /* ---- Shadows (light UI: soft neutral) ---- */
  --shadow-sm:0 2px 8px rgba(24,20,14,.08);
  --shadow-md:0 8px 24px rgba(24,20,14,.12);
  --shadow-lg:0 20px 50px rgba(24,20,14,.18);
  --shadow-brand:0 8px 24px rgba(240,138,0,.26);

  /* ---- Motion ---- */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --t-fast:160ms var(--ease-out);
  --t-base:280ms var(--ease-out);
  --t-slow:480ms var(--ease-out);

  /* ---- Layout ---- */
  --max-w:1200px;--max-w-text:640px;--max-w-sm:480px;
  --gutter:clamp(1.25rem,5vw,3rem);
  --header-h:76px;
}