/* Interface palette: the only source of literal UI colors.
   Default uses neutral Dark. Select Studio/light with data-theme.
   Component styles use roles, never hex values. Media paints at the end are fixed:
   switching the application theme must not recolor a video's artwork or samples. */
:root[data-theme="studio"],
[data-theme-preview="studio"] {
  color-scheme: dark;
  --surface-canvas: #111116;
  --surface-sunken: #100e14;
  --surface-base: #17141d;
  --surface-panel: #19191f;
  --surface-raised: #211c29;
  --surface-control: #23232c;
  --surface-hover: #302a38;
  --surface-active: #3b2d50;
  --surface-strong: #493454;
  --surface-contrast: #edecf3;
  --text-primary: #edecf3;
  --text-secondary: #c4bdcf;
  --text-muted: #a49bad;
  --text-faint: #98909f;
  --text-inverse: #211734;
  --border-subtle: #2b2b35;
  --border-default: #383140;
  --border-strong: #5a4868;
  --accent-primary: #b39afc;
  --accent-hover: #c4b0ff;
  --accent-text: #d9c1ed;
  --accent-strong: #baa0f3;
  --text-on-accent: #211734;
  --success: #8dccae;
  --warning: #ebc078;
  --danger: #f59da4;
  --info: #91bbe6;
  --shadow-color: #000000;
  --scrim-color: #08060c;
  --track-video: #ab86d4;
  --track-narration: #77d4c1;
  --track-captions: #e8c178;
  --track-music: #8cb9e8;
  --track-effects: #e5a28c;
  --track-overlay: #c4a8e8;
}

:root,
:root[data-theme="dark"],
[data-theme-preview="dark"] {
  color-scheme: dark;
  --surface-canvas: #101214;
  --surface-sunken: #0b0d0f;
  --surface-base: #15181b;
  --surface-panel: #1a1d21;
  --surface-raised: #22262b;
  --surface-control: #252a30;
  --surface-hover: #30363d;
  --surface-active: #263c50;
  --surface-strong: #344f65;
  --surface-contrast: #f1f4f8;
  --text-primary: #f1f4f8;
  --text-secondary: #c5cdd6;
  --text-muted: #a3adb8;
  --text-faint: #96a2ae;
  --text-inverse: #101820;
  --border-subtle: #2a3037;
  --border-default: #363e47;
  --border-strong: #596675;
  --accent-primary: #79baff;
  --accent-hover: #a1cfff;
  --accent-text: #b5d7fa;
  --accent-strong: #91c6ff;
  --text-on-accent: #0e2238;
  --success: #84d2a6;
  --warning: #efc47d;
  --danger: #ff9aa4;
  --info: #9bc8ff;
  --shadow-color: #000000;
  --scrim-color: #05080b;
  --track-video: #80b4ed;
  --track-narration: #77d4bd;
  --track-captions: #e8c178;
  --track-music: #96bddb;
  --track-effects: #e5a28c;
  --track-overlay: #9eb5ca;
}

:root[data-theme="light"],
[data-theme-preview="light"] {
  color-scheme: light;
  --surface-canvas: #f5f7fa;
  --surface-sunken: #edf1f6;
  --surface-base: #f8fafc;
  --surface-panel: #ffffff;
  --surface-raised: #f0f4f8;
  --surface-control: #e9eef5;
  --surface-hover: #e1e9f3;
  --surface-active: #dce9ff;
  --surface-strong: #cbdcfa;
  --surface-contrast: #172334;
  --text-primary: #172334;
  --text-secondary: #34465b;
  --text-muted: #52647a;
  --text-faint: #5c6f84;
  --text-inverse: #ffffff;
  --border-subtle: #dfe6ef;
  --border-default: #c9d4e2;
  --border-strong: #95a7bd;
  --accent-primary: #235ed6;
  --accent-hover: #1746ad;
  --accent-text: #194ba6;
  --accent-strong: #174fac;
  --text-on-accent: #ffffff;
  --success: #167344;
  --warning: #885800;
  --danger: #b92d42;
  --info: #215da0;
  --shadow-color: #1a2b40;
  --scrim-color: #172334;
  --track-video: #315fac;
  --track-narration: #177c67;
  --track-captions: #8c620f;
  --track-music: #286599;
  --track-effects: #9c4f2a;
  --track-overlay: #49617d;
}

/* Shared aliases and derived states. Override the roles above to create a theme. */
:root {
  --bg: var(--surface-canvas);
  --panel: var(--surface-panel);
  --surface: var(--surface-panel);
  --panel2: var(--surface-raised);
  --line: var(--border-subtle);
  --border: var(--border-default);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --accent: var(--accent-primary);
  --green: var(--success);
  --red: var(--danger);
  --accent-soft: color-mix(in srgb, var(--accent-primary) 14%, var(--surface-panel));
  --accent-border: color-mix(in srgb, var(--accent-primary) 60%, var(--border-default));
  --success-soft: color-mix(in srgb, var(--success) 12%, var(--surface-panel));
  --warning-soft: color-mix(in srgb, var(--warning) 12%, var(--surface-panel));
  --danger-soft: color-mix(in srgb, var(--danger) 12%, var(--surface-panel));
  --info-soft: color-mix(in srgb, var(--info) 12%, var(--surface-panel));
  --focus-ring: var(--accent-primary);
  --selection-bg: var(--accent-soft);
  --selection-text: var(--accent-text);
  --m-muted: var(--text-muted);
  --m-ink: var(--text-primary);
  --m-lilac: var(--accent-primary);
  --r-muted: var(--text-muted);
  --r-line: var(--border-subtle);
  --scrollbar-track: var(--surface-sunken);
  --scrollbar-thumb: var(--border-strong);
  --scrollbar-hover: var(--text-muted);
  --scrollbar-active: var(--accent-primary);
  /* Fixed paints for original editorial vector artwork. */
  --art-night: #10232d;
  --art-deep: #172f3b;
  --art-slate: #315565;
  --art-line: #38505b;
  --art-mint: #9ee1d0;
  --art-teal: #448d99;
  --art-ivory: #f4eee1;
  --art-cream: #e9d5b0;
  --art-amber: #d5ab68;
  --media-black: #000000;
  --media-white: #ffffff;
  --media-text: #f3f1f7;
  --media-muted: #d4ccdd;
  --media-surface: #101014;
  --media-border: #ffffff33;
  --media-overlay: #00000088;
  --media-checker-light: #d8d8d8;
  --media-checker-dark: #a0a0a0;
  --color-red: #ff0000;
  --color-yellow: #ffff00;
  --color-green: #00ff00;
  --color-cyan: #00ffff;
  --color-blue: #0000ff;
  --color-magenta: #ff00ff;
}

/* Fixed paints for media illustrations and effect previews (not interface roles). */
:root {
  --media-paint-0000ff: var(--color-blue);
  --media-paint-00ff00: var(--color-green);
  --media-paint-00ffff: var(--color-cyan);
  --media-paint-07101a: #07101a;
  --media-paint-09111d: #09111d;
  --media-paint-10121b: #10121b;
  --media-paint-10131d: #10131d;
  --media-paint-101e1b: #101e1b;
  --media-paint-111b2b: #111b2b;
  --media-paint-141d21: #141d21;
  --media-paint-151f2c: #151f2c;
  --media-paint-17121d: #17121d;
  --media-paint-171c25: #171c25;
  --media-paint-172c29: #172c29;
  --media-paint-181815: #181815;
  --media-paint-182231: #182231;
  --media-paint-182331: #182331;
  --media-paint-191220: #191220;
  --media-paint-191520: #191520;
  --media-paint-1e1729: #1e1729;
  --media-paint-251a1b: #251a1b;
  --media-paint-253335: #253335;
  --media-paint-282a28: #282a28;
  --media-paint-296367: #296367;
  --media-paint-2a3d34: #2a3d34;
  --media-paint-342a24: #342a24;
  --media-paint-34313b: #34313b;
  --media-paint-34514d: #34514d;
  --media-paint-35253f: #35253f;
  --media-paint-354355: #354355;
  --media-paint-39454e: #39454e;
  --media-paint-3c304b: #3c304b;
  --media-paint-42526a: #42526a;
  --media-paint-4f3531: #4f3531;
  --media-paint-55365d: #55365d;
  --media-paint-57483d: #57483d;
  --media-paint-715342: #715342;
  --media-paint-718563: #718563;
  --media-paint-746889: #746889;
  --media-paint-83b8c7: #83b8c7;
  --media-paint-b5bbca: #b5bbca;
  --media-paint-beabcc: #beabcc;
  --media-paint-c094dd: #c094dd;
  --media-paint-c4d4df: #c4d4df;
  --media-paint-c7c0d0: #c7c0d0;
  --media-paint-cad0dc: #cad0dc;
  --media-paint-d9d1ee: #d9d1ee;
  --media-paint-d9deea: #d9deea;
  --media-paint-ddd5de: #ddd5de;
  --media-paint-ddd8e1: #ddd8e1;
  --media-paint-ded4e5: #ded4e5;
  --media-paint-e0c7f0: #e0c7f0;
  --media-paint-e0e4ed: #e0e4ed;
  --media-paint-e1c4ae: #e1c4ae;
  --media-paint-e8dfea: #e8dfea;
  --media-paint-eee3ff: #eee3ff;
  --media-paint-f2eae4: #f2eae4;
  --media-paint-faf0ec: #faf0ec;
  --media-paint-ff0000: var(--color-red);
  --media-paint-ff00ff: var(--color-magenta);
  --media-paint-ffd597: #ffd597;
  --media-paint-ffff00: var(--color-yellow);
}

/* Creative style library illustrations. */
:root {
  --media-paint-272132: #272132;
  --media-paint-29474e: #29474e;
  --media-paint-423751: #423751;
  --media-paint-7b667e: #7b667e;
  --media-paint-947da8: #947da8;
  --media-paint-9bbdaa: #9bbdaa;
  --media-paint-9e7652: #9e7652;
  --media-paint-b79ac5: #b79ac5;
  --media-paint-c1d7cc: #c1d7cc;
  --media-paint-cfbfe3: #cfbfe3;
  --media-paint-d1ab7d: #d1ab7d;
  --media-paint-d5b788: #d5b788;
  --media-paint-dbb580: #dbb580;
  --media-paint-ddc298: #ddc298;
  --media-paint-dec19d: #dec19d;
  --media-paint-f0cf88: #f0cf88;
}

/* Avoid intermediate gray controls when switching light/dark palettes. */
:root.theme-changing :is(button,a,input,select,textarea,summary,.sidebar,.panel,.project-card) { transition-duration: 0s !important; }

/* Fixed paints for Motion style previews; artwork is independent of the UI theme. */
:root {
  --media-paint-0006: #0006;
  --media-paint-0008: #0008;
  --media-paint-000a: #000a;
  --media-paint-060a0dcc: #060a0dcc;
  --media-paint-080b0dcc: #080b0dcc;
  --media-paint-101317: #101317;
  --media-paint-10131b: #10131b;
  --media-paint-101521: #101521;
  --media-paint-147d7f: #147d7f;
  --media-paint-151b29: #151b29;
  --media-paint-173d6b: #173d6b;
  --media-paint-18343c: #18343c;
  --media-paint-192436: #192436;
  --media-paint-1b2c2d: #1b2c2d;
  --media-paint-1b554e: #1b554e;
  --media-paint-20152688: #20152688;
  --media-paint-222632: #222632;
  --media-paint-22282a: #22282a;
  --media-paint-233b35: #233b35;
  --media-paint-246757: #246757;
  --media-paint-25263d: #25263d;
  --media-paint-282b2d: #282b2d;
  --media-paint-293244: #293244;
  --media-paint-293348: #293348;
  --media-paint-36827f: #36827f;
  --media-paint-384544: #384544;
  --media-paint-3c344a: #3c344a;
  --media-paint-49327e: #49327e;
  --media-paint-494747: #494747;
  --media-paint-4f7f8055: #4f7f8055;
  --media-paint-50625b: #50625b;
  --media-paint-51417d: #51417d;
  --media-paint-55bead: #55bead;
  --media-paint-56daca: #56daca;
  --media-paint-5be9d466: #5be9d466;
  --media-paint-5be9d4bb: #5be9d4bb;
  --media-paint-6b615f77: #6b615f77;
  --media-paint-70dcd2: #70dcd2;
  --media-paint-71e7d2: #71e7d2;
  --media-paint-71e7d266: #71e7d266;
  --media-paint-777770: #777770;
  --media-paint-77b9ee1c: #77b9ee1c;
  --media-paint-77cebd: #77cebd;
  --media-paint-79aaa478: #79aaa478;
  --media-paint-79d5c5: #79d5c5;
  --media-paint-7adcca: #7adcca;
  --media-paint-829d78: #829d78;
  --media-paint-8565d1: #8565d1;
  --media-paint-87c5f4: #87c5f4;
  --media-paint-91aaa0: #91aaa0;
  --media-paint-96726d: #96726d;
  --media-paint-976024: #976024;
  --media-paint-9b9bec: #9b9bec;
  --media-paint-9c81ee: #9c81ee;
  --media-paint-9f8bff: #9f8bff;
  --media-paint-a38aff55: #a38aff55;
  --media-paint-a78aff66: #a78aff66;
  --media-paint-ab98f3: #ab98f3;
  --media-paint-b4a1ff: #b4a1ff;
  --media-paint-c8e9ff: #c8e9ff;
  --media-paint-c9a47844: #c9a47844;
  --media-paint-c9a47855: #c9a47855;
  --media-paint-c9a47877: #c9a47877;
  --media-paint-cec1ff: #cec1ff;
  --media-paint-d8a99f: #d8a99f;
  --media-paint-d9e9cf: #d9e9cf;
  --media-paint-dafff5: #dafff5;
  --media-paint-dcffff: #dcffff;
  --media-paint-e2ddcf: #e2ddcf;
  --media-paint-e3f5ff: #e3f5ff;
  --media-paint-e4c3ad: #e4c3ad;
  --media-paint-ede6ff: #ede6ff;
  --media-paint-edeae3: #edeae3;
  --media-paint-eee7d6: #eee7d6;
  --media-paint-f1c28b: #f1c28b;
  --media-paint-f3ad54: #f3ad54;
  --media-paint-f3ad5455: #f3ad5455;
  --media-paint-ffd084aa: #ffd084aa;
  --media-paint-ffe3db: #ffe3db;
  --media-paint-fff: #fff;
  --media-paint-fff0c5: #fff0c5;
}