/* ════════════════════════════════════════════════════════════════════════
   VideoOS — canonical design tokens (Ember 2026). SINGLE SOURCE of color,
   space, radius, motion for the whole product. Reference palette = video.html.
   Pages keep their own var names and MAP them to these --vo-* tokens, so the
   value comes from one place and nothing breaks:
     :root{ --accent:var(--vo-accent); --bg:var(--vo-bg); ... }
   ════════════════════════════════════════════════════════════════════════ */
:root{
  /* surfaces */
  --vo-bg:#0b0c0e; --vo-card:#15161a; --vo-card2:#1b1d22;
  --vo-panel:#121218; --vo-panel2:#16161d;
  /* hairlines */
  --vo-line:rgba(255,255,255,.08); --vo-line2:rgba(255,255,255,.14);
  /* text */
  --vo-text:#f4f5f7; --vo-text2:#a9adb6; --vo-text3:#71757e;
  /* brand — Ember orange (canonical, NOT blue/purple) */
  --vo-accent:#ff6a3d; --vo-accent2:#ff9466;
  --vo-accent-soft:rgba(255,106,61,.10);
  /* status */
  --vo-good:#36c98e; --vo-warn:#e9b949; --vo-bad:#e0284f;
  /* geometry */
  --vo-radius:16px; --vo-radius-sm:10px; --vo-radius-lg:20px;
  /* depth + motion */
  --vo-shadow:0 24px 60px -24px rgba(0,0,0,.6);
  --vo-ease:cubic-bezier(.4,0,.2,1);
  /* space scale */
  --vo-s1:4px; --vo-s2:8px; --vo-s3:12px; --vo-s4:16px; --vo-s5:24px; --vo-s6:32px;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}


/* ════ EMBER ATELIER — signature tokens (design critic a901ff7b, 2026-06-18). Additive; map page vars to these. ════ */
:root{
  --vo-font-display:'Manrope', system-ui, sans-serif;
  --vo-font-body:'Inter', system-ui, sans-serif;
  --vo-step--1:clamp(13px,.8rem + .2vw,14px);
  --vo-step-0:clamp(15px,.9rem + .3vw,17px);
  --vo-step-1:clamp(20px,1.1rem + 1vw,26px);
  --vo-step-2:clamp(28px,1.4rem + 2vw,40px);
  --vo-step-3:clamp(40px,2rem + 4vw,64px);
  --vo-step-hero:clamp(46px,4vw + 2rem,104px);   /* cinematic hero — fixes the timid 34px headline */
  --vo-track-tight:-.04em; --vo-track-label:.08em;
  --vo-gold:#d8b46a; --vo-gold-soft:rgba(216,180,106,.22);  /* champagne — hairlines + film gate ONLY */
  --vo-hair:1px solid color-mix(in oklab, var(--vo-gold) 40%, transparent);
  --vo-letterbox:2.39;
  --vo-lamp:radial-gradient(120% 140% at 50% 0%, rgba(255,106,61,.22), transparent 60%);  /* projector lamp */
  --vo-grain-opacity:.06;  /* hero plate only */
  --vo-ease-spring:linear(0,.55 8%,1.02 30%,.99 55%,1);
  --vo-s7:48px; --vo-s8:80px; --vo-s9:128px;  /* generous luxury rhythm */
}


/* ════════════ GRADE — UNTIMED (design critic v2 ab2beedc, 2026-06-18 council winner) ════════════
   The product loads as ungraded log footage and resolves to the final grade on first interaction.
   One @property var grades the whole surface. Additive — does NOT change existing --vo-* values. */
:root{
  --vo-log:       oklch(0.40 0.020 60);                                   /* flat log base: lifted, desaturated */
  --vo-grade:     oklch(0.16 0.030 28);                                   /* resolved near-black, ember bias */
  --vo-toe:       color-mix(in oklch, #0b0c0e 92%, var(--vo-accent) 8%);  /* shadow rolloff */
  --vo-shoulder:  color-mix(in oklch, #ffffff 90%, var(--vo-accent2) 10%);/* highlight rolloff */
  --vo-mid:       color-mix(in oklch, #16171c 60%, var(--vo-accent) 4%);  /* cine-gray card */
  --vo-falloff:   0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -28px rgba(0,0,0,.7),
                  0 2px 10px -6px color-mix(in oklch, var(--vo-accent) 30%, transparent);  /* lens-housing light-fall */
  --vo-gate:      0 0 0 .5px color-mix(in oklch, var(--vo-accent2) 18%, transparent);      /* film-gate edge */
  --vo-edge:      .5px solid color-mix(in oklch, var(--vo-accent2) 18%, transparent);
  --vo-advance:   linear(0, .2, .8, 1);                                   /* film-print response */
  --vo-snap:      cubic-bezier(.34,1.4,.5,1);                             /* frame-stop on hover */
  --vo-grade-dur: 220ms;
  --vo-num:'Manrope', system-ui, sans-serif;
}
@property --vo-grade-mix{ syntax:'<percentage>'; inherits:true; initial-value:0%; }
:root{ --vo-grade-mix:100%; --grade-surface: color-mix(in oklch, var(--vo-log), var(--vo-grade) var(--vo-grade-mix)); }
:root.graded{ --vo-grade-mix:100%; transition:--vo-grade-mix var(--vo-grade-dur) var(--vo-advance); }

/* DEVELOP PASS — content resolves from log→grade. Tag a content wrapper with [data-grade]; keep sticky/fixed
   chrome OUTSIDE it (filter creates a containing block). GPU-cheap, transient. */
[data-grade]{ filter:saturate(.60) contrast(.93) brightness(1.05); transition:filter var(--vo-grade-dur) var(--vo-advance); }
:root.graded [data-grade]{ filter:none; }
.vo-grade-media{ filter:saturate(.52) contrast(.90) brightness(1.08); transition:filter 760ms var(--vo-advance); }
:root.graded .vo-grade-media{ filter:none; }
@media (prefers-reduced-motion: reduce){
  :root{ --vo-grade-mix:100% } :root.graded{ transition:none }
  [data-grade],.vo-grade-media{ filter:none!important; transition:none!important }
}
/* post-house utilities (opt-in) */
.vo-num{ font-variant-numeric:tabular-nums slashed-zero; font-feature-settings:'tnum' 1,'zero' 1; }
.vo-lens{ box-shadow:var(--vo-falloff); }
.vo-gate{ box-shadow:var(--vo-gate); }
.vo-edge{ border:var(--vo-edge); }
h1,h2,h3{ font-optical-sizing:auto; }