/* subtitld.cc design tokens, round 2
   Rebuilt from the Subtitld editor design system (qtmultimedia stylesheet.qss).
   Replaces static/css/tokens.css from round 1.

   One token set for both themes: light-dark(LIGHT, DARK) picks the value from
   the element's color-scheme. Theme switching is a single attribute on <html>:
     no data-theme          -> follows the OS (color-scheme: light dark)
     data-theme="dark"      -> dark
     data-theme="light"     -> light
   Video frames and caption boxes stay dark in both themes on purpose. */

@font-face{font-family:Montserrat;src:url("../fonts/Montserrat-Regular.4056a14f953f.woff2") format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url("../fonts/Montserrat-Medium.7a7c0bc1aa71.woff2") format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Montserrat;src:url("../fonts/Montserrat-SemiBold.4e684ac4cd00.woff2") format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Montserrat;src:url("../fonts/Montserrat-Bold.1c6c6d6e0d1e.woff2") format('woff2');font-weight:700;font-display:swap}

:root{
  color-scheme:light dark;

  /* ---- type: Montserrat only (single-typeface system) ---- */
  --ff:Montserrat,'Noto Sans Arabic','Noto Sans Hebrew','Noto Sans JP',system-ui,sans-serif;
  --f-display:600 clamp(28px,2.4vw + 14px,44px)/1.2 var(--ff);   /* hero, caption box */
  --f-h1:600 clamp(24px,1.2vw + 16px,30px)/1.25 var(--ff);       /* page / asset title */
  --f-h2:600 21px/28px var(--ff);                                 /* section titles */
  --f-h3:600 17px/24px var(--ff);                                 /* sub-sections */
  --f-body:400 15px/24px var(--ff);                               /* long text, max 68ch */
  --f-line:500 16px/24px var(--ff);                               /* subtitle text */
  --f-small:500 13px/20px var(--ff);                              /* meta lines */
  --f-label:700 11px/16px var(--ff);                              /* UPPERCASE: buttons, tabs, field labels */
  --f-micro:700 10px/14px var(--ff);                              /* UPPERCASE: badges */
  --f-code:600 13px/20px var(--ff);                               /* timecodes, IDs: add tabular-nums */
  --f-code-lg:600 18px/24px var(--ff);                            /* share field */
  --tracking-caps:.04em;
  --tracking-eyebrow:.08em;
  /* NOTE: the font shorthand resets font-variant-numeric. Set
     font-variant-numeric:tabular-nums after font on timecodes and IDs. */

  /* ---- space (4px grid), radius, sizes ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px; --s-12:48px; --s-16:64px;
  --gutter:clamp(16px,4vw,40px);
  --content-max:1200px;
  --radius:2px;      /* default everywhere */
  --radius-lg:4px;   /* panels, dialogs, menus. Never larger. */
  --h-dense:32px; --h-default:36px; --h-action:40px; --h-field-xl:52px; --touch-min:44px;
  --focus-width:2px; --focus-offset:2px;

  /* ---- surfaces ---- */
  --page:linear-gradient(180deg,light-dark(#f4f7f9,#07090b) 0,light-dark(#dde6ed,#1a232b) 960px);
  --chrome:light-dark(rgba(255,255,255,.72),rgba(0,0,0,.32));      /* header, footer, toolbars */
  --panel:light-dark(rgba(255,255,255,.62),rgba(48,66,81,.25));    /* lists, cards, side panels */
  --panel-2:light-dark(rgba(255,255,255,.92),rgba(62,83,99,.5));   /* selected rows, strong panels */
  --raised:light-dark(#ffffff,#26343f);                            /* menus, dialog bodies, toasts */
  --raised-bar:light-dark(#e3ebf1,#3e5363);                        /* dialog title + button bars */
  --field:light-dark(#ffffff,#304251);                             /* inputs, labeled fields */
  --field-h:light-dark(#f2f6f9,#3e5363);
  --frame:light-dark(#141b21,#07090b);                             /* video frames, stills */
  --caption:rgba(7,9,11,.9);                                       /* caption box, white text */
  --scrim:light-dark(rgba(26,35,43,.45),rgba(7,9,11,.72));

  /* ---- text, lines, accent ---- */
  --fg:light-dark(#1a232b,#ffffff);
  --fg-2:light-dark(#3e5363,#b8cee0);
  --fg-3:light-dark(#536475,#8b9cad);                              /* >= 4.5:1 on every surface */
  --line:light-dark(rgba(48,66,81,.14),rgba(255,255,255,.07));
  --line-2:light-dark(rgba(48,66,81,.3),rgba(255,255,255,.15));
  --accent:light-dark(#304251,#b8cee0);                            /* selection, focus, stars, active tab */
  --on-accent:light-dark(#ffffff,#26343f);
  --chip:light-dark(rgba(48,66,81,.07),rgba(184,206,224,.1));
  --code-chip:#3e5363;                                             /* language code chip, white text */

  /* ---- actions ---- */
  --go:linear-gradient(180deg,#67ff4d,#55d43f);                    /* the one primary action per screen */
  --go-h:linear-gradient(180deg,#8cff6e,#67ff4d);
  --go-p:linear-gradient(180deg,#3caa2a,#55d43f);
  --go-fg:#0b2808;
  --go-line:light-dark(rgba(43,122,30,.55),rgba(0,0,0,.2));
  --btn:linear-gradient(180deg,light-dark(#ffffff,#4a5f70),light-dark(#e6edf2,#3e5363));
  --btn-h:linear-gradient(180deg,light-dark(#ffffff,#566f84),light-dark(#dae4eb,#4a5f70));
  --btn-p:linear-gradient(180deg,light-dark(#dae4eb,#2e3e4c),light-dark(#e6edf2,#3a4d5d));
  --btn-fg:light-dark(#304251,#b8cee0);
  --btn-line:light-dark(rgba(48,66,81,.24),rgba(255,255,255,.06));
  --sky:linear-gradient(180deg,#c8dbe9,#b8cee0);                   /* actions fused to a field */
  --sky-h:linear-gradient(180deg,#d6e4ef,#c8dbe9);
  --sky-fg:#304251;
  --red:linear-gradient(180deg,#c55252,#a94444);
  --red-h:linear-gradient(180deg,#d46464,#b05050);
  --red-fg:#ffffff;
  --bevel:inset 0 1px 0 light-dark(rgba(255,255,255,.9),rgba(255,255,255,.14)),
          inset 0 -1px 0 light-dark(rgba(48,66,81,.1),rgba(0,0,0,.25));
  --bevel-pressed:inset 0 1px 2px rgba(0,0,0,.35);

  /* ---- status ---- */
  --ok:light-dark(#2a7a1c,#6be052);
  --ok-bg:light-dark(rgba(85,212,63,.16),rgba(85,212,63,.13));
  --ok-solid:#55d43f;
  --warn:light-dark(#8a5a00,#e7b95e);
  --warn-bg:light-dark(rgba(231,185,94,.22),rgba(231,185,94,.13));
  --bad:light-dark(#a94444,#e57f7f);
  --bad-bg:light-dark(rgba(197,82,82,.1),rgba(197,82,82,.16));
}

:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

/* Caps tracking breaks joined scripts and adds nothing to CJK. */
:lang(ar),:lang(he),:lang(fa),:lang(ur),:lang(ja),:lang(zh),:lang(ko){--tracking-caps:0;--tracking-eyebrow:0}

/* Page background + watermark (every page) */
body{margin:0;background:var(--page);color:var(--fg);font:var(--f-body)}
.site-watermark{position:absolute;inset-inline:0;top:24px;height:560px;pointer-events:none;
  background:url("../img/background_watermark.87af134a06ea.svg") center/contain no-repeat;opacity:.5}  /* Subtitld's engraved mark */
/* On the light page its shadow line reads stronger: fainter still. */
:root[data-theme="light"] .site-watermark{opacity:.3}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .site-watermark{opacity:.3}}

:focus-visible{outline:var(--focus-width) solid var(--accent);outline-offset:var(--focus-offset)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}