/* ============================================================
   Score → MML · Design Tokens · v3 (2026-05-17)
   ------------------------------------------------------------
   STATUS: this file is ALREADY linked from corrector.html as the
   FIRST stylesheet (before corrector.css).

   PHILOSOPHY (v3):
     "Calm chrome, working workspace."

   - Chrome (topbar, toolbar, panels, status, popups' wrapper):
     slate neutrals + ONE amber action accent. Restrained.
   - Score canvas overlays (markers, pulse, accidental labels,
     voice colours, grade colours, rubber-band): UNCHANGED.
     These are user-tuned & functional, not decorative.
   - Timeline: compact (24px lanes), DAW-style voice gradients
     retained, but pink chrome (border-left, title glow) dropped.
   - Popups' chrome (chord neutral, glyph orange) keeps its
     semantic colour but in token form.

   This file owns:
     :root tokens
     html/body defaults
     .btn .icon-btn .kbd-chip .pill .tabs .panel-head .mode-pill
     .app-topbar .app-statusbar .slider input

   This file does NOT redefine any .marker, .barline-overlay,
   .free-glyph-box, .score-rubber, .tl-rubber, .tl-note, .acc-label,
   .ghost-marker, .ghost-label, .rhythm-warning, .ghost-barline,
   .measure-highlight, .barline-label, .debug-line, .staff-overlay,
   .playback-cursor, #chord-popup, #glyph-popup rule.
   Those live in corrector.css and stay there. See PRESERVED_VALUES.md.
   ============================================================ */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");

:root{
  /* Surfaces */
  --bg-0: #0a0c10;       /* canvas surround */
  --bg-1: #0e1118;       /* app shell */
  --bg-2: #141822;       /* panels */
  --bg-3: #1b2030;       /* raised: buttons, inputs */
  --bg-4: #232a3c;       /* button hover */
  --line:        #262c3a;
  --line-strong: #323a4f;

  /* Ink */
  --ink-0: #eef1f7;
  --ink-1: #b9c0cf;
  --ink-2: #7f8898;
  --ink-3: #535b6c;

  /* Accent (action only) */
  --accent:      #f3a25b;
  --accent-dim:  #a87246;
  --accent-soft: rgba(243,162,91,.14);

  /* Status semantic */
  --ok:    #7cd454;
  --warn:  #ffae3a;
  --danger:#ff5d5d;

  /* Type */
  --font-sans: "Pretendard Variable", Pretendard, ui-sans-serif, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Type scale (UI chrome only — does NOT apply to .acc-label or popup contents) */
  --fs-display: 18px;    /* topbar brand, page title */
  --fs-title:   14px;    /* section headers, panel heads */
  --fs-body:    13px;    /* default UI */
  --fs-label:   12px;    /* form labels, toolbar buttons */
  --fs-meta:    11.5px;  /* status bar, helper text */
  --fs-kbd:     10.5px;  /* keyboard hints */

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Radius */
  --r-sm: 4px;
  --r-md: 7px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* Shadow */
  --shadow-sm: 0 2px 6px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 56px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
}

/* ============================================================
   GLOBAL DEFAULTS
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  background: var(--bg-1);
  color: var(--ink-0);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.mono, code, kbd, .kbd-chip {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   COMPONENT PRIMITIVES
   ============================================================ */

.btn{
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 12px; border-radius: var(--r-md);
  background: var(--bg-3); border:1px solid var(--line-strong);
  color: var(--ink-0); font-size: var(--fs-label); cursor:pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--bg-4); }
.btn:active { transform: translateY(0.5px); }

.btn.primary{
  background: linear-gradient(180deg, #f7b06d, #e08840);
  border-color: #bf6c2f;
  color: #1c1004;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.4);
}
.btn.primary:hover { filter: brightness(1.06); }

.btn.ghost { background: transparent; border-color: var(--line); }
.btn.ghost:hover { background: var(--bg-3); }

.btn.success {           /* for #btn-download (retokened green) */
  background: rgba(124,212,84,.12);
  border-color: rgba(124,212,84,.4);
  color: #b6e4a4;
}
.btn.success:hover { background: rgba(124,212,84,.2); }

.btn.danger {
  background: rgba(255,93,93,.12);
  border-color: rgba(255,93,93,.35);
  color: #ffb3b3;
}

.icon-btn{
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent;
  border-radius: var(--r-md); color: var(--ink-2); cursor:pointer;
}
.icon-btn:hover { background: var(--bg-3); color: var(--ink-0); }

.kbd-chip{
  display:inline-block;
  font-family: var(--font-mono); font-size: var(--fs-kbd);
  padding: 1px 5px; border-radius: 4px;
  background: #0a0d14; border:1px solid var(--line); color: var(--ink-1);
  line-height: 1.4;
}

.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--bg-2); border:1px solid var(--line);
  color: var(--ink-1); font-size: var(--fs-label);
}
.pill .dot{ width:6px; height:6px; border-radius:50%; background: var(--ok); }

/* App shell */
.app-topbar{
  height:48px; display:flex; align-items:center; gap:14px;
  padding: 0 var(--space-4);
  background: linear-gradient(180deg, #11151f, #0d1018);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.app-statusbar{
  height:30px; display:flex; align-items:center; gap:18px;
  padding: 0 var(--space-4);
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  font-size: var(--fs-meta); color: var(--ink-2);
  flex-shrink: 0;
}
.app-statusbar .sep { width:1px; height:14px; background: var(--line); }

.tabs{ display:flex; gap:2px; background: var(--bg-2); padding:3px; border-radius: 8px; border:1px solid var(--line); }
.tabs .tab{ padding: 5px 12px; border-radius: 6px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.tabs .tab.is-active{ background: var(--bg-3); color: var(--ink-0); box-shadow: inset 0 0 0 1px var(--line-strong); }

.panel-head{
  display:flex; align-items:center; gap:8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.panel-head h4{
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); margin: 0;
}

.mode-pill{
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  background: var(--accent-soft); color: var(--accent); border:1px solid var(--accent-dim);
}
.mode-pill.barline{ background: rgba(255,108,122,.16); color: #ffd0d4; border-color: rgba(255,108,122,.4); }
.mode-pill.add{     background: rgba(106,163,255,.16); color: #cfe2ff; border-color: rgba(106,163,255,.4); }
.mode-pill.glyph{   background: rgba(255,153,51,.16); color: #ffcc88; border-color: rgba(255,153,51,.4); }

.slider{
  appearance: none; height: 4px; border-radius: 99px;
  background: var(--bg-3); outline: none; width: 120px;
}
.slider::-webkit-slider-thumb{
  appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2px solid #1a1004; cursor: pointer;
}

/* Inputs — scope to chrome (not popups; corrector.js sets inline styles) */
.app-topbar input[type="number"],
.app-topbar input[type="text"],
.app-topbar select,
#mode-panel input[type="number"],
#mode-panel input[type="text"],
#mode-panel select,
#toolbar input[type="number"],
#toolbar input[type="range"],
#upload-bar input[type="number"],
#upload-bar input[type="file"]{
  background: #0a0d14;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink-0);
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.app-topbar input:focus,
#mode-panel input:focus,
#toolbar input:focus,
#upload-bar input:focus{
  outline: none;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 2px var(--accent-soft);
}