/* ============================================================
   TABLE LAMP STUDIOS — DESIGN TOKENS
   A faith-driven record label. Near-black ground, ink/paper, a
   single warm ember/lamplight accent, film grain, and a three-family
   type system (Space Grotesk display / Inter body / Fraunces accent).
   These are the raw primitives. Components live in site.css.
   ============================================================ */

:root {

  /* ---------- GROUND / SURFACES ----------
     Deep, editorial blacks — warmer than pure #000. */
  --bg:   #070708;   /* page ground — near-black */
  --bg2:  #0b0b0c;   /* raised band / alt section */
  --s1:   #101011;   /* card surface */
  --s2:   #161617;   /* elevated surface */

  /* ---------- LINES / HAIRLINES ---------- */
  --line:  rgba(255,255,255,.08);   /* default hairline */
  --line2: rgba(255,255,255,.15);   /* stronger hairline / border */

  /* ---------- INK / PAPER (text) ---------- */
  --tx:   #F4F1EC;                  /* paper — primary text */
  --mut:  rgba(244,241,236,.60);    /* muted text */
  --mut2: rgba(244,241,236,.34);    /* faint text / labels */

  /* ---------- EMBER ACCENT ----------
     Restrained. Use as hairline, dot, rule, or single word —
     never as a fill across large areas. */
  --ember:      #E2552E;
  --ember-soft: #f0825f;            /* gradient partner only */
  --ember-glow: rgba(226,85,46,.32);
  --ember-wash: rgba(226,85,46,.10);

  /* ---------- TYPE FAMILIES ---------- */
  --font-disp:  'Space Grotesk', sans-serif;          /* display / headings */
  --font-body:  'Inter', system-ui, sans-serif;       /* body / UI */
  --font-serif: 'Fraunces', Georgia, serif;           /* editorial accent */

  /* ---------- TYPE SCALE ----------
     Display-led editorial ramp. Hero sits above the scale. */
  --fs-hero:    78px;   /* hero h1 */
  --fs-d1:      54px;   /* big section heads */
  --fs-d2:      46px;
  --fs-d3:      44px;   /* serif leads */
  --fs-d4:      42px;
  --fs-h:       34px;
  --fs-lg:      19px;
  --fs-md:      18px;
  --fs-base:    16px;   /* body */
  --fs-sm:      14px;
  --fs-xs:      13px;
  --fs-2xs:     12px;
  --fs-micro:   11px;   /* eyebrows / labels */

  /* ---------- LINE HEIGHT ---------- */
  --lh-tight:  .98;
  --lh-snug:   1.06;
  --lh-head:   1.18;
  --lh-body:   1.6;
  --lh-loose:  1.75;

  /* ---------- LETTER-SPACING ----------
     The wordmark treatment is the brand signature: wide tracking,
     uppercase, Space Grotesk medium. */
  --ls-wordmark: .22em;   /* "TABLE LAMP STUDIOS" wordmark */
  --ls-eyebrow:  .32em;   /* eyebrows */
  --ls-label:    .28em;   /* section labels */
  --ls-caps:     .20em;   /* small caps UI */
  --ls-display: -.035em;  /* tight display headings */

  /* ---------- SPACING SCALE ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   22px;
  --sp-6:   30px;
  --sp-7:   40px;
  --sp-8:   54px;
  --sp-9:   64px;
  --sp-section: 120px;    /* vertical section rhythm */

  /* ---------- RADII ---------- */
  --r-sm:  11px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* ---------- LAYOUT ---------- */
  --maxw: 1240px;
  --gutter: 40px;

  /* ---------- MOTION ---------- */
  --t-fast: .2s;
  --t-med:  .5s;

  /* ---------- SHADOW ---------- */
  --shadow-ember: 0 14px 34px var(--ember-glow);

  /* ---------- FILM GRAIN ----------
     Cinematic overlay, applied via .grain in site.css. */
  --grain-opacity: .055;
  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}