:root {
  /* Palette */
  --ic-bg: #0A0A0A;
  --ic-bg-soft: #141414;
  --ic-text: #F5F5F5;
  --ic-muted: #8A8A8A;
  --ic-rule: #2A2A2A;
  --ic-green: #00FF88;
  --ic-green-cta: #00CC6E;
  --ic-green-cta-rgb: 0, 204, 110;
  --ic-blue: #3D8BFF;
  --ic-grey: #6B7280;
  --ic-orange: #FF6A00;
  --ic-orange-rgb: 255, 106, 0;

  /* Platform brand colors */
  --plat-spotify: #1DB954;
  --plat-youtube: #FF3B30;
  --plat-instagram: #00B2FF;
  --plat-tiktok-pink: #FF0050;
  --plat-tiktok-cyan: #00E6FF;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 80px;
  --sp-10: 110px;

  /* Type — family */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;

  /* Type — modular scale.
     Granular enough for current variety but bounded: pages should reach
     for these tokens before introducing new hardcoded sizes. */
  --fs-xs:   12px;                       /* meta, labels, microcopy */
  --fs-sm:   14px;                       /* secondary body, captions */
  --fs-base: 16px;                       /* body default (also = min for iOS no-zoom) */
  --fs-md:   18px;                       /* lead paragraphs */
  --fs-lg:   clamp(20px, 2vw, 24px);     /* H4 / small section heads */
  --fs-xl:   clamp(24px, 3vw, 32px);     /* H3 */
  --fs-2xl:  clamp(32px, 5vw, 48px);     /* H2 desktop default */
  --fs-3xl:  clamp(40px, 8vw, 72px);     /* H2 hero / large section */
  --fs-4xl:  clamp(48px, 11vw, 180px);   /* H1 mega (home hero) */

  /* Type — line-height + tracking helpers */
  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-base:  1.55;
  --tracking-tight: -0.03em;
  --tracking-uppercase: 0.16em;

  /* Z-index scale */
  --z-base: 1;
  --z-marquee: 5;
  --z-overlay-blur: 800;
  --z-cta-elevated: 900;
  --z-header: 1000;
  --z-modal: 9999;

  /* Defaults for a service page (overridden per page) */
  --plat-accent: var(--ic-green);
}