/* Studio Labs Online — shared brand foundation. Every page/component uses these tokens. */
/* Fonts are loaded via <link> in each page head (an @import here is discovered
   late, which made every face pop in after first paint). */

:root {
  /* color — LOCKED */
  --accent: #4C1D95;      /* Ink violet — primary */
  --accent-ink: #3a1573;  /* darker violet for hovers */
  --soft: #8B5CF6;        /* Soft violet — DARK-surface accent ONLY (never as text on white) */
  --soft-text: #A78BFA;   /* Soft violet for SMALL text on dark surfaces (AA contrast) */
  --ink: #12151b;         /* Graphite — text on light / dark-band background */
  --ink-2: #191d26;       /* Dark card on the graphite band */
  --ink-line: #262b35;    /* hairline on dark */
  --ink-soft: #454b56;    /* secondary text on light */
  --muted: #7b8492;       /* tertiary / meta text */
  --gray: #eef1f5;        /* Cool light surface */
  --paper: #fbfcfd;       /* page background (cool white, NOT warm cream) */
  --surface: #ffffff;     /* cards on light */
  --line: #dfe3ea;        /* hairline on light */

  /* type — LOCKED role-based system */
  --display: 'Bricolage Grotesque', system-ui, sans-serif;  /* logotype + brand/product names */
  --head: 'Schibsted Grotesk', system-ui, sans-serif;       /* headlines */
  --body: 'Inter', system-ui, sans-serif;                   /* body */
  --mono: 'JetBrains Mono', ui-monospace, monospace;        /* technical metadata */

  --r-tile: 11px;         /* logo tile radius on a 40-box */
  --r-card: 16px;
  --r-btn: 10px;
  --shadow: 0 18px 44px rgba(18,21,27,.10);
  --shadow-dark: 0 24px 60px rgba(0,0,0,.35);
  --maxw: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; line-height: 1.5; }
a { color: inherit; }
img, svg { max-width: 100%; }
[id] { scroll-margin-top: 84px; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
section { padding: 84px 0; }

/* eyebrow / kicker — technical metadata label */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* headings */
h1, h2, h3 { font-family: var(--head); font-weight: 700; letter-spacing: -0.025em; line-height: 1.04; color: var(--ink); }
h1 { font-size: clamp(36px, 5vw, 56px); }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: 20px; letter-spacing: -0.01em; }

/* the wordmark uses the display face */
.wordmark { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }
.wordmark .pd { color: var(--accent); }         /* the violet period */

/* buttons */
.btn { font-family: var(--body); font-size: 15px; font-weight: 600; padding: 12px 22px; border-radius: var(--r-btn); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: none; transition: transform .12s ease, background .12s ease; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); }
.btn-ghost { background: transparent; color: var(--ink); padding-left: 4px; }
.btn:active { transform: translateY(1px); }

/* small solid badges (flat — no transparency) */
.tag { display: inline-block; font-family: var(--body); font-weight: 600; font-size: 12px; padding: 6px 12px; border-radius: 8px; }
.tag-solid { background: var(--soft); color: #16121f; }      /* on dark surfaces */
.tag-quiet { background: #2a2f3c; color: #cbb8f7; }          /* on dark surfaces */

.mono { font-family: var(--mono); }

/* dark band */
.band-dark { background: var(--ink); color: #e7eaef; }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .eyebrow { color: var(--soft); }
.band-dark .eyebrow .dot { background: var(--soft); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}