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

@font-face {
  font-family: "Sora";
  src: url("/brand/mais/fonts/Sora-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

@font-face {
  font-family: "Pirulen";
  src: url("/brand/mais/fonts/Pirulen-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* ---- Shared (brand, layout, typography) -------------------------------- */
:root {
  --brand-1: #ff3407;
  --brand-1-h: #ff6745;
  --brand-2: #50c4d7;
  --brand-3: #3c93a1;
  --brand-warn: #fc8400;
  --brand-error: #bf2705;
  --brand-red: #ff3407;
  --brand-orange: #fc8400;
  --brand-cyan: #50c4d7;
  --brand-cream: #fff6e5;
  --brand-ink: #010101;
  --gradient-hero: linear-gradient(135deg, #ff3407 0%, #fc8400 50%, #50c4d7 100%);
  --gradient-ai: linear-gradient(135deg, #ff3407 0 34%, #fc8400 34% 67%, #50c4d7 67% 100%);
  --gradient-stripes: linear-gradient(90deg, #ff3407 0 33.333%, #fc8400 33.333% 66.666%, #50c4d7 66.666% 100%);

  --rail-w: 56px;
  --tools-w: 64px;
  --topbar-h: 58px;
  --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: 2px;
  --r-2: 5px;
  --r-3: 9px;
  --r-4: 14px;

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

  --font-sans: 'Sora', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: 'Pirulen', 'Sora', system-ui, 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: #090908;
  --bg-1: #11110f;
  --bg-2: #181714;
  --bg-3: #23211c;
  --bg-4: #302d26;
  --bg-overlay: rgba(9, 9, 8, 0.9);

  --line-1: #343128;
  --line-2: #4a4539;
  --line-strong: #807b73;

  --text-0: #fff6e5;
  --text-1: #eee6d6;
  --text-2: #bfb9ac;
  --text-3: #8d887f;
  --text-disabled: #69655e;

  --canvas-bg: #0b0b0a;
  --canvas-grid: rgba(255, 246, 229, 0.055);
  --canvas-checker-a: #24221d;
  --canvas-checker-b: #171613;
  --selection: rgba(80, 196, 215, 0.17);
  --selection-edge: #50c4d7;

  --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(1, 1, 1, 0.76);
  --overlay-scrim: rgba(1, 1, 1, 0.52);
  --on-accent: #010101;
  --on-brand: #fff6e5;
  --run-btn-fg: #010101;
  --toggle-thumb: #fff6e5;
  --topbar-gradient: linear-gradient(to bottom, #151410, #0c0c0b);
  --boot-glow: rgba(80, 196, 215, 0.28);
  --btn-primary-inset: rgba(255, 246, 229, 0.15);
  --cursor-shadow: rgba(0, 0, 0, 0.45);
  --focus-ring: #50c4d7;
}

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

  /*
   * Light surfaces are intentionally neutral. Brand cream remains available
   * through --brand-cream for badges and accents, but it must not tint the
   * application shell, workspaces or editing canvases.
   */
  --bg-0: #ffffff;
  --bg-1: #ffffff;
  --bg-2: #f7f8f8;
  --bg-3: #eef1f1;
  --bg-4: #e2e6e6;
  --bg-overlay: rgba(255, 255, 255, 0.94);

  --line-1: #e1e4e5;
  --line-2: #c9ced0;
  --line-strong: #747a7c;

  --text-0: #010101;
  --text-1: #282622;
  --text-2: #5c5851;
  --text-3: #807b73;
  --text-disabled: #aaa294;

  --canvas-bg: #ffffff;
  --canvas-grid: rgba(1, 1, 1, 0.055);
  --canvas-checker-a: #e9edef;
  --canvas-checker-b: #f8fafb;
  --selection: rgba(255, 52, 7, 0.13);
  --selection-edge: #bf2705;

  --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(1, 1, 1, 0.46);
  --overlay-scrim: rgba(1, 1, 1, 0.34);
  --on-accent: #010101;
  --on-brand: #fff6e5;
  --run-btn-fg: #010101;
  --toggle-thumb: #ffffff;
  --topbar-gradient: linear-gradient(to bottom, #ffffff, #ffffff);
  --boot-glow: rgba(255, 52, 7, 0.18);
  --btn-primary-inset: rgba(0, 0, 0, 0.06);
  --cursor-shadow: rgba(15, 23, 42, 0.22);
  --focus-ring: #bf2705;
}

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