/* GAS Music design tokens and base type, copied from the GAS Music Design System (claude.ai artifact HBaYVKQVfzesQAg36pVgQZ, version 1790763132-8783). Only the Campton weights shipped in ./fonts are declared. */
/* ============================================================
   GAS Music — Colors & Type Foundations
   "Sound. Music. Magic."
   Cinematic · High-contrast · Minimalist · Modern · Professional
   ============================================================ */

/* ---------- Fonts: Campton ----------------------------------- */
@font-face { font-family: "Campton"; font-weight: 300; font-style: normal;  src: url("./fonts/CamptonLight.woff2") format("woff2"), url("./fonts/CamptonLight.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Campton"; font-weight: 400; font-style: normal;  src: url("./fonts/CamptonBook.woff2") format("woff2"), url("./fonts/CamptonBook.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Campton"; font-weight: 500; font-style: normal;  src: url("./fonts/CamptonMedium.woff2") format("woff2"), url("./fonts/CamptonMedium.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Campton"; font-weight: 600; font-style: normal;  src: url("./fonts/CamptonSemiBold.woff2") format("woff2"), url("./fonts/CamptonSemiBold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Campton"; font-weight: 700; font-style: normal;  src: url("./fonts/CamptonBold.woff2") format("woff2"), url("./fonts/CamptonBold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Campton"; font-weight: 800; font-style: normal;  src: url("./fonts/CamptonExtraBold.woff2") format("woff2"), url("./fonts/CamptonExtraBold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Campton"; font-weight: 900; font-style: normal;  src: url("./fonts/CamptonBlack.woff2") format("woff2"), url("./fonts/CamptonBlack.otf") format("opentype"); font-display: swap; }

:root {
  /* ---------- Color Tokens (Brand) ------------------------- */
  /* GAS runs on a near-monochrome palette — true black, pure white,
     and a precise scale of warm-cool greys. Color is the EXCEPTION,
     used sparingly through full-bleed cinematic imagery, never as
     decorative fills. */

  --gas-black:        #000000;   /* True black — primary brand surface */
  --gas-ink:          #0d0d0d;   /* Off-black — for layered surfaces */
  --gas-charcoal:     #1a1a1a;   /* Cards on black */
  --gas-graphite:     #262626;   /* Dividers / inputs on black */
  --gas-iron:         #3d3d3d;   /* Hairlines / disabled */
  --gas-steel:        #595959;   /* Tertiary text on black */
  --gas-fog:          #8a8a8a;   /* Secondary text on black */
  --gas-mist:         #b8b8b8;   /* Captions / subtle */
  --gas-bone:         #d9d9d9;   /* Light dividers */
  --gas-paper:        #f2f2f2;   /* Light surface */
  --gas-snow:         #f7f7f7;   /* Light background */
  --gas-white:        #ffffff;   /* Pure white */

  /* Single accent — a deep cinematic red used VERY sparingly for
     "now playing", record/REC indicators, error states. */
  --gas-signal:       #e10600;   /* Signal red */
  --gas-signal-glow:  #ff1a14;

  /* Brand accent palette — signal red plus two supporting accents.
     These are part of the brand scheme, used for emphasis, data,
     status and accent moments (not decoration-by-default). */
  --gas-accent-green: #2db580;   /* Green accent — also success */
  --gas-accent-amber: #d49a1f;   /* Amber accent — also warning */

  /* Semantic aliases onto the accent palette */
  --gas-success:      var(--gas-accent-green);
  --gas-warning:      var(--gas-accent-amber);
  --gas-error:        var(--gas-signal);

  /* ---------- Foreground / Background semantic vars -------- */
  /* Default theme is DARK — black is the brand's default canvas. */
  --bg:               var(--gas-black);
  --bg-elevated:      var(--gas-ink);
  --bg-card:          var(--gas-charcoal);
  --bg-input:         var(--gas-graphite);

  --fg1:              var(--gas-white);   /* Primary text  */
  --fg2:              var(--gas-mist);    /* Secondary     */
  --fg3:              var(--gas-fog);     /* Tertiary      */
  --fg4:              var(--gas-steel);   /* Disabled      */

  --line:             var(--gas-graphite);
  --line-strong:      var(--gas-iron);

  --accent:           var(--gas-signal);
  --on-accent:        var(--gas-white);

  /* ---------- Typography Tokens ---------------------------- */
  --font-sans:        "Campton", "Helvetica Neue", "Arial", sans-serif;
  --font-display:     "Campton", "Helvetica Neue", "Arial", sans-serif;

  /* Display weights — GAS leans on extremes, not mid-weights */
  --weight-thin:      100;
  --weight-light:     300;
  --weight-book:      400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* Type scale (cinematic — big jumps, lots of negative space) */
  --fs-12:    0.75rem;
  --fs-13:    0.8125rem;
  --fs-14:    0.875rem;
  --fs-16:    1rem;
  --fs-18:    1.125rem;
  --fs-20:    1.25rem;
  --fs-24:    1.5rem;
  --fs-32:    2rem;
  --fs-48:    3rem;
  --fs-64:    4rem;
  --fs-96:    6rem;
  --fs-128:   8rem;
  --fs-160:   10rem;

  --lh-tight: 0.95; /* @kind other */
  --lh-snug: 1.1; /* @kind other */
  --lh-normal: 1.5; /* @kind other */
  --lh-loose: 1.7; /* @kind other */

  /* Tracking — display is TIGHT, eyebrow/label is WIDE */
  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-normal:    0em;
  --tracking-wide:      0.08em;
  --tracking-wider:     0.16em;   /* Eyebrow labels */
  --tracking-widest:    0.24em;   /* SOUND. MUSIC. MAGIC. */

  /* ---------- Spacing (8pt grid) --------------------------- */
  --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:  96px;
  --sp-10: 128px;
  --sp-11: 192px;

  /* ---------- Radii ---------------------------------------- */
  /* GAS is sharp. Default = 0. Radii used only for inputs. */
  --radius-0:  0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  /* ---------- Borders -------------------------------------- */
  --border-hairline: 1px solid var(--line);
  --border-strong:   1px solid var(--line-strong);
  --border-accent:   1px solid var(--fg1);

  /* ---------- Shadows -------------------------------------- */
  /* Used sparingly. Cinematic vignettes, not soft lift. */
  --shadow-vignette: inset 0 0 200px 0 rgba(0,0,0,0.65);
  --shadow-press:    0 0 0 1px rgba(255,255,255,0.06);
  --shadow-lift:     0 24px 64px -16px rgba(0,0,0,0.6),
                     0 8px 16px -8px rgba(0,0,0,0.4);
  --shadow-glow:     0 0 24px rgba(225, 6, 0, 0.4);

  /* ---------- Motion --------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ /* expo-out, cinematic */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-linear: linear; /* @kind other */

  --dur-fast: 150ms; /* @kind other */
  --dur-base: 320ms; /* @kind other */
  --dur-slow: 600ms; /* @kind other */
  --dur-cinema: 900ms; /* @kind other */

  /* ---------- Z-index -------------------------------------- */
  --z-base: 1; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-overlay: 500; /* @kind other */
  --z-modal: 1000; /* @kind other */
  --z-toast: 2000; /* @kind other */
}

/* Light surface theme (used for press kits, docs, modal islands) */
[data-theme="light"] {
  --bg:          var(--gas-white);
  --bg-elevated: var(--gas-snow);
  --bg-card:     var(--gas-paper);
  --bg-input:    var(--gas-white);

  --fg1:    var(--gas-black);
  --fg2:    #3d3d3d;
  --fg3:    #6e6e6e;
  --fg4:    var(--gas-mist);

  --line:        var(--gas-bone);
  --line-strong: var(--gas-mist);
}

/* ============================================================
   Base + Semantic Styles
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-weight: var(--weight-book);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Display + Headings ----------------------------------- */
.display-xxl, h1.display {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: clamp(var(--fs-64), 12vw, var(--fs-160));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tightest);
  text-transform: uppercase;
  margin: 0;
}

.display-xl {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: clamp(var(--fs-48), 8vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-64);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0 0 var(--sp-5);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-48);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--sp-4);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-3);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-3);
}

h6, .h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg2);
  margin: 0 0 var(--sp-2);
}

/* The signature lockup — eyebrow that appears above the hero
   on every section (e.g. "SOUND. MUSIC. MAGIC.") */
.eyebrow, .kicker {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg2);
  display: inline-block;
}

p, .body {
  font-family: var(--font-sans);
  font-weight: var(--weight-book);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg1);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-20);
  font-weight: var(--weight-light);
  line-height: 1.55;
  color: var(--fg1);
}

small, .caption {
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  color: var(--fg3);
}

code, kbd, samp, .mono {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
  font-size: 0.92em;
  color: var(--fg1);
}

a {
  color: var(--fg1);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.6; }

hr {
  border: 0;
  border-top: var(--border-hairline);
  margin: var(--sp-7) 0;
}

::selection {
  background: var(--gas-signal);
  color: var(--gas-white);
}