/* =========================================================
   MusoKit design system v2 : tokens + base components
   Plain CSS, no build step. Load once, before page CSS.
   Theme: follows the OS by default; <html data-theme="light|dark"> overrides.
   ========================================================= */

/* ---------- Fonts (self-host woff2, latin subset, font-display: swap) ---------- */
/* Place files in /fonts/. Variable fonts keep it to 3 files (~110 KB total). */
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/BricolageGrotesque-var.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/InstrumentSans-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  /* Brand (fixed in both themes) */
  --coral: #FF6B35;      /* primary action, active, playhead. Text on it = ink */
  --ember: #B83E14;      /* coral for text/links on light grounds (5.3:1 on cream) */
  --butter: #FFC857;     /* accent beat, tempo names, hi-hat steps */
  --ink-fixed: #1B1F2A;  /* text on coral / butter, always */

  /* Light theme (default) */
  --bg: #FAF7F2;         /* Cream */
  --surface: #FFFFFF;    /* Paper */
  --sunk: #F1EBE1;       /* Oat: tonal buttons, tracks, fields */
  --line: #E3DACB;       /* Linen */
  --text: #1B1F2A;       /* Ink */
  --text-2: #555A66;     /* Graphite, 6.5:1 */
  --tick: #D5CBBA;
  --tick-major: #8A8378;
  --tuned: #0F7A52;      /* in-tune ONLY */
  --tuned-soft: rgba(15,122,82,.10);
  --on-tuned: #FFFFFF;
  --coral-soft: rgba(255,107,53,.16);
  --link: var(--ember);
  --focus: #1B1F2A;
  --step-off: #F1EBE1;
  --step-off-beat: #E3DACB;
  --shadow-card: 0 24px 48px -32px rgba(27,31,42,.35);

  /* Type */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --fs-note: clamp(120px, 38vw, 168px); /* tuner note, line-height .85 */
  --fs-display: clamp(44px, 7.5vw, 104px); /* line-height .95, tracking -0.045em */
  --fs-h1: clamp(32px, 4vw, 56px);
  --fs-h2: clamp(24px, 2.6vw, 34px);
  --fs-h3: 20px;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-label: 13px;      /* 600, uppercase, +0.06em */
  --fs-num-xl: clamp(96px, 29vw, 168px); /* BPM, mono 500, tracking -0.06em */

  /* Space (4px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --gutter: 16px;        /* phones; 20px >= 400px; 64px desktop */

  /* Shape */
  --r-control: 12px; --r-tile: 20px; --r-card: 28px; --r-pill: 999px;

  /* Touch */
  --tap: 48px;           /* standard control height */
  --tap-min: 44px;       /* nothing tappable below this */
  --play: 72px;

  /* Motion */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --t-fast: 90ms; --t-med: 160ms;

  /* Safe areas (standalone / TWA full screen) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  color-scheme: light;
}

/* Dark theme: OS preference unless user forced light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12151D; --surface: #1B1F2A; --sunk: #262B39; --line: #363C4D;
    --text: #F3EEE6; --text-2: #A7A39C; --tick: #3E4556; --tick-major: #6F7383;
    --tuned: #3DDC97; --tuned-soft: rgba(61,220,151,.14); --on-tuned: #12151D;
    --link: var(--coral); --focus: var(--coral);
    --step-off: #1F2430; --step-off-beat: #2C3242;
    --shadow-card: 0 24px 48px -32px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #12151D; --surface: #1B1F2A; --sunk: #262B39; --line: #363C4D;
  --text: #F3EEE6; --text-2: #A7A39C; --tick: #3E4556; --tick-major: #6F7383;
  --tuned: #3DDC97; --tuned-soft: rgba(61,220,151,.14); --on-tuned: #12151D;
  --link: var(--coral); --focus: var(--coral);
  --step-off: #1F2430; --step-off-beat: #2C3242;
  --shadow-card: 0 24px 48px -32px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-body)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--link); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.muted { color: var(--text-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Wordmark: musok + dotless i + t, coral dot ---------- */
/* <span class="wordmark" role="img" aria-label="musokit">musok<span class="wm-i">ı</span>t</span> */
.wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.04em; line-height: 1; display: inline-flex; align-items: baseline; color: var(--text); }
.wm-i { position: relative; display: inline-block; line-height: 1; }
.wm-i::after { content: ""; position: absolute; left: 50%; top: .1em; width: .2em; height: .2em; margin-left: -.1em; border-radius: 50%; background: var(--coral); }

/* ---------- Buttons ---------- */
.btn { height: 56px; padding: 0 26px; border: 0; border-radius: var(--r-pill); font-weight: 600; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast); }
.btn:active { transform: scale(.97); }
.btn:hover { filter: brightness(.94); }
.btn-primary { background: var(--coral); color: var(--ink-fixed); font-weight: 700; } /* NEVER white text on coral */
.btn-secondary { background: var(--text); color: var(--bg); }
.btn-tonal { background: var(--sunk); color: var(--text); }
.btn-outline { background: transparent; color: var(--text); border: 2px solid var(--text); }
.btn[disabled] { background: var(--sunk); color: var(--text-2); opacity: .7; cursor: not-allowed; filter: none; transform: none; }
.btn-block { width: 100%; height: 64px; font-size: 19px; }
.icon-btn { width: var(--tap); height: var(--tap); border: 0; border-radius: 14px; background: transparent; color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
.icon-btn.tonal { background: var(--sunk); }
.play-btn { width: var(--play); height: var(--play); border: 0; border-radius: 50%; background: var(--coral); color: var(--ink-fixed); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px -10px rgba(184,62,20,.6); }
.play-btn[aria-pressed="true"] { background: var(--text); color: var(--coral); }

/* ---------- Segmented control (role=radiogroup, arrow keys move) ---------- */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 3px; padding: 3px; background: var(--sunk); border-radius: 16px; }
.seg > button { height: 46px; border: 0; border-radius: 13px; background: transparent; color: var(--text-2); font-weight: 500; }
.seg > button[aria-checked="true"], .seg > button[aria-selected="true"] { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: 0 1px 2px rgba(27,31,42,.12), 0 4px 12px -4px rgba(27,31,42,.18); }
.seg.seg-strong > button[aria-checked="true"] { background: var(--coral); color: var(--ink-fixed); box-shadow: none; }

/* ---------- Chips ---------- */
.chip { height: var(--tap-min); padding: 0 16px; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--text); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.tag { height: 34px; padding: 0 13px; border-radius: var(--r-pill); background: var(--sunk); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.tag.butter { background: var(--butter); color: var(--ink-fixed); font-weight: 700; }
.tag.tuned { background: var(--tuned); color: var(--on-tuned); font-weight: 700; } /* always with a check icon */

/* ---------- Slider (native range, restyled) ---------- */
.range { -webkit-appearance: none; appearance: none; background: transparent; width: 100%; height: 48px; margin: 0; --p: 50%; }
.range::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--coral) var(--p), var(--line) var(--p)); }
.range::-moz-range-track { height: 10px; border-radius: 5px; background: var(--line); }
.range::-moz-range-progress { height: 10px; border-radius: 5px; background: var(--coral); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -11px; border-radius: 50%; background: #fff; border: 3px solid var(--ink-fixed); box-shadow: 0 2px 8px rgba(27,31,42,.2); }
.range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--ink-fixed); }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 18px; }
.card.tool { box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 20px; }
.card.quick { background: var(--sunk); border: 0; border-radius: 24px; padding: 22px; }
.tile { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-height: 112px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-tile); color: var(--text); text-decoration: none; }
.row-link { display: flex; align-items: center; gap: 14px; height: 72px; padding: 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-tile); color: var(--text); text-decoration: none; }
.icon-tile { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--sunk); display: flex; align-items: center; justify-content: center; }

/* ---------- Tool header ---------- */
.tool-header { position: sticky; top: 0; z-index: 10; height: calc(64px + var(--safe-top)); padding: var(--safe-top) calc(8px + var(--safe-right)) 0 calc(4px + var(--safe-left)); display: flex; align-items: center; gap: 2px; background: var(--bg); }
.tool-header h1 { flex: 1; font-size: 21px; letter-spacing: -0.01em; }

/* ---------- Bottom nav (< 960px) ---------- */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); padding: 6px calc(6px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(6px + var(--safe-left)); background: var(--surface); border-top: 1px solid var(--line); }
.bottom-nav a { height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-2); text-decoration: none; font-size: 12.5px; font-weight: 500; }
.bottom-nav a .pill { width: 56px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.bottom-nav a[aria-current="page"] { color: var(--text); font-weight: 700; }
.bottom-nav a[aria-current="page"] .pill { background: var(--coral); color: var(--ink-fixed); }
body.has-bottom-nav { padding-bottom: calc(80px + var(--safe-bottom)); }
@media (min-width: 960px) { .bottom-nav { display: none; } body.has-bottom-nav { padding-bottom: 0; } }

/* ---------- Beat pulse ---------- */
@keyframes mk-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,107,53,.5); } 20% { transform: scale(1.16); } 100% { transform: scale(1); box-shadow: 0 0 0 22px rgba(255,107,53,0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}