/* === JitterFree — Tweak overlays ===
   Three expressive axes that bundle many decisions each:
     [data-mood]      — palette + canvas surface + accent
     [data-material]  — radii, borders, shadows, density
     [data-rhythm]    — typography family, weights, label casing
   Loaded AFTER styles.css so attribute selectors win on tie. */

/* ─────────────────────────────────────────────────────────────────────
   MOOD
   ───────────────────────────────────────────────────────────────────── */

/* ── Cobalt (default — explicit so swatch matches) ── */
html[data-mood="cobalt"] body { background: var(--bg-0) !important; }

/* ── Studio: dark zinc canvas, electric blue accent ── */
html[data-mood="studio"] {
  --bg-0: #131316;
  --bg-1: #1c1c20;
  --bg-2: #232328;
  --bg-3: #2c2c32;
  --bg-4: #383840;
  --line-1: #2a2a30;
  --line-2: #3a3a42;
  --line-3: #58586a;

  --fg-0: #f4f4f5;
  --fg-1: #e4e4e7;
  --fg-2: #a1a1aa;
  --fg-3: #71717a;
  --fg-4: #52525b;
  --fg-5: #3f3f46;

  --accent: #6b8eff;
  --accent-hi: #88a3ff;
  --accent-lo: #4f73e8;
  --accent-soft: rgba(107, 142, 255, 0.14);
  --accent-softer: rgba(107, 142, 255, 0.07);
  --accent-ring: rgba(107, 142, 255, 0.40);

  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 10px rgba(0,0,0,0.35), 0 12px 30px rgba(0,0,0,0.5);
  --shadow-3: 0 18px 50px rgba(0,0,0,0.6);
  color-scheme: dark;
}
html[data-mood="studio"] body { background: var(--bg-0) !important; color: var(--fg-0); }
html[data-mood="studio"] .stage { background: #0e0e11; }
html[data-mood="studio"] .stage::before {
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
}
html[data-mood="studio"] .stage-frame { background: #1a1a1e; border-color: #2a2a30; }
html[data-mood="studio"] .stage-canvas { filter: none; }
html[data-mood="studio"] .layer-thumb { background: #2a2a30; }
html[data-mood="studio"] .modal-backdrop { background: rgba(0,0,0,0.55); }
html[data-mood="studio"] .opt-segment.selected { background: var(--bg-1); }
html[data-mood="studio"] .kbd { background: var(--bg-2); }
html[data-mood="studio"] .preset-thumb-shape { background: var(--fg-3); }
html[data-mood="studio"] .preset-card { background: var(--bg-3); }
html[data-mood="studio"] .preset-name { background: var(--bg-2); }
html[data-mood="studio"] .toast { background: #f4f4f5; color: #18181b; }
html[data-mood="studio"] .tl-col-tracks { background: #1a1a1e; }
html[data-mood="studio"] .slider::-webkit-slider-thumb { background: #1c1c20; }
html[data-mood="studio"] .slider::-moz-range-thumb { background: #1c1c20; }
html[data-mood="studio"] .handle { background: #1c1c20; }

/* ── Sunburst: warm cream canvas, terra-orange accent ── */
html[data-mood="sunburst"] {
  --bg-0: #f6efe1;
  --bg-1: #fffaf0;
  --bg-2: #f0e7d3;
  --bg-3: #e8dcc1;
  --bg-4: #d8c8a7;
  --line-1: #e6dabf;
  --line-2: #d2c19c;
  --line-3: #a08960;

  --fg-0: #211a0f;
  --fg-1: #2c2415;
  --fg-2: #5e4f33;
  --fg-3: #806c4a;
  --fg-4: #a99072;
  --fg-5: #c8b292;

  --accent: #d8511e;
  --accent-hi: #ef6938;
  --accent-lo: #b13e10;
  --accent-soft: rgba(216, 81, 30, 0.14);
  --accent-softer: rgba(216, 81, 30, 0.07);
  --accent-ring: rgba(216, 81, 30, 0.35);
}
html[data-mood="sunburst"] body { background: var(--bg-0) !important; }
html[data-mood="sunburst"] .stage::before {
  background-image: repeating-linear-gradient(
    45deg, rgba(94,79,51,0.06) 0 1px, transparent 1px 14px
  );
  background-size: auto;
}

/* ── Graphite: monochrome blueprint, no accent color ── */
html[data-mood="graphite"] {
  --bg-0: #ededed;
  --bg-1: #ffffff;
  --bg-2: #f4f4f4;
  --bg-3: #e4e4e4;
  --bg-4: #d4d4d4;
  --line-1: #dcdcdc;
  --line-2: #c0c0c0;
  --line-3: #808080;

  --fg-0: #0a0a0a;
  --fg-1: #1a1a1a;
  --fg-2: #3a3a3a;
  --fg-3: #6a6a6a;
  --fg-4: #999999;
  --fg-5: #c0c0c0;

  --accent: #0a0a0a;
  --accent-hi: #2a2a2a;
  --accent-lo: #000000;
  --accent-soft: rgba(10, 10, 10, 0.07);
  --accent-softer: rgba(10, 10, 10, 0.035);
  --accent-ring: rgba(10, 10, 10, 0.22);
}
html[data-mood="graphite"] body { background: var(--bg-0) !important; }
html[data-mood="graphite"] .stage::before {
  background-image:
    linear-gradient(rgba(10,10,10,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,0.06) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
}
html[data-mood="graphite"] .tl-block.intro,
html[data-mood="graphite"] .tl-block.outro {
  background: repeating-linear-gradient(
    -45deg, #0a0a0a 0 6px, #2a2a2a 6px 12px
  );
}

/* ─────────────────────────────────────────────────────────────────────
   MATERIAL
   ───────────────────────────────────────────────────────────────────── */

/* ── Refined (default — current values) — explicit for clarity ── */
html[data-material="refined"] { /* uses base values */ }

/* ── Tactile: bigger radii, softer shadows, more breathing room ── */
html[data-material="tactile"] {
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-1: 0 2px 6px rgba(24,24,27,0.06), 0 4px 12px rgba(24,24,27,0.04);
  --shadow-2: 0 6px 18px rgba(24,24,27,0.08), 0 20px 48px rgba(24,24,27,0.12);
  --shadow-3: 0 24px 60px rgba(24,24,27,0.22);
}
html[data-material="tactile"] .btn { padding: 9px 14px; border-radius: 10px; }
html[data-material="tactile"] .btn.icon-only { padding: 9px 10px; }
html[data-material="tactile"] .layer-row { padding: 9px 10px; gap: 10px; border-radius: 10px; }
html[data-material="tactile"] .layer-thumb { width: 32px; height: 26px; border-radius: 6px; }
html[data-material="tactile"] .layers-add { padding: 14px; }
html[data-material="tactile"] .stage-frame { border-radius: 18px; }
html[data-material="tactile"] .preset-card { border-width: 1.5px; border-radius: 10px; }
html[data-material="tactile"] .side-section-body { padding: 4px 14px 18px; gap: 16px; }
html[data-material="tactile"] .tl-block { border-radius: 6px; }
html[data-material="tactile"] .modal { border-radius: 18px; }
html[data-material="tactile"] .toast { border-radius: 10px; padding: 11px 16px; }
html[data-material="tactile"] .slider::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7.5px; }
html[data-material="tactile"] .slider::-moz-range-thumb { width: 18px; height: 18px; }
html[data-material="tactile"] .slider::-webkit-slider-runnable-track { height: 5px; }
html[data-material="tactile"] .slider::-moz-range-track { height: 5px; }
html[data-material="tactile"] .brand-mark { border-radius: 8px; width: 28px; height: 28px; }

/* ── Edged: sharp corners, hard borders, no shadows ── */
html[data-material="edged"] {
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 2px;
  --radius-xl: 2px;
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: 0 0 0 1px var(--fg-0);
  --line-1: var(--fg-3);
  --line-2: var(--fg-2);
}
html[data-material="edged"] .btn,
html[data-material="edged"] .layer-row,
html[data-material="edged"] .preset-card,
html[data-material="edged"] .stage-frame,
html[data-material="edged"] .format-card,
html[data-material="edged"] .modal,
html[data-material="edged"] .toast,
html[data-material="edged"] .numeric-input,
html[data-material="edged"] .select,
html[data-material="edged"] .kbd,
html[data-material="edged"] .transport,
html[data-material="edged"] .zoom-ctrl,
html[data-material="edged"] .opt-segments,
html[data-material="edged"] .opt-segment {
  border-radius: 0 !important;
}
html[data-material="edged"] .btn { border-width: 1.5px; }
html[data-material="edged"] .stage-frame { border-width: 1.5px; border-color: var(--fg-0); }
html[data-material="edged"] .layer-row { border-radius: 0; }
html[data-material="edged"] .layer-row.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
html[data-material="edged"] .preset-card.selected { box-shadow: inset 0 0 0 2px var(--accent); }
html[data-material="edged"] .brand-mark { border-radius: 0; }
html[data-material="edged"] .layer-thumb { border-radius: 0; border-color: var(--fg-2); }
html[data-material="edged"] .slider::-webkit-slider-thumb { border-radius: 0; }
html[data-material="edged"] .slider::-moz-range-thumb { border-radius: 0; }
html[data-material="edged"] .slider::-webkit-slider-runnable-track { border-radius: 0; }
html[data-material="edged"] .slider::-moz-range-track { border-radius: 0; }
html[data-material="edged"] .handle { border-radius: 0; }
html[data-material="edged"] .tl-block { border-radius: 0; }
html[data-material="edged"] .tl-playhead-head { border-radius: 0; }
html[data-material="edged"] .progress-track { border-radius: 0; }

/* ─────────────────────────────────────────────────────────────────────
   RHYTHM (typography)
   ───────────────────────────────────────────────────────────────────── */

/* ── Editorial (default) ── */
html[data-rhythm="editorial"] { /* uses base */ }

/* ── Console: system mono, lowercase, technical ── */
html[data-rhythm="console"] {
  --font-sans: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --tracking-tight: 0;
}
html[data-rhythm="console"] body {
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace !important;
}
html[data-rhythm="console"] .brand { font-weight: 500; letter-spacing: -0.02em; }
html[data-rhythm="console"] .section-title,
html[data-rhythm="console"] .preset-group-label,
html[data-rhythm="console"] .side-section-title,
html[data-rhythm="console"] .tl-label-row-head,
html[data-rhythm="console"] .anim-tab-label {
  text-transform: lowercase;
  letter-spacing: 0.02em;
  font-weight: 500;
  font-size: 10.5px;
}
html[data-rhythm="console"] .side-section-title-dot { display: none; }
html[data-rhythm="console"] .btn { font-weight: 400; }
html[data-rhythm="console"] .btn.primary { font-weight: 500; }
html[data-rhythm="console"] .tl-block { font-weight: 400; font-size: 10.5px; }
html[data-rhythm="console"] .preset-name { font-weight: 400; }
html[data-rhythm="console"] .field-label { font-weight: 400; }
html[data-rhythm="console"] .stage-watermark { text-transform: none; letter-spacing: 0.04em; }

/* ── Display: bigger, heavier, tight tracking, mixed case section titles ── */
html[data-rhythm="display"] {
  --tracking-tight: -0.028em;
}
html[data-rhythm="display"] .brand { font-weight: 700; font-size: 16px; letter-spacing: -0.03em; }
html[data-rhythm="display"] .section-title,
html[data-rhythm="display"] .preset-group-label,
html[data-rhythm="display"] .side-section-title,
html[data-rhythm="display"] .tl-label-row-head,
html[data-rhythm="display"] .anim-tab-label {
  text-transform: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.02em;
}
html[data-rhythm="display"] .side-section-summary { font-size: 12px; }
html[data-rhythm="display"] .btn { font-weight: 600; letter-spacing: -0.01em; font-size: 13px; }
html[data-rhythm="display"] .modal-title { font-size: 18px; letter-spacing: -0.03em; font-weight: 700; }
html[data-rhythm="display"] .layer-name { font-weight: 600; }
html[data-rhythm="display"] .tl-block { font-weight: 600; font-size: 11px; letter-spacing: -0.01em; }
html[data-rhythm="display"] .preset-name { font-weight: 600; font-size: 10px; }
html[data-rhythm="display"] .format-card .format-name { font-size: 14px; letter-spacing: -0.02em; }

/* ─────────────────────────────────────────────────────────────────────
   Cross-axis polish — shared
   ───────────────────────────────────────────────────────────────────── */
/* The stage-frame inner background follows bg-1 so it doesn't look pasted-on
   in dark mode. */
html[data-mood="studio"] .stage-canvas { background: #1a1a1e; }

/* When studio + edged, soften the watermark contrast */
html[data-mood="studio"] .stage-watermark { color: var(--fg-3); }