/* subtitld.cc design tokens — round 1
   Dark is the default. Light applies via [data-theme="light"] on <html>,
   or automatically via prefers-color-scheme when no data-theme is set. */

@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}
@font-face{font-family:'IBM Plex Mono';src:url("../fonts/IBMPlexMono-Regular.31970619bd9b.woff2") format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url("../fonts/IBMPlexMono-Medium.105231947443.woff2") format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url("../fonts/IBMPlexMono-SemiBold.1d53cb84eee9.woff2") format('woff2');font-weight:600;font-display:swap}

:root{
  /* type */
  --font-sans:'Montserrat',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --fs-display:40px; --lh-display:48px;   /* 600 */
  --fs-h1:28px;      --lh-h1:36px;        /* 600 */
  --fs-h2:20px;      --lh-h2:28px;        /* 600 */
  --fs-h3:16px;      --lh-h3:24px;        /* 600 */
  --fs-body:15px;    --lh-body:24px;      /* 400 */
  --fs-small:13px;   --lh-small:20px;     /* 500 */
  --fs-label:11px;   --lh-label:16px;     /* 700, uppercase */
  --fs-badge:10px;                        /* 700, uppercase */
  --fs-mono:14px;    --lh-mono:20px;      /* 500 */
  --tracking-caps:.06em;
  --tracking-eyebrow:.08em;

  /* spacing (4px grid) */
  --space-0-5:2px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;

  /* radius — never above 4px */
  --radius-sm:2px; --radius-md:3px; --radius-lg:4px;

  /* control heights */
  --control-sm:30px; --control-md:36px; --control-lg:40px; --control-xl:52px; --touch-min:44px;

  /* focus */
  --focus-width:2px; --focus-offset:2px;
}

:root,[data-theme="dark"]{
  --bg-page:linear-gradient(180deg,#07090b 0%,#1a232b 100%);
  --wm-opacity:1; --wm-filter:none;
  --surface-header:rgba(0,0,0,.18);
  --surface-1:rgba(48,66,81,.25);
  --surface-2:rgba(62,83,99,.55);
  --surface-raised:#26343f;
  --surface-raised-title:#3e5363;
  --surface-input:#304251;
  --surface-input-h:#3e5363;
  --surface-caption:rgba(7,9,11,.92);
  --scrim:rgba(7,9,11,.7);
  --border:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.15);
  --fg:#ffffff;
  --fg-muted:#b8cee0;
  --fg-faint:rgba(184,206,224,.64);
  --accent:#b8cee0;
  --focus:#b8cee0;
  --btn-primary:linear-gradient(180deg,#c8dbe9,#b8cee0);
  --btn-primary-h:linear-gradient(180deg,#d6e4ef,#c8dbe9);
  --btn-primary-fg:#304251;
  --btn-default:linear-gradient(180deg,#4a5f70,#3e5363);
  --btn-default-h:linear-gradient(180deg,#566f84,#4a5f70);
  --btn-default-fg:#b8cee0;
  --btn-default-bd:rgba(255,255,255,.06);
  --btn-danger:linear-gradient(180deg,#c55252,#a94444);
  --btn-danger-h:linear-gradient(180deg,#d46464,#b05050);
  --btn-danger-fg:#ffffff;
  --ok:#55d43f; --ok-bg:rgba(85,212,63,.14); --ok-solid:#55d43f; --ok-solid-fg:#07280a;
  --warn:#e6b85c; --warn-bg:rgba(230,184,92,.14);
  --danger:#e07a7a; --danger-bg:rgba(197,82,82,.16);
  --chip-bg:rgba(184,206,224,.10);
  --lang-chip-bg:#3e5363; --lang-chip-fg:#ffffff;
  color-scheme:dark;
}

[data-theme="light"]{
  --bg-page:linear-gradient(180deg,#f5f8fa 0%,#e2eaf0 100%);
  --wm-opacity:.5; --wm-filter:invert(1);
  --surface-header:rgba(255,255,255,.7);
  --surface-1:rgba(255,255,255,.62);
  --surface-2:rgba(255,255,255,.92);
  --surface-raised:#ffffff;
  --surface-raised-title:#e6eef4;
  --surface-input:#ffffff;
  --surface-input-h:#f3f7fa;
  --surface-caption:rgba(7,9,11,.88);
  --scrim:rgba(26,35,43,.45);
  --border:rgba(48,66,81,.13);
  --border-strong:rgba(48,66,81,.28);
  --fg:#1a232b;
  --fg-muted:#3e5363;
  --fg-faint:#5a6e81;
  --accent:#304251;
  --focus:#304251;
  --btn-primary:linear-gradient(180deg,#4a5f70,#3e5363);
  --btn-primary-h:linear-gradient(180deg,#566f84,#4a5f70);
  --btn-primary-fg:#ffffff;
  --btn-default:linear-gradient(180deg,#ffffff,#e9f0f5);
  --btn-default-h:linear-gradient(180deg,#ffffff,#dde7ee);
  --btn-default-fg:#304251;
  --btn-default-bd:rgba(48,66,81,.24);
  --btn-danger:linear-gradient(180deg,#c55252,#a94444);
  --btn-danger-h:linear-gradient(180deg,#d46464,#b05050);
  --btn-danger-fg:#ffffff;
  --ok:#2b7a1e; --ok-bg:rgba(85,212,63,.18); --ok-solid:#55d43f; --ok-solid-fg:#07280a;
  --warn:#875800; --warn-bg:rgba(230,184,92,.24);
  --danger:#a94444; --danger-bg:rgba(197,82,82,.12);
  --chip-bg:rgba(48,66,81,.07);
  --lang-chip-bg:#3e5363; --lang-chip-fg:#ffffff;
  color-scheme:light;
}

@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg-page:linear-gradient(180deg,#f5f8fa 0%,#e2eaf0 100%);
    --wm-opacity:.5; --wm-filter:invert(1);
    --surface-header:rgba(255,255,255,.7);
    --surface-1:rgba(255,255,255,.62);
    --surface-2:rgba(255,255,255,.92);
    --surface-raised:#ffffff;
    --surface-raised-title:#e6eef4;
    --surface-input:#ffffff;
    --surface-input-h:#f3f7fa;
    --surface-caption:rgba(7,9,11,.88);
    --scrim:rgba(26,35,43,.45);
    --border:rgba(48,66,81,.13);
    --border-strong:rgba(48,66,81,.28);
    --fg:#1a232b;
    --fg-muted:#3e5363;
    --fg-faint:#5a6e81;
    --accent:#304251;
    --focus:#304251;
    --btn-primary:linear-gradient(180deg,#4a5f70,#3e5363);
    --btn-primary-h:linear-gradient(180deg,#566f84,#4a5f70);
    --btn-primary-fg:#ffffff;
    --btn-default:linear-gradient(180deg,#ffffff,#e9f0f5);
    --btn-default-h:linear-gradient(180deg,#ffffff,#dde7ee);
    --btn-default-fg:#304251;
    --btn-default-bd:rgba(48,66,81,.24);
    --btn-danger:linear-gradient(180deg,#c55252,#a94444);
    --btn-danger-h:linear-gradient(180deg,#d46464,#b05050);
    --btn-danger-fg:#ffffff;
    --ok:#2b7a1e; --ok-bg:rgba(85,212,63,.18); --ok-solid:#55d43f; --ok-solid-fg:#07280a;
    --warn:#875800; --warn-bg:rgba(230,184,92,.24);
    --danger:#a94444; --danger-bg:rgba(197,82,82,.12);
    --chip-bg:rgba(48,66,81,.07);
    --lang-chip-bg:#3e5363; --lang-chip-fg:#ffffff;
    color-scheme:light;
  }
}