/* ==========================================================================
   Naas Music Publishing — Core Tokens
   Colors + Type + Spacing + Motion
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Space+Grotesk:wght@300..700&family=JetBrains+Mono:wght@400;500;700&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap');

:root {
  /* ----- COLOR: Ink & Paper (monochrome core) ----- */
  --ink-1000: #0a0a0a;   /* deepest black, backgrounds, display text on paper */
  --ink-900:  #141414;   /* primary surface black */
  --ink-800:  #1f1f1f;   /* raised surface on black */
  --ink-700:  #2a2a2a;   /* hairline borders on black */
  --ink-500:  #6e6e6e;   /* muted text on paper */
  --ink-400:  #8a8a8a;   /* placeholder, metadata */
  --ink-300:  #c7c7c7;   /* divider on paper */
  --ink-200:  #e2ded4;   /* bone hairline on paper */

  --paper-100: #f5f1e8;  /* bone — primary warm paper */
  --paper-50:  #faf7f0;  /* soft bone, raised */
  --paper-0:   #ffffff;  /* pure white, rare */

  /* ----- COLOR: Single accent (interactive only) ----- */
  --accent:       #d6ff3f;   /* chartreuse — hover, active, highlight */
  --accent-ink:   #0a0a0a;   /* text over accent */
  --accent-dim:   #a8cc30;

  /* ----- COLOR: Semantic ----- */
  --bg:           var(--paper-100);
  --bg-alt:       var(--ink-1000);     /* inverse sections */
  --surface:      var(--paper-50);
  --surface-alt:  var(--ink-900);
  --fg:           var(--ink-1000);
  --fg-muted:     var(--ink-500);
  --fg-subtle:    var(--ink-400);
  --fg-inverse:   var(--paper-100);
  --border:       var(--ink-200);
  --border-strong:var(--ink-1000);
  --border-inverse:var(--ink-700);

  /* ----- TYPE FAMILIES ----- */
  /* Display = condensed sans matching the NAAS logo wordmark.
     Oswald is a close Google Fonts substitute; brand font may exist — ASK. */
  --font-display: 'Oswald', 'Impact', 'Arial Narrow', sans-serif;
  --font-serif:   'Newsreader', 'Times New Roman', serif; /* editorial accent only */
  --font-sans:    'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ----- TYPE SCALE (fluid) ----- */
  --fs-hero:   clamp(4.5rem, 11vw, 13rem);    /* hero display */
  --fs-display:clamp(3rem, 7vw, 7.5rem);      /* client name, section titles */
  --fs-h1:     clamp(2.25rem, 4.5vw, 4rem);
  --fs-h2:     clamp(1.75rem, 3vw, 2.75rem);
  --fs-h3:     clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-lead:   clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-body:   1rem;
  --fs-small:  0.8125rem;
  --fs-micro:  0.6875rem;

  /* ----- SEMANTIC TYPE ROLES ----- */
  /* HERO / DISPLAY use the condensed sans matching the logo. */
  --type-hero-family: var(--font-display);
  --type-hero-weight: 600;
  --type-hero-spacing: 0.01em;
  --type-hero-leading: 0.92;
  --type-hero-transform: uppercase;

  --type-display-family: var(--font-display);
  --type-display-weight: 500;
  --type-display-spacing: 0.02em;
  --type-display-leading: 0.95;
  --type-display-transform: uppercase;

  --type-h1-family: var(--font-sans);
  --type-h1-weight: 500;
  --type-h1-spacing: -0.02em;

  --type-eyebrow-family: var(--font-mono);
  --type-eyebrow-weight: 500;
  --type-eyebrow-spacing: 0.12em;
  --type-eyebrow-transform: uppercase;

  --type-meta-family: var(--font-mono);
  --type-meta-weight: 400;
  --type-meta-spacing: 0.04em;

  /* ----- SPACING (8pt base, music-grid generous) ----- */
  --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 — NEAR ZERO. Editorial = sharp. ----- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-pill: 999px;

  /* ----- BORDERS ----- */
  --hairline: 1px solid var(--border);
  --hairline-strong: 1px solid var(--border-strong);
  --hairline-inverse: 1px solid var(--border-inverse);

  /* ----- SHADOW — almost none. Editorial = flat. ----- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(10,10,10,0.04);
  --shadow-focus: 0 0 0 3px var(--accent);

  /* ----- MOTION ----- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast: 180ms;
  --dur-med: 320ms;
  --dur-slow: 640ms;
  --dur-marquee: 40s;

  /* ----- LAYOUT ----- */
  --container: 1440px;
  --gutter: clamp(24px, 4vw, 64px);
  --edge: clamp(20px, 3vw, 48px);
}

/* ============================== SEMANTIC ELEMENTS ========================== */

html { color: var(--fg); background: var(--bg); }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hero, h1.hero {
  font-family: var(--type-hero-family);
  font-weight: var(--type-hero-weight);
  font-size: var(--fs-hero);
  letter-spacing: var(--type-hero-spacing);
  line-height: var(--type-hero-leading);
  text-transform: var(--type-hero-transform);
}

.display, h1 {
  font-family: var(--type-display-family);
  font-weight: var(--type-display-weight);
  font-size: var(--fs-display);
  letter-spacing: var(--type-display-spacing);
  line-height: var(--type-display-leading);
  text-transform: var(--type-display-transform);
}

/* Rare: editorial pull-quote in the old serif, for long-form prose only */
.pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-display);
  letter-spacing: -0.03em;
  line-height: 1;
}

h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

p { font-size: var(--fs-body); line-height: 1.55; color: var(--fg); max-width: 62ch; }
p.lead { font-size: var(--fs-lead); line-height: 1.45; }

.eyebrow {
  font-family: var(--type-eyebrow-family);
  font-weight: var(--type-eyebrow-weight);
  font-size: var(--fs-micro);
  letter-spacing: var(--type-eyebrow-spacing);
  text-transform: var(--type-eyebrow-transform);
}

.meta, code, .mono {
  font-family: var(--type-meta-family);
  font-weight: var(--type-meta-weight);
  letter-spacing: var(--type-meta-spacing);
  font-size: var(--fs-small);
}

/* Links: underline with offset, accent on hover */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-dim); }

/* Selection */
::selection { background: var(--accent); color: var(--accent-ink); }

/* Focus */
:focus-visible { outline: none; box-shadow: var(--shadow-focus); }