/* =================================================================
   Maestro Creative — design tokens
   Switch theme: document.documentElement[data-theme="light|dark"]
   Preference: data-theme-pref="light|dark|system" (system follows OS)
   ================================================================= */

/* ---- Shared (brand, layout, typography) -------------------------------- */
:root {
  --brand-1: #ff5a36;
  --brand-1-h: #ff7551;
  --brand-2: #7c5cff;
  --brand-3: #00d4a8;
  --brand-warn: #ffb43b;
  --brand-error: #ff5876;
  --gradient-hero: linear-gradient(135deg, #ff5a36 0%, #ff2db1 50%, #7c5cff 100%);
  --gradient-ai: linear-gradient(135deg, #7c5cff 0%, #00d4a8 100%);

  --rail-w: 56px;
  --tools-w: 64px;
  --topbar-h: 52px;
  --menubar-h: 36px;
  --statusbar-h: 28px;
  --panel-w: 320px;
  --panel-w-left: var(--panel-w);
  --panel-w-right: var(--panel-w);
  --mc-dock-user-height: 280px;
  --mc-dock-split-ratio: 50%;

  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;

  --t-fast: 120ms cubic-bezier(.2, .9, .2, 1);
  --t-mid: 220ms cubic-bezier(.2, .9, .2, 1);

  --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 32px;
  --fs-4xl: 48px;
}

/* ---- Dark theme -------------------------------------------------------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg-0: #0c1220;
  --bg-1: #131a2b;
  --bg-2: #1a2338;
  --bg-3: #243352;
  --bg-4: #2a3a52;
  --bg-overlay: rgba(12, 18, 32, 0.88);

  --line-1: #2a3a52;
  --line-2: #3d4f6a;
  --line-strong: #5c6b82;

  --text-0: #eef2f8;
  --text-1: #d8e0ec;
  --text-2: #a8b4c8;
  --text-3: #7a8aa3;
  --text-disabled: #5c6b82;

  --canvas-bg: #0f1628;
  --canvas-grid: rgba(255, 255, 255, 0.045);
  --canvas-checker-a: #1e2a42;
  --canvas-checker-b: #172035;
  --selection: rgba(255, 90, 54, 0.18);
  --selection-edge: #ff5a36;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.55);

  --overlay-backdrop: rgba(4, 8, 18, 0.72);
  --overlay-scrim: rgba(4, 8, 18, 0.48);
  --on-accent: #ffffff;
  --on-brand: #ffffff;
  --run-btn-fg: #04110d;
  --toggle-thumb: #ffffff;
  --topbar-gradient: linear-gradient(to bottom, #1a2338, #131a2b);
  --boot-glow: rgba(59, 130, 246, 0.32);
  --btn-primary-inset: rgba(255, 255, 255, 0.14);
  --cursor-shadow: rgba(0, 0, 0, 0.45);
  --focus-ring: #60a5fa;
}

/* ---- Light theme ------------------------------------------------------- */
[data-theme="light"] {
  color-scheme: light;

  --bg-0: #eef0f5;
  --bg-1: #ffffff;
  --bg-2: #f4f5fa;
  --bg-3: #e8ebf2;
  --bg-4: #d8dce6;
  --bg-overlay: rgba(255, 255, 255, 0.9);

  --line-1: #dde1ea;
  --line-2: #c4cad6;
  --line-strong: #9aa3b5;

  --text-0: #12131a;
  --text-1: #2a2d38;
  --text-2: #52586a;
  --text-3: #747b8f;
  --text-disabled: #a3a9b8;

  --canvas-bg: #e4e7ef;
  --canvas-grid: rgba(0, 0, 0, 0.07);
  --canvas-checker-a: #d8dce6;
  --canvas-checker-b: #ebedf3;
  --selection: rgba(255, 90, 54, 0.14);
  --selection-edge: #e84a28;

  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.07);
  --shadow-2: 0 6px 18px rgba(15, 23, 42, 0.1);
  --shadow-3: 0 12px 36px rgba(15, 23, 42, 0.14);

  --overlay-backdrop: rgba(15, 18, 28, 0.42);
  --overlay-scrim: rgba(15, 18, 28, 0.32);
  --on-accent: #ffffff;
  --on-brand: #ffffff;
  --run-btn-fg: #04110d;
  --toggle-thumb: #ffffff;
  --topbar-gradient: linear-gradient(to bottom, #ffffff, #f4f5fa);
  --boot-glow: rgba(124, 92, 255, 0.22);
  --btn-primary-inset: rgba(0, 0, 0, 0.06);
  --cursor-shadow: rgba(15, 23, 42, 0.22);
  --focus-ring: #6b4df5;
}

/* ---- Semantic surface aliases (hub, print gallery, shared UI) ---------- */
:root,
[data-theme="dark"],
[data-theme="light"] {
  --surface-0: var(--bg-1);
  --surface-1: var(--bg-2);
  --surface-2: var(--bg-3);
  --border: var(--line-1);
  --border-strong: var(--line-strong);
  --accent: var(--brand-2);
  --text: var(--text-1);
  --danger: var(--brand-error);
  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-2);
}

/* ---- Native form controls (select popups, date/time pickers) ----------- */
select,
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="color"] {
  color-scheme: light dark;
}

[data-theme="dark"] select,
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="week"] {
  color-scheme: dark;
}

[data-theme="light"] select,
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="time"],
[data-theme="light"] input[type="datetime-local"],
[data-theme="light"] input[type="month"],
[data-theme="light"] input[type="week"] {
  color-scheme: light;
}

select option,
select optgroup {
  background-color: var(--bg-2);
  color: var(--text-1);
}

select option:checked,
select option:focus-visible {
  background-color: color-mix(in srgb, var(--brand-2) 24%, var(--bg-3));
  color: var(--text-0);
}

select:disabled,
input:disabled,
textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}