/* ===========================================================
   AdSnooze — Web design tokens (marketing site).
   DERIVED FROM the shipped app's src/tokens.css so the landing
   reads as the same product. The app's tokens.css is the canonical
   brand source of truth; this file extends it for web/marketing
   surfaces (larger type scale, layout spacing, motion).
   MUST load before styles.css.
   =========================================================== */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/Geist.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/GeistMono.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/InstrumentSerif.woff2') format('woff2');
}

:root {
  /* ------- Surfaces (from app) ----------------------------- */
  --bg-window:      #0a0a12;   /* page background, deep navy-black */
  --bg-raise:       #0e0e18;   /* raised sections */
  --bg-sunken:      #07070d;   /* footer / sunken bands */

  /* Glass overlays (from app) */
  --glass-1:        rgba(255,255,255,0.025);
  --glass-2:        rgba(255,255,255,0.045);
  --glass-3:        rgba(255,255,255,0.075);
  --glass-card:     rgba(255,255,255,0.035);
  --glass-blur:     blur(14px) saturate(125%);

  /* ------- Hairlines (from app) ---------------------------- */
  --line-1:         rgba(255,255,255,0.06);
  --line-2:         rgba(255,255,255,0.10);
  --line-3:         rgba(255,255,255,0.14);

  /* ------- Prism accents (from app) ------------------------ */
  --cyan:           #5cf2ea;
  --violet:         #8a7cff;
  --green:          #4ade80;
  --amber:          #fbbf24;
  --red:            #ff5c6f;

  --accent:         var(--cyan);
  --accent-soft:    rgba(92, 242, 234, 0.16);
  --accent-line:    rgba(92, 242, 234, 0.32);
  --accent-glow:    rgba(92, 242, 234, 0.45);

  /* State semantics (from app's pill) */
  --state-idle:     #fbbf24;   /* amber: ready, no audio */
  --state-playing:  #34d399;   /* green: music passing through */
  --state-muted:    #ff5c6f;   /* red:   ad muted */

  /* ------- Ink (from app) ---------------------------------- */
  --ink-1:          #f6f6fb;
  --ink-2:          #c6c6d4;
  --ink-3:          #8f8fa6;
  --ink-4:          #6b6b80;

  /* ------- Type (from app) --------------------------------- */
  --font-display:   "Instrument Serif", "Times New Roman", serif;
  --font-sans:      "Geist", -apple-system, "Segoe UI Variable", "Segoe UI", sans-serif;
  --font-mono:      "JetBrains Mono", "Geist Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Web type scale */
  --fs-hero:        clamp(2.6rem, 6.5vw, 5rem);
  --fs-h2:          clamp(1.9rem, 4vw, 3rem);
  --fs-h3:          1.35rem;
  --fs-lead:        clamp(1.05rem, 2vw, 1.3rem);
  --fs-body:        1.0rem;
  --fs-mono:        0.78rem;

  /* ------- Layout ------------------------------------------ */
  --maxw:           1120px;
  --maxw-narrow:    760px;
  --pad-x:          clamp(1.25rem, 5vw, 3rem);
  --radius:         18px;
  --radius-sm:      11px;
  --radius-pill:    999px;

  /* ------- Easing (from app) ------------------------------- */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-morph:     cubic-bezier(0.55, 0, 0.25, 1);

  --shadow-soft:    0 18px 48px rgba(0,0,0,0.55);
  --shadow-pill:    0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px var(--line-1) inset;
}