/* AutoVideo design tokens (ui-spec §6). Dark is the default theme.
   Components consume semantic tokens only: never hard-code values elsewhere. */

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

:root {
  color-scheme: dark;

  /* ---- Color: dark (default) ---- */
  --color-bg: #0E0F12;
  --color-surface: #16181D;
  --color-surface-2: #1D2027;
  --color-surface-3: #252932;
  --color-field: #0F1115;
  --color-border: #2A2E37;
  --color-border-strong: #6E7582;
  --color-text: #ECEDEF;
  --color-text-muted: #A1A7B3;
  --color-text-subtle: #8A919D;
  --color-primary: #CC4A15;
  --color-primary-hover: #B5400F;
  --color-primary-active: #A3380C;
  --color-primary-contrast: #FFFFFF;
  --color-primary-fg: #FF8A5B;
  --color-primary-soft: #2B1810;
  --color-primary-soft-fg: #FF8A5B;
  --color-success: #4CD98A;
  --color-success-soft: #10291C;
  --color-warning: #F5B544;
  --color-warning-soft: #2E2410;
  --color-danger: #FF7A7A;
  --color-danger-soft: #361616;
  --color-danger-fill: #C93030;
  --color-danger-fill-hover: #B02828;
  --color-info: #6CB4FF;
  --color-info-soft: #12243A;
  --color-violet: #B9A6FF;
  --color-violet-soft: #241D3D;
  --color-teal: #3FD4C0;
  --color-teal-soft: #0F2A29;
  --color-neutral-fg: #C3C8D1;
  --color-neutral-soft: #262A31;
  --color-focus-ring: #6CA8FF;
  --color-inverse-bg: #ECEDEF;
  --color-inverse-text: #16181D;
  --color-overlay: rgba(5, 6, 8, 0.72);
  --color-scrim-media: rgba(0, 0, 0, 0.60);
  --color-selection: rgba(204, 74, 21, 0.35);
  --color-skeleton: #1D2027;
  --color-skeleton-shine: #252932;
  --color-media-bg: #000000;
  --color-media-text: #FFFFFF;
  --gradient-ember: linear-gradient(90deg, #CC4A15, #FF8A5B);

  /* ---- Charts (validated palette, §6.1.5) ---- */
  --chart-1: #D95926;
  --chart-2: #3987E5;
  --chart-3: #199E70;
  --chart-4: #9085E9;
  --chart-5: #C98500;
  --chart-6: #D55181;
  --chart-neg: #E66767;
  --chart-mid: #6E7582;
  --chart-grid: #2A2E37;
  --chart-axis: #6E7582;
  --chart-text: #A1A7B3;

  /* ---- Typography ---- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --fs-display: 40px;
  --lh-display: 44px;
  --fs-h1: 28px;
  --lh-h1: 36px;
  --fs-h2: 20px;
  --lh-h2: 28px;
  --fs-h3: 16px;
  --lh-h3: 24px;
  --fs-stat: 28px;
  --lh-stat: 34px;
  --fs-body-lg: 16px;
  --lh-body-lg: 26px;
  --fs-body: 14px;
  --lh-body: 22px;
  --fs-label: 13px;
  --lh-label: 18px;
  --fs-small: 13px;
  --lh-small: 20px;
  --fs-caption: 12px;
  --lh-caption: 16px;
  --fs-eyebrow: 12px;
  --lh-eyebrow: 16px;
  --fs-mono: 13px;
  --lh-mono: 20px;
  --fs-input: 14px;

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

  /* ---- Layout ---- */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;
  --bottomnav-h: 64px;
  --content-max: 1440px;
  --prose-max: 72ch;
  --studio-panel-w: 400px;
  --gutter: 32px;
  --control-h: 40px;
  --control-h-sm: 32px;
  --control-h-lg: 48px;
  --target-min: 44px;

  /* ---- Radii & borders ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --border-w: 1px;
  --border-w-strong: 2px;

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .40);
  --shadow-glow-primary: 0 0 0 1px rgba(255, 138, 91, .25), 0 6px 20px -4px rgba(204, 74, 21, .55);
  --shadow-card: none;

  /* ---- Z-index ---- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-topbar: 200;
  --z-sidebar: 300;
  --z-dropdown: 400;
  --z-drawer: 500;
  --z-modal: 600;
  --z-toast: 700;
  --z-tooltip: 800;
  --z-skiplink: 900;

  /* ---- Motion ---- */
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --dur-progress: 600ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-linear: linear;
}

/* ---- Light theme ---- */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #F6F6F7;
  --color-surface: #FFFFFF;
  --color-surface-2: #F0F1F3;
  --color-surface-3: #E6E8EC;
  --color-field: #FFFFFF;
  --color-border: #E1E3E8;
  --color-border-strong: #767C88;
  --color-text: #16181D;
  --color-text-muted: #565C68;
  --color-text-subtle: #656B78;
  --color-primary: #C2410C;
  --color-primary-hover: #A8360A;
  --color-primary-active: #9A3412;
  --color-primary-contrast: #FFFFFF;
  --color-primary-fg: #B93C0A;
  --color-primary-soft: #FDEDE5;
  --color-primary-soft-fg: #B03A0B;
  --color-success: #18733D;
  --color-success-soft: #E3F5EA;
  --color-warning: #92530A;
  --color-warning-soft: #FDF3DC;
  --color-danger: #B42318;
  --color-danger-soft: #FDECEA;
  --color-danger-fill: #C62828;
  --color-danger-fill-hover: #A82020;
  --color-info: #1D5FC4;
  --color-info-soft: #E6F0FD;
  --color-violet: #5B3FC4;
  --color-violet-soft: #EFEBFD;
  --color-teal: #0E6E66;
  --color-teal-soft: #E0F5F2;
  --color-neutral-fg: #4B515C;
  --color-neutral-soft: #EEF0F3;
  --color-focus-ring: #1F5FCC;
  --color-inverse-bg: #16181D;
  --color-inverse-text: #F6F6F7;
  --color-overlay: rgba(22, 24, 29, 0.48);
  --color-selection: rgba(194, 65, 12, 0.18);
  --color-skeleton: #ECEEF1;
  --color-skeleton-shine: #F6F7F9;
  --gradient-ember: linear-gradient(90deg, #C2410C, #9A3412);
  --chart-1: #EB6834;
  --chart-2: #2A78D6;
  --chart-3: #1BAF7A;
  --chart-4: #6250D6;
  --chart-5: #EDA100;
  --chart-6: #E87BA4;
  --chart-neg: #E34948;
  --chart-mid: #A9AEB8;
  --chart-grid: #E1E3E8;
  --chart-axis: #767C88;
  --chart-text: #565C68;
  --shadow-1: 0 1px 2px rgba(22, 24, 29, .06), 0 1px 1px rgba(22, 24, 29, .04);
  --shadow-2: 0 4px 12px rgba(22, 24, 29, .08), 0 1px 3px rgba(22, 24, 29, .06);
  --shadow-3: 0 16px 40px rgba(22, 24, 29, .14), 0 2px 8px rgba(22, 24, 29, .08);
  --shadow-glow-primary: 0 6px 16px -6px rgba(194, 65, 12, .45);
  --shadow-card: var(--shadow-1);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    color-scheme: light;
    --color-bg: #F6F6F7;
    --color-surface: #FFFFFF;
    --color-surface-2: #F0F1F3;
    --color-surface-3: #E6E8EC;
    --color-field: #FFFFFF;
    --color-border: #E1E3E8;
    --color-border-strong: #767C88;
    --color-text: #16181D;
    --color-text-muted: #565C68;
    --color-text-subtle: #656B78;
    --color-primary: #C2410C;
    --color-primary-hover: #A8360A;
    --color-primary-active: #9A3412;
    --color-primary-contrast: #FFFFFF;
    --color-primary-fg: #B93C0A;
    --color-primary-soft: #FDEDE5;
    --color-primary-soft-fg: #B03A0B;
    --color-success: #18733D;
    --color-success-soft: #E3F5EA;
    --color-warning: #92530A;
    --color-warning-soft: #FDF3DC;
    --color-danger: #B42318;
    --color-danger-soft: #FDECEA;
    --color-danger-fill: #C62828;
    --color-danger-fill-hover: #A82020;
    --color-info: #1D5FC4;
    --color-info-soft: #E6F0FD;
    --color-violet: #5B3FC4;
    --color-violet-soft: #EFEBFD;
    --color-teal: #0E6E66;
    --color-teal-soft: #E0F5F2;
    --color-neutral-fg: #4B515C;
    --color-neutral-soft: #EEF0F3;
    --color-focus-ring: #1F5FCC;
    --color-inverse-bg: #16181D;
    --color-inverse-text: #F6F6F7;
    --color-overlay: rgba(22, 24, 29, 0.48);
    --color-selection: rgba(194, 65, 12, 0.18);
    --color-skeleton: #ECEEF1;
    --color-skeleton-shine: #F6F7F9;
    --gradient-ember: linear-gradient(90deg, #C2410C, #9A3412);
    --chart-1: #EB6834;
    --chart-2: #2A78D6;
    --chart-3: #1BAF7A;
    --chart-4: #6250D6;
    --chart-5: #EDA100;
    --chart-6: #E87BA4;
    --chart-neg: #E34948;
    --chart-mid: #A9AEB8;
    --chart-grid: #E1E3E8;
    --chart-axis: #767C88;
    --chart-text: #565C68;
    --shadow-1: 0 1px 2px rgba(22, 24, 29, .06), 0 1px 1px rgba(22, 24, 29, .04);
    --shadow-2: 0 4px 12px rgba(22, 24, 29, .08), 0 1px 3px rgba(22, 24, 29, .06);
    --shadow-3: 0 16px 40px rgba(22, 24, 29, .14), 0 2px 8px rgba(22, 24, 29, .08);
    --shadow-glow-primary: 0 6px 16px -6px rgba(194, 65, 12, .45);
    --shadow-card: var(--shadow-1);
  }
}

/* ---- Responsive layout tokens (§6.3, §6.8) ---- */
@media (max-width: 1439px) {
  :root { --studio-panel-w: 360px; }
}
@media (max-width: 1279px) {
  :root { --gutter: 24px; --studio-panel-w: 340px; }
}
@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --fs-h1: 24px;
    --lh-h1: 32px;
    --fs-stat: 22px;
    --lh-stat: 28px;
    --fs-display: 32px;
    --lh-display: 38px;
    --fs-input: 16px;
  }
}
@media (pointer: coarse) {
  :root { --control-h: 44px; --control-h-sm: 44px; }
}

/* ---- Reduced motion (system or in-app setting) ---- */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="no"]) {
    --dur-instant: 0.01ms;
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
    --dur-progress: 0.01ms;
  }
}
:root[data-motion="reduce"] {
  --dur-instant: 0.01ms;
  --dur-fast: 0.01ms;
  --dur-base: 0.01ms;
  --dur-slow: 0.01ms;
  --dur-progress: 0.01ms;
}