/* M4ART · SIGNAL / FOUR FACETS · design tokens v1.0
   Source: M4ART-Brand-Guidelines-v1.0.pdf (sections 07, 09–11, 15, 17, 18) */

:root {
  /* 07 · Color · sRGB */
  --c-gallery: #F5F3ED;
  --c-ink: #171A18;
  --c-signal: #C5D34D;
  --c-paper: #FFFFFF;
  --c-secondary: #626660;
  --c-surface: #EAE7DE;
  --c-line: #DADBD2;
  --c-signal-hover: #B5C33D;
  --c-signal-soft: #EDF1CC;

  --c-error: #B24037;
  --c-success: #2F6B4F;
  --c-info: #385D83;

  /* 18 · Dark surfaces (used only in dark blocks / [data-theme="dark"]) */
  --c-dark-bg: #171A18;
  --c-dark-surface: #242824;
  --c-dark-text: #F5F3ED;
  --c-dark-secondary: #B9BDB4;

  /* Semantic aliases (light theme) */
  --bg: var(--c-gallery);
  --bg-elev: var(--c-paper);
  --bg-muted: var(--c-surface);
  --fg: var(--c-ink);
  --fg-muted: var(--c-secondary);
  --line: var(--c-line);
  --accent: var(--c-signal);
  --accent-hover: var(--c-signal-hover);
  --accent-soft: var(--c-signal-soft);

  /* 09 · Type families */
  --ff-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ff-sans: "Manrope", Arial, Helvetica, sans-serif;

  /* 10 · Type scale · desktop (mobile overrides below) */
  --fs-hero: 88px;      --lh-hero: 90px;
  --fs-h2: 56px;        --lh-h2: 60px;
  --fs-artwork: 40px;   --lh-artwork: 44px;
  --fs-h3: 24px;        --lh-h3: 32px;
  --fs-lead: 20px;      --lh-lead: 30px;
  --fs-body: 16px;      --lh-body: 24px;
  --fs-caption: 14px;   --lh-caption: 20px;
  --fs-eyebrow: 12px;   --lh-eyebrow: 16px;
  --ls-serif: -0.015em;
  --ls-eyebrow: 0.12em;
  --measure: 60ch;

  /* 11 · Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-6: 24px;
  --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px;

  /* 11 · Layout */
  --max-w: 1280px;
  --gutter: 32px;
  --col-gap: 24px;
  --section-y: 96px;
  --block-pad: 32px;
  --header-h: 80px;

  /* 11 · Radii */
  --r-control: 12px;
  --r-card: 16px;
  --r-visual: 24px;
  --r-pill: 999px;

  /* 15 · Controls */
  --control-h: 48px;
  --play-size: 64px;
  --tap-min: 44px;

  /* 17 · Motion */
  --t-hover: 160ms;
  --t-reveal: 240ms;
  --t-assemble: 640ms;
  --t-assemble-stagger: 80ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* 05 · Logo sizing */
  --logo-w: 200px;
}

@media (max-width: 1199px) {
  :root {
    --section-y: 64px;
    --col-gap: 24px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-hero: 48px;    --lh-hero: 50px;
    --fs-h2: 36px;      --lh-h2: 40px;
    --fs-artwork: 32px; --lh-artwork: 36px;
    --fs-h3: 22px;      --lh-h3: 30px;
    --fs-lead: 18px;    --lh-lead: 28px;

    --gutter: 20px;
    --col-gap: 16px;
    --section-y: 48px;
    --block-pad: 20px;
    --header-h: 64px;
    --play-size: 56px;
    --logo-w: 160px;
  }
}

/* Dark surface block (section 18) — opt-in per container */
[data-theme="dark"] {
  background: var(--bg); color: var(--fg);
  --bg: var(--c-dark-bg);
  --bg-elev: var(--c-dark-surface);
  --bg-muted: var(--c-dark-surface);
  --fg: var(--c-dark-text);
  --fg-muted: var(--c-dark-secondary);
  --line: #33372f;
  --accent-soft: #2c3120;
}