/* ==========================================================================
   THEME.CSS - Color Tokens, Theming Variables, and Typography
   Palette: MUVO DARK — interaction / motion / information / workspace
   ========================================================================== */

/* --- Cal Sans Regular / SemiBold Web Font --- */
@font-face {
  font-family: 'Cal Sans';
  src: url('../assets/fonts/CalSans-SemiBold.woff2') format('woff2'),
       url('../assets/fonts/CalSans-SemiBold.woff') format('woff'),
       url('../assets/fonts/CalSans-SemiBold.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --- Global Text Selection & Hidden Scrollbar UI --- */
*, *::before, *::after {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

*::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

*::-webkit-scrollbar-track {
  display: none !important;
  background: transparent !important;
}

*::-webkit-scrollbar-thumb {
  display: none !important;
}

/* MUVO DARK: exact user palette. Blue=interaction; lime=KEYFRAME & KURVA saja
   (aturan warna user 1.12.6): playhead, badge, marker teks, waveform, dsb.
   memakai blue/netral — lime tidak dipakai untuk apa pun selain penanda
   keyframe dan kurva/graph (termasuk preset thumb kurva).
   light text=information; neutral dark surfaces=workspace. */
:root {
  color-scheme: dark;
  --muvo-black: #0a0d12;
  --workspace: #0e1219;
  --panel: #151a23;
  --panel-elevated: #1b222d;
  --panel-hover: #202936;
  --border: #293240;
  --border-strong: #465368;
  --divider: #202833;
  --text-primary: #f2f5f9;
  --text-secondary: #b4becc;
  --text-tertiary: #97a3b3;
  --text-disabled: #525d6c;
  --muvo-blue: #6178ff;
  --blue-hover: #7186ff;
  --blue-active: #5067e6;
  --blue-soft: #202a52;
  --blue-glow: #6178ff;
  --muvo-lime: #b5c957;
  --lime-hover: #c2d66a;
  --lime-active: #9eaf45;
  --lime-soft: #29301a;
  --timeline-bg: #0b0f15;
  --timeline-header: #121720;
  --timeline-track: #171e28;
  --timeline-track-hover: #1d2632;
  --timeline-track-selected: #222d3b;
  --playhead: #6178ff;
  --keyframe: #b5c957;
  --canvas-bg: #080a0e;
  --canvas-checker-a: #10141a;
  --canvas-checker-b: #0c1015;
  --color-success: #65c98a;
  --color-warning: #e4b85f;
  --color-error: #e66b73;
  --color-info: #62a8e8;
  --selection: #6178ff;
  --selection-soft: #252e52;
  --focus: #7186ff;

  /* Legacy adapters: only roles, never a second palette. */
  --bg-canvas: var(--muvo-black);
  --bg-dashboard: var(--workspace);
  --bg-panel: var(--panel);
  --bg-panel-inner: var(--workspace);
  --bg-panel-hover: var(--panel-hover);
  --bg-panel-inner-hover: var(--panel-hover);
  --bg-panel-active: var(--blue-soft);
  --bg-surface-raised: var(--panel-elevated);
  --color-primary: var(--muvo-blue);
  --color-primary-hover: var(--blue-hover);
  --color-primary-active: var(--blue-active);
  --color-accent: var(--muvo-blue);
  --color-accent-subtle: var(--blue-soft);
  --color-on-accent: var(--muvo-black);
  --bg-accent: var(--muvo-blue);
  --color-danger: var(--color-error);
  --color-danger-hover: var(--color-error);
  --color-danger-text: var(--muvo-black);
  --color-danger-bg: rgba(230, 107, 115, .12);
  --color-error-bg: rgba(230, 107, 115, .12);
  --color-error-border: rgba(230, 107, 115, .35);
  --color-success-bg: rgba(101, 201, 138, .12);
  --color-success-border: rgba(101, 201, 138, .35);
  --color-warning-bg: rgba(228, 184, 95, .12);
  --color-warning-border: rgba(228, 184, 95, .35);
  --color-info-bg: rgba(98, 168, 232, .12);
  --text-muted: var(--text-secondary);
  --text-dim: var(--text-tertiary);
  --border-panel: var(--border);
  --border-subtle: var(--border);
  --border-focus: var(--focus);
  --badge-prealpha-bg: var(--panel-elevated);
  --badge-prealpha-text: var(--text-secondary);
  --badge-count-bg: var(--panel-elevated);
  --badge-count-text: var(--text-primary);
  --shadow-panel: none;
  --shadow-button-glow: none;
  --shadow-active: none;
  --grid-line-thin: rgba(180, 190, 204, .12);
  --grid-line-major: rgba(180, 190, 204, .25);
  --grid-crosshair: var(--text-secondary);
  --grid-dot: rgba(180, 190, 204, .4);
  /* 1.12.6 (aturan warna user): keyframe NONAKTIF putih, keyframe AKTIF lime.
     Seleksi tidak mengubah warna — dibedakan oleh skala + dot biru. */
  --kf-default-bg: #ffffff;
  --kf-default-border: rgba(10, 13, 18, 0.85);
  --kf-active-bg: var(--muvo-lime);
  --kf-active-border: rgba(10, 13, 18, 0.9);
  --kf-selected-bg: #ffffff;
  --kf-selected-border: rgba(10, 13, 18, 0.9);
  --kf-selected-dot: var(--muvo-blue);
  --font-brand: 'Cal Sans', sans-serif;
  --font-mono: 'Cal Sans', sans-serif;
  --track-video: var(--timeline-track);
  --track-video-dark: var(--timeline-bg);
  --track-image: var(--timeline-track);
  --track-image-dark: var(--timeline-bg);
  --track-audio: var(--timeline-track);
  --track-audio-dark: var(--timeline-bg);
  --track-adj: var(--timeline-track);
  --track-adj-dark: var(--timeline-bg);
  --track-color: var(--timeline-track);
  --track-color-dark: var(--timeline-bg);
  --track-text: var(--timeline-track);
  --track-text-dark: var(--timeline-bg);
}

/* Optional Alternate Themes (Full 100% token coverage for all windows, containers & components) */

/* ===================================================================
   v1.4.2 — GLOBAL INTERACTION NEUTRALIZER (permintaan user: hilangkan
   "biru-biru" saat klik elemen di SELURUH app).
   1. Tap highlight UA (biru transparan di Android/WebView) → transparan.
   2. Outline fokus UA (biru) → hanya muncul untuk :focus-visible dan
      memakai token --border-focus (Blue Hover); klik mouse/tap tanpa
      keyboard tidak memunculkan ring.
   3. Seleksi teks UA (biru) → selection MUVO DARK.
   4. Kontrol & nilai transform tidak bisa ter-seleksi/di-long-press
      (sumber "biru" pada badge rotasi & kartu nilai).
   =================================================================== */
*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}

::selection {
  background: var(--selection);
  color: var(--color-on-accent);
}

button,
summary,
label,
[role="button"],
.transform-val-card,
.transform-val-num,
.transform-val-label,
.rotate-center-badge,
.rotate-deg-val,
.rotate-turns-count,
.timeline-beatmark-item,
.timeline-current-time-badge,
.jog-wheel-container,
.effects-axis-badge,
.mv-tabbar-btn {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Elevated UI is neutral. Named scopes beat legacy route colour defaults. */
body .modal-card, body .popover-card, body .context-menu-card { background-color: var(--panel-elevated); }
body .modal-header { background-color: var(--panel-elevated); }
body .modal-title, body .brand-title, body .settings-category-title,
body .modal-form-label, body .layer-action-label, body .transform-val-num,
body .rotate-deg-val, body .editor-title-input { color: var(--text-primary); }
body .custom-dropdown-label { color: var(--text-primary); }
body .modal-btn-create:active, body .modal-btn-primary:active { color: var(--text-primary); }
/* Native focus remains intentional; platform tap-flashes stay suppressed. */
input, select, progress { accent-color: var(--muvo-blue); }
/* 1.13.7: cincin fokus hanya untuk tombol/tautan (keyboard). Semua input/select/textarea
   memakai isyarat fokus tunggal (border aksen) di src/styles/ios-controls.css, tanpa outline UA. */
body button:focus-visible, body a:focus-visible, body [role="button"]:focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: 2px;
}
body input:focus-visible, body select:focus-visible, body textarea:focus-visible { outline: none !important; }
:root body button:disabled, :root body input:disabled, :root body select:disabled {
  color: var(--text-disabled) !important;
  background-color: var(--panel) !important;
  border-color: var(--border) !important;
  opacity: 1;
  cursor: not-allowed;
}