/*
 * Design tokens: Film Studio design system.
 *
 * Light is the default theme (on :root). Dark lives under [data-theme="dark"] and under
 * [data-theme="system"] when the OS prefers dark. Components use ONLY these semantic tokens,
 * never raw colors, so both themes stay consistent. See docs/design-system.md.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable-4.1.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/JetBrainsMono-Regular-2.304.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/JetBrainsMono-Medium-2.304.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* ---- Typography ---------------------------------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-features: "cv11", "ss03", "calt";

  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.8125rem;   /* 13px: default UI size */
  --text-md: 0.875rem;    /* 14px */
  --text-lg: 1rem;        /* 16px */
  --text-xl: 1.125rem;    /* 18px */
  --text-2xl: 1.375rem;   /* 22px: page titles */
  --text-3xl: 1.75rem;    /* 28px */
  --text-4xl: 2.25rem;    /* 36px: hero figures */

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 680;

  --tracking-tight: -0.011em;
  --tracking-tighter: -0.022em;
  --tracking-wide: 0.04em;

  /* ---- Spacing (4 px base) -------------------------------------------- */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- Radius --------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* ---- Sizes ---------------------------------------------------------- */
  --control-h-sm: 28px;
  --control-h: 34px;
  --control-h-lg: 40px;
  --topbar-h: 52px;
  --sidebar-w: 236px;
  --sidebar-w-collapsed: 60px;
  --statusbar-h: 32px;
  --side-panel-w: 380px;
  --content-max: 1280px;

  /* ---- Z-index layers ------------------------------------------------- */
  --z-base: 0;
  --z-raised: 1;
  --z-sticky: 10;
  --z-sidebar: 20;
  --z-topbar: 30;
  --z-statusbar: 35;
  --z-dropdown: 50;
  --z-drawer: 60;
  --z-modal: 70;
  --z-toast: 80;
  --z-tooltip: 90;

  /* ---- Motion --------------------------------------------------------- */
  --dur-instant: 80ms;
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;
  --dur-slower: 420ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ---- Color: neutrals (light) ---------------------------------------- */
  --bg-app: #f6f7f9;            /* page background behind cards */
  --bg-chrome: #fbfbfc;         /* top bar, sidebar, status bar */
  --bg-surface: #ffffff;        /* cards, panels, menus */
  --bg-surface-2: #f9fafb;      /* nested areas inside cards (table head, footers) */
  --bg-sunken: #f1f3f6;         /* wells, tracks, code blocks */
  --bg-hover: #f2f4f7;
  --bg-active: #eaedf1;
  --bg-selected: #eef0ff;
  --bg-inverse: #141821;
  --bg-overlay: rgba(16, 21, 34, 0.42);

  --border: #e3e6eb;
  --border-subtle: #edeff2;
  --border-strong: #cfd4db;
  --border-focus: #4f4bdb;

  --text: #101522;
  --text-2: #454d5e;
  --text-3: #646c7d;
  --text-placeholder: #8c93a1;
  --text-disabled: #a3a9b4;
  --text-inverse: #f5f6f8;
  --text-on-accent: #ffffff;

  /* ---- Color: accent (deep blue-violet) ------------------------------- */
  --accent: #4f4bdb;
  --accent-hover: #4440c9;
  --accent-active: #3a36b0;
  --accent-text: #4440c9;
  --accent-soft: #eef0ff;
  --accent-soft-hover: #e3e5fe;
  --accent-border: #cfd2fc;
  --accent-track: #e2e4fd;      /* unfilled part of accent progress (same ramp) */
  --focus-ring: 0 0 0 3px rgba(79, 75, 219, 0.28);
  --focus-ring-inset: inset 0 0 0 2px rgba(79, 75, 219, 0.6);

  /* ---- Color: semantic ------------------------------------------------ */
  --success: #0f9960;
  --success-text: #067647;
  --success-soft: #ecfdf3;
  --success-border: #b4ecca;
  --success-track: #d3f5e2;

  --warning: #dc8a0b;
  --warning-text: #b54708;
  --warning-soft: #fffaeb;
  --warning-border: #fbdd96;
  --warning-track: #fdeec4;

  --danger: #d92d20;
  --danger-hover: #c0261b;
  --danger-text: #b42318;
  --danger-soft: #fef3f2;
  --danger-border: #fdcdc9;
  --danger-track: #fde0dd;

  --info: #2970ff;
  --info-text: #175cd3;
  --info-soft: #eff8ff;
  --info-border: #b9dcff;
  --info-track: #d8eaff;

  --neutral-text: #4a5263;
  --neutral-soft: #f2f4f7;
  --neutral-border: #e1e4e9;

  /* ---- Elevation ------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 2px 4px -1px rgba(16, 24, 40, 0.05), 0 6px 14px -4px rgba(16, 24, 40, 0.09);
  --shadow-lg: 0 4px 8px -2px rgba(16, 24, 40, 0.06), 0 14px 32px -6px rgba(16, 24, 40, 0.14);
  --shadow-xl: 0 8px 16px -4px rgba(16, 24, 40, 0.08), 0 28px 60px -12px rgba(16, 24, 40, 0.22);
  --shadow-inset: inset 0 1px 2px rgba(16, 24, 40, 0.06);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7); /* top sheen on raised controls */
}

/* ---- Dark theme ------------------------------------------------------- */
/* Kept in one custom-property block, applied by two selectors (explicit dark, and system+OS dark). */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-app: #0b0d11;
  --bg-chrome: #0e1015;
  --bg-surface: #13161c;
  --bg-surface-2: #171a21;
  --bg-sunken: #0f1116;
  --bg-hover: #1b1f27;
  --bg-active: #232833;
  --bg-selected: #1d1f3d;
  --bg-inverse: #eceef2;
  --bg-overlay: rgba(3, 4, 7, 0.62);

  --border: #252a33;
  --border-subtle: #1c2028;
  --border-strong: #353b47;
  --border-focus: #8587ff;

  --text: #eceef2;
  --text-2: #a9b0bc;
  --text-3: #858d9a;
  --text-placeholder: #6b7280;
  --text-disabled: #555c68;
  --text-inverse: #101522;
  --text-on-accent: #ffffff;

  --accent: #5b5bea;
  --accent-hover: #6a6bf2;
  --accent-active: #5050d6;
  --accent-text: #a3a6ff;
  --accent-soft: #1d1f3d;
  --accent-soft-hover: #25284d;
  --accent-border: #33366b;
  --accent-track: #22244a;
  --focus-ring: 0 0 0 3px rgba(133, 135, 255, 0.38);
  --focus-ring-inset: inset 0 0 0 2px rgba(133, 135, 255, 0.7);

  --success: #2fbf7c;
  --success-text: #4ade95;
  --success-soft: #11241b;
  --success-border: #1d4632;
  --success-track: #163626;

  --warning: #f2a516;
  --warning-text: #fdb022;
  --warning-soft: #261d0c;
  --warning-border: #4d3812;
  --warning-track: #3a2c10;

  --danger: #e5484d;
  --danger-hover: #ef5a5f;
  --danger-text: #ff7a70;
  --danger-soft: #2a1616;
  --danger-border: #552525;
  --danger-track: #3d1d1d;

  --info: #3b8bff;
  --info-text: #5eb3ff;
  --info-soft: #0f1f33;
  --info-border: #1d3d63;
  --info-track: #16304f;

  --neutral-text: #a9b0bc;
  --neutral-soft: #1b1f27;
  --neutral-border: #2a2f39;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.4), 0 8px 18px -4px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 10px -2px rgba(0, 0, 0, 0.45), 0 18px 40px -8px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 10px 20px -4px rgba(0, 0, 0, 0.5), 0 32px 70px -12px rgba(0, 0, 0, 0.7);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    color-scheme: dark;

    --bg-app: #0b0d11;
    --bg-chrome: #0e1015;
    --bg-surface: #13161c;
    --bg-surface-2: #171a21;
    --bg-sunken: #0f1116;
    --bg-hover: #1b1f27;
    --bg-active: #232833;
    --bg-selected: #1d1f3d;
    --bg-inverse: #eceef2;
    --bg-overlay: rgba(3, 4, 7, 0.62);

    --border: #252a33;
    --border-subtle: #1c2028;
    --border-strong: #353b47;
    --border-focus: #8587ff;

    --text: #eceef2;
    --text-2: #a9b0bc;
    --text-3: #858d9a;
    --text-placeholder: #6b7280;
    --text-disabled: #555c68;
    --text-inverse: #101522;
    --text-on-accent: #ffffff;

    --accent: #5b5bea;
    --accent-hover: #6a6bf2;
    --accent-active: #5050d6;
    --accent-text: #a3a6ff;
    --accent-soft: #1d1f3d;
    --accent-soft-hover: #25284d;
    --accent-border: #33366b;
    --accent-track: #22244a;
    --focus-ring: 0 0 0 3px rgba(133, 135, 255, 0.38);
    --focus-ring-inset: inset 0 0 0 2px rgba(133, 135, 255, 0.7);

    --success: #2fbf7c;
    --success-text: #4ade95;
    --success-soft: #11241b;
    --success-border: #1d4632;
    --success-track: #163626;

    --warning: #f2a516;
    --warning-text: #fdb022;
    --warning-soft: #261d0c;
    --warning-border: #4d3812;
    --warning-track: #3a2c10;

    --danger: #e5484d;
    --danger-hover: #ef5a5f;
    --danger-text: #ff7a70;
    --danger-soft: #2a1616;
    --danger-border: #552525;
    --danger-track: #3d1d1d;

    --info: #3b8bff;
    --info-text: #5eb3ff;
    --info-soft: #0f1f33;
    --info-border: #1d3d63;
    --info-track: #16304f;

    --neutral-text: #a9b0bc;
    --neutral-soft: #1b1f27;
    --neutral-border: #2a2f39;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.4), 0 8px 18px -4px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 10px -2px rgba(0, 0, 0, 0.45), 0 18px 40px -8px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 10px 20px -4px rgba(0, 0, 0, 0.5), 0 32px 70px -12px rgba(0, 0, 0, 0.7);
    --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);
    --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }
}

/* Reduced motion: collapse durations; loaders keep a slow, gentle rotation (see components.css). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
    --dur-slower: 0ms;
  }
}