/* Every colour, radius and font the page uses, one set per theme. app.css reads
   nothing else, so a theme never changes the layout (docs/app.md, UI overhaul).

     <html data-theme="studio|arena|neon" data-mode="dark|light" data-labels="icons|words">
     chosen in Settings › Appearance, saved in data/app_settings.json; data-mode is
     what is painted (System resolved by app.js)

   One block per theme and mode. A light set takes two attributes, so it beats every
   dark set whatever the order; `[data-mode="light"] [data-theme=...]` is the same set
   for a theme card in Settings, which previews its theme in the page's mode (P31).
   Each theme sets every font token: a card inherits the rest from the page's theme.

   Five kinds of action, one colour each, on buttons only (a category's colour is data:
   dots and stripes, never a button):

     --make     analyse, add to the export list, export
     --cut      the cut, its handles, play the cut, layouts
     --mark     star, rename, category, note
     --show     filters, sort, open on Twitch, settings
     --remove   hide, take out, delete
*/

@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/chakra-petch-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/outfit-latin-wght-normal.woff2") format("woff2");
}

/* The logo (brand/README.md): the same in every theme and mode, like the exe's icon.
   The rail's tile is the dark app icon; the download page's name is the dark logo. */
:root {
  --lane-text: #4f8dff;  /* H4a2: a Text lane's tiles and steps, the same in every theme */
  --lane-image: #2fb7a5;  /* H8a: an Image lane's tiles */
  --lane-audio: #e85aad;  /* H8a: an Audio lane's tiles */
  --lane-video: #f5a524;  /* H8a2: a Video lane's tiles */
  --lane-zoom: #a78bfa;  /* H4c: a Zoom lane's tiles (it borrowed --accent) */
  /* H4b: the apps' screens drawn on the phone (the user's screenshots), the same in
     every theme: they are the apps' colours, not ours */
  --app-ink: #000;
  --app-ink-ig: #0f1115;
  --app-ink-yt: #0f0f0f;
  --app-red: #fe2c55;
  --app-tt-cyan: #25f4ee;
  --app-field: #26292e;
  --app-dim: rgba(255, 255, 255, .72);
  --app-line: rgba(255, 255, 255, .16);
  --app-dark: #161616;
  --app-disc: #2a2a2a;
  --app-ig-ring-1: #feda75;
  --app-ig-ring-2: #d62976;
  --logo-tile: #0F1B33;
  --logo-mark: #E9EEF7;
  --logo-play: #FF8A00;
  --logo-font: "Outfit", var(--font);
  /* The editor's crops (E1b), one colour per region, as StreamLadder tells them apart:
     drawn on the video in every theme, so the same everywhere. */
  --crop-game: #22d3ee;
  --crop-facecam: #e879f9;
  --crop-killfeed: #f5c542;
  --crop-gamechat: #a3d63b;
  --crop-twitchchat: #f07a2e;
  --crop-other: #8b7cf6;
  /* The layouts' cards (E1c): a stand-in picture, not the moment: a sky and a
     ground for the game, a person for the facecam, lines for a chat. */
  --art-sky: #7cc4f5;
  --art-sky-low: #3b82c4;
  --art-ground: #4f9d5a;
  --art-cam: #f5b8d8;
  --art-person: #3a2a4a;
  --art-chat: #1d2230;
  --art-line: #cfd6e4;
  --phone-body: #0b0b0d;
  --phone-rim: #2a2a30;
  --app-avatar: #6c4bd6;
  --live: #eb0400;          /* Twitch's live red, on a channel live now (P58) */
  --cap-tile: #3a404a;      /* a caption preset tile: a mid grey, as a clip behind them (F1) */
  --cap-tile-text: #d7dbe2;
  --cap-group-a: #38bdf8;   /* F1i: a captions group each, its lines' boxes on the track */
  --cap-group-b: #f472b6;
  --cap-group-c: #a3e635;
}

/* Studio, the default: graphite, hairlines, calm for long sessions. */
:root, [data-theme="studio"] {
  color-scheme: dark;
  --bg: #0b0b0d;
  --panel: #121215;
  --raise: #19191d;
  --hover: #222228;
  --sunken: #08080a;
  --menu: #19191d;           /* a dropdown's open list: always opaque (Chrome draws it on white) */
  --line: #26262c;
  --line-strong: #3a3a43;
  --text: #ededef;
  --muted: #8f8f99;
  --faint: #5c5c66;

  --make: #8b5cf6;
  --cut: #34d399;
  --mark: #fbbf24;
  --show: #60a5fa;
  --remove: #fb7185;
  --on-fill: #ffffff;        /* text on a filled button */
  --on-cut: #06281c;         /* text on the cut's own colour */

  --accent: var(--make);     /* focus, selection, what counted */
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --viewer: #2fb7a5;         /* where a moment comes from, until P27 makes it an icon */
  --marker: #e8883a;
  --on-group: #111111;       /* text on a category's colour */
  --ok: #4ade80;
  --error: #fb7185;
  --name-shade: 0%;          /* chat names toward black: Twitch's colours suit a dark chat */

  --radius: 10px;
  --radius-sm: 7px;
  --font: "Inter", system-ui, "Segoe UI", sans-serif;
  --font-head: var(--font);
  --head-case: none;
  --head-spacing: normal;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --page: var(--bg);
  --glass: none;
  --shadow: 0 10px 32px rgba(0, 0, 0, .5);
}

/* Studio light: the same calm, on paper. The action colours a step darker: icons on
   white now, not on graphite. */
[data-mode="light"], [data-mode="light"] [data-theme="studio"] {
  color-scheme: light;
  --bg: #f4f4f6;
  --panel: #ffffff;
  --raise: #ededf1;
  --hover: #e2e2e8;
  --sunken: #e9e9ee;
  --menu: #ffffff;
  --line: #dedee4;
  --line-strong: #c4c4cd;
  --text: #18181b;
  --muted: #5c5c66;
  --faint: #8f8f99;

  --make: #7c3aed;
  --cut: #059669;
  --mark: #d97706;
  --show: #2563eb;
  --remove: #e11d48;
  --on-fill: #ffffff;
  --on-cut: #ffffff;

  --viewer: #0f8f80;
  --marker: #c96a1e;
  --ok: #16a34a;
  --error: #e11d48;
  --name-shade: 35%;
  --page: var(--bg);
  --shadow: 0 10px 32px rgba(24, 24, 32, .14);
}

/* Arena: an esport client. Blue-black, sharp corners, a squared display face. */
[data-theme="arena"] {
  --bg: #0a0e14;
  --panel: #0f151e;
  --raise: #151d29;
  --hover: #1b2635;
  --sunken: #070a0f;
  --menu: #151d29;
  --line: #1f2a38;
  --line-strong: #2f3d50;
  --text: #e8eef6;
  --muted: #7d8da3;
  --faint: #4f5d70;

  --make: #2ee6d6;
  --cut: #ff8f3d;
  --mark: #f5d76e;
  --show: #6aa8ff;
  --remove: #ff4655;
  --on-fill: #04201d;
  --on-cut: #2b1a00;

  --radius: 3px;
  --radius-sm: 2px;
  --font-head: "Chakra Petch", var(--font);
  --head-case: uppercase;
  --head-spacing: .06em;
  --page: repeating-linear-gradient(135deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 10px), var(--bg);
}

[data-mode="light"][data-theme="arena"], [data-mode="light"] [data-theme="arena"] {
  color-scheme: light;
  --bg: #edf1f6;
  --panel: #ffffff;
  --raise: #e6ecf3;
  --hover: #dae2ec;
  --sunken: #e2e8f0;
  --menu: #ffffff;
  --line: #d2dbe6;
  --line-strong: #b3c0d0;
  --text: #0b1420;
  --muted: #4c5b70;
  --faint: #8593a6;

  --make: #0d9488;
  --cut: #ea580c;
  --mark: #ca8a04;
  --show: #2563eb;
  --remove: #e11d48;
  --on-fill: #ffffff;
  --on-cut: #ffffff;
  --page: repeating-linear-gradient(135deg, rgba(0, 0, 0, .02) 0 2px, transparent 2px 10px), var(--bg);
}

/* Neon: loud, for those who want it. The glass costs GPU next to a running game. */
[data-theme="neon"] {
  --bg: #0c0915;
  --panel: rgba(24, 18, 42, .72);
  --raise: rgba(255, 255, 255, .06);
  --hover: rgba(255, 255, 255, .09);
  --sunken: rgba(6, 4, 12, .7);
  --menu: #1d1733;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .18);
  --text: #f4f1ff;
  --muted: #a59cc4;
  --faint: #6d6590;

  --make: #a855f7;
  --cut: #38bdf8;
  --mark: #fcd34d;
  --show: #818cf8;
  --remove: #fb7185;
  --on-fill: #ffffff;
  --on-cut: #04202e;

  --radius: 16px;
  --radius-sm: 10px;
  --font: "Outfit", system-ui, "Segoe UI", sans-serif;
  --font-head: var(--font);
  --head-case: none;
  --head-spacing: normal;
  --page:
    radial-gradient(60% 50% at 12% 8%, rgba(139, 92, 246, .32), transparent 60%),
    radial-gradient(45% 45% at 92% 18%, rgba(236, 72, 153, .2), transparent 60%),
    radial-gradient(55% 55% at 70% 100%, rgba(56, 189, 248, .16), transparent 60%),
    var(--bg);
  --glass: blur(18px);
}

[data-mode="light"][data-theme="neon"], [data-mode="light"] [data-theme="neon"] {
  color-scheme: light;
  --bg: #f6f3ff;
  --panel: rgba(255, 255, 255, .72);
  --raise: rgba(40, 20, 90, .05);
  --hover: rgba(40, 20, 90, .09);
  --sunken: rgba(232, 226, 250, .75);
  --menu: #ffffff;
  --line: rgba(40, 20, 90, .1);
  --line-strong: rgba(40, 20, 90, .2);
  --text: #1c1530;
  --muted: #5d5482;
  --faint: #968db5;

  --make: #9333ea;
  --cut: #0284c7;
  --mark: #ca8a04;
  --show: #4f46e5;
  --remove: #e11d48;
  --on-fill: #ffffff;
  --on-cut: #ffffff;
  --page:
    radial-gradient(60% 50% at 12% 8%, rgba(139, 92, 246, .2), transparent 60%),
    radial-gradient(45% 45% at 92% 18%, rgba(236, 72, 153, .12), transparent 60%),
    radial-gradient(55% 55% at 70% 100%, rgba(56, 189, 248, .12), transparent 60%),
    var(--bg);
}