/* Direction: Reel Rescue — dark edit-suite, record-light red, mono timecodes */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  color-scheme: dark;
  --canvas: #0f1013;
  --surface: #17181d;
  --surface-2: #1f2127;
  --border: #2c2f37;
  --border-strong: #57585a;
  --ink: #f1efea;
  --muted: #979694;
  --accent: #ff5a36;
  --accent-hover: #ff7354;
  --accent-ink: #0f1013;
  --accent-text: #ff8a6b;
  --accent-strong: #ff5a36;
  --accent-soft: #44201b;
  --accent-border: #7b3123;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #10291c;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #331f11;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #341315;
  --danger-strong: #d16969;
  --chart-1: #ff5a36;
  --chart-2: #d5b329;
  --chart-3: #129a56;
  --chart-4: #28c3df;
  --chart-5: #5e6df9;
  --chart-6: #fd78e8;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --display-weight: 700;
  --display-tracking: -0.03em;
  --x-band: #ff5a36;
  --x-on-band: #1a0b06;
  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-input: 8px;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3f3;
  --border: #dddede;
  --border-strong: #b7b7b8;
  --ink: #0f1013;
  --muted: #666768;
  --accent: #ff5a36;
  --accent-hover: #d94d2e;
  --accent-ink: #0f1013;
  --accent-text: #b74027;
  --accent-strong: #b74027;
  --accent-soft: #ffe8e3;
  --accent-border: #ffb5a5;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e3f0e8;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6eae1;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7e4e4;
  --danger-strong: #b91c1c;
  --chart-1: #ff5a36;
  --chart-2: #ab9021;
  --chart-3: #129a56;
  --chart-4: #1f9cb3;
  --chart-5: #5d6bf7;
  --chart-6: #e05ccc;
}

.drop { position: relative; border: 2px dashed var(--border); transition: border-color .15s, background-color .15s, transform .15s; }
.drop:hover, .drop:focus-within { border-color: var(--accent); }
.drop.is-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); transform: scale(1.01); }
.drop.has-file { border-style: solid; border-color: var(--accent); }
.drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.opt { position: relative; display: block; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt > span { display: block; border: 1px solid var(--border); border-radius: 10px; padding: .85rem 1rem; cursor: pointer; transition: border-color .15s, background-color .15s; height: 100%; }
.opt:hover > span { border-color: var(--accent-text); }
.opt input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.rec { width: .6rem; height: .6rem; border-radius: 999px; background: var(--accent); animation: rec 1.4s ease-in-out infinite; }
@keyframes rec { 50% { opacity: .25; } }
html.reduced-motion .rec { animation: none; }

.grain { background-image: repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--ink) 3%, transparent) 3px 4px); }
.tc { font-variant-numeric: tabular-nums; letter-spacing: .04em; }