/* ==========================================================================
   THEME.CSS - Color Tokens, Theming Variables, and Typography
   Default Palette: MuvoMotion Monochrome (matched to the MuvoMotion spiral mark)
   bg: #09090b | surface: #131316 | surface2: #1a1a1f | border: #2a2a31 | accent: #ffffff
   ========================================================================== */

/* --- 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;
}

:root {
  /* --- Brand & Primary Accent Colors (MuvoMotion Monochrome: spiral mark white on ink) --- */
  --color-primary: #ffffff;             /* Mono Ink Primary (white) */
  --color-primary-hover: #f4f4f5;       /* Soft Light Mono Hover */
  --color-primary-active: #d4d4d8;      /* Deep Leaf Mono Active */
  --color-accent: #d4d4d8;              /* Secondary Mono Accent */
  --color-accent-subtle: #71717a;       /* Muted Neutral Zinc */
  --color-danger: #ef4444;              /* Destructive Red Token */
  --color-danger-hover: #dc2626;        /* Destructive Red Hover */
  --color-danger-bg: rgba(239, 68, 68, 0.15);
  --color-danger-text: #ffffff;         /* Crisp High-Contrast Text on Danger */

  /* --- Surface & Background Colors (Mono Canvas & Surfaces) --- */
  --bg-canvas: #09090b;                 /* Deep Neutral Tea Dark Canvas (#09090b) */
  --bg-dashboard: #131316;              /* Dark Mono Surface 1 (#131316) */
  --bg-panel: #1a1a1f;                  /* Elevated Mono Panel Surface 2 (#1a1a1f) */
  --bg-panel-hover: #232329;            /* Panel Hover Background */
  --bg-panel-active: #131316;           /* Panel Active Background */
  --bg-panel-inner: #131316;            /* Inner Item Background */
  --bg-panel-inner-hover: #232329;      /* Inner Item Hover (Distinct from #1a1a1f panel) */
  
  /* --- Badge & Tag Colors --- */
  --badge-prealpha-bg: #2a2a31;         /* Muted Mono Olive Pill */
  --badge-prealpha-text: #ffffff;       /* Bright Mono Pill Text */
  --badge-count-bg: #ffffff;           /* Solid Mono Fill Badge */
  --badge-count-text: #09090b;         /* Dark Text on Mono Badge */

  /* --- Timeline Track Accent Tokens --- */
  --track-video: #ffffff;               /* Video Track Bright Mono */
  --track-video-dark: #71717a;          /* Video Track Hidden Shade */
  --track-image: #f4f4f5;               /* Image Track Light Mono */
  --track-image-dark: #71717a;          /* Image Track Hidden Shade */
  --track-audio: #fafafa;               /* Audio Track Vibrant Luminous Mono (Bright & Clear) */
  --track-audio-dark: #8a8a93;          /* Audio Track Hidden Shade (Readable, Not Too Dark) */
  --track-adj: #d4d4d8;                 /* Adjustment Track Leaf Mono */
  --track-adj-dark: #5b5b64;            /* Adjustment Track Hidden Shade */
  --track-color: #e4e4e7;               /* Color / Solid Track Pale Lime Mono */
  --track-color-dark: #93939c;          /* Color Track Hidden Shade */
  --track-text: #f4f4f5;                /* Text Track Bright Luminous Lime-Mono (High Contrast) */
  --track-text-dark: #71717a;           /* Text Track Hidden Shade */

  /* --- Tech Grid Overlay Colors --- */
  --grid-line-thin: rgba(255, 255, 255, 0.18);
  --grid-line-major: rgba(255, 255, 255, 0.45);
  --grid-crosshair: #ffffff;
  --grid-dot: rgba(255, 255, 255, 0.55);

  /* --- Typography Colors --- */
  --text-primary: #ffffff;              /* Main Mono Brand Header/Accent */
  --text-secondary: #ffffff;            /* Fresh Mono Brand Secondary Text */
  --text-muted: #a1a1aa;                /* Soft Neutral Sage Secondary Text */
  --text-dim: #71717a;                  /* Earthy Muted Indicator */

  /* --- Flat Styling (No blur, no glow, no drop shadow) --- */
  --border-panel: #2a2a31;              /* Solid Panel & Divider Border */
  --border-subtle: rgba(255, 255, 255, 0.22);
  --border-focus: #ffffff;
  --shadow-panel: none;
  --shadow-button-glow: none;
  --shadow-active: none;

  /* --- Dedicated Keyframe Theme Tokens (100% Theme-Native & High-Contrast) --- */
  --kf-default-bg: #131316;            /* Dark surface core */
  --kf-default-border: #a1a1aa;        /* Soft sage outline */
  --kf-active-bg: #ffffff;             /* Fresh mono solid diamond */
  --kf-active-border: #09090b;         /* Sharp dark perimeter outline */
  --kf-selected-bg: #ffffff;           /* Luminous clean white diamond - 100% pops without foreign colors */
  --kf-selected-border: #09090b;       /* Solid dark border for needle-sharp definition */
  --kf-selected-dot: #ffffff;          /* White center anchor dot */

  /* --- Font Families --- */
  --font-brand: 'Cal Sans', sans-serif;
  --font-mono: 'Cal Sans', sans-serif;
}

/* 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 netral --border-focus (putih); klik mouse/tap tanpa
      keyboard tidak memunculkan ring.
   3. Seleksi teks UA (biru) → putih monokrom sesuai palet ink.
   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: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

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;
}