/* ============================================================
   TOGETHER — Design System · Tokens & Theme
   ------------------------------------------------------------
   Single source of truth for color, type, spacing, elevation.
   Light + dark are token swaps via html[data-theme]; every
   component in ui.css reads ONLY these variables, so a future
   restyle is a one-file change.
   Default theme is dark (brand-consistent). theme.js promotes
   the user's stored choice / system preference before paint.
   ============================================================ */

/* ── Brand fonts (bundled — no external CDN dependency) ── */
@font-face{font-family:'Thmanyah Sans';src:url('/static/fonts/thmanyahsans-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('/static/fonts/thmanyahsans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('/static/fonts/thmanyahsans-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('/static/fonts/thmanyahsans-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('/static/fonts/thmanyahsans-Black.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Thmanyah Serif';src:url('/static/fonts/thmanyahserifdisplay-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Thmanyah Serif';src:url('/static/fonts/thmanyahserifdisplay-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Thmanyah Serif';src:url('/static/fonts/thmanyahserifdisplay-Black.woff2') format('woff2');font-weight:800;font-display:swap}

/* ── Tokens that DON'T change between themes ── */
:root{
  --font-sans:'Thmanyah Sans','Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Thmanyah Serif',Georgia,serif;
  --font-mono:ui-monospace,'Cascadia Mono','Segoe UI Mono','Liberation Mono',monospace;
  --font-arabic:'Thmanyah Sans','DM Sans',sans-serif;

  /* type scale */
  --text-xs:12px; --text-sm:13.5px; --text-base:15px; --text-md:17px;
  --text-lg:19px; --text-xl:22px; --text-2xl:28px; --text-3xl:36px;
  --text-4xl:48px; --text-5xl:72px; --text-6xl:104px;

  /* tracking & line-height */
  --tracking-display:-.045em; --tracking-eyebrow:.22em; --tracking-tight:-.03em;
  --lh-display:.9; --lh-tight:1.08; --lh-body:1.6;

  /* radius */
  --radius-sm:9px; --radius:13px; --radius-lg:18px; --radius-xl:22px;
  --radius-2xl:32px; --radius-full:999px;

  /* spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:22px; --space-6:30px; --space-7:36px; --space-8:44px;
  --space-10:60px; --space-12:96px;

  /* blur */
  --blur:24px; --blur-sm:12px;

  /* brand */
  --accent:#1f8a82;
  --accent-strong:#16706a;
  --accent-text:#ffffff;
  --danger:#ef4444; --danger-soft:rgba(239,68,68,.12);
  --transition:.18s cubic-bezier(.16,1,.3,1);
  --transition-slow:.45s cubic-bezier(.65,0,.35,1);

  --rec:#ef4444;
  --brand-teal:#1f8a82; --brand-sand:#e2b483;

  /* glass (theme-independent base; overridden per-theme below) */
  --glass-bg:rgba(255,255,255,.55);
  --glass-border:rgba(255,255,255,.45);
  --shadow-glass:0 8px 32px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.3) inset;
}

/* ── product accent tints (theme-independent) ── */
[data-product="signlens"],[data-product="handscript"]{
  --p-accent:#1f8a82; --p-accent-soft:rgba(31,138,130,.15); --p-accent-strong:#16706a;
}
[data-product="signbridge"],[data-product="voicebridge"],[data-product="talkside"]{
  --p-accent:#c2873b; --p-accent-soft:rgba(194,135,59,.15); --p-accent-strong:#a06a20;
}
[data-product="handtalk"],[data-product="signtype"]{
  --p-accent:#4c63d2; --p-accent-soft:rgba(76,99,210,.15); --p-accent-strong:#3a4fb0;
}

/* ── DARK (default) ── */
:root,
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a0a0c;
  --sidebar:#0c0c0e;
  --surface:#131316;
  --surface-2:#1a1a1f;
  --border:#25252d;
  --border-strong:#34343d;
  --text:#f4f4f7;
  --muted:#a8a8b3;
  --faint:#6d6d78;
  --accent:#1f8a82;
  --accent-soft:rgba(31,138,130,.15);
  --live:#34d399;
  --live-glow:rgba(52,211,153,.25);
  --ok:#34d399; --ok-soft:rgba(52,211,153,.15);
  --shadow:0 1px 0 rgba(255,255,255,.03), 0 12px 32px rgba(0,0,0,.45);
  --shadow-lg:0 30px 80px rgba(0,0,0,.55);
  --scrim:rgba(4,4,8,.65);
  --viewport:linear-gradient(140deg,#191920,#0e0e14);
  --badge-bg:rgba(8,8,12,.65);
  --skel:#1f8a82;
  --accent-sand:#e2b483; --accent-sand-soft:rgba(226,180,131,.15);
  --glass-bg:rgba(14,14,18,.72);
  --glass-border:rgba(255,255,255,.09);
  --shadow-glass:0 8px 32px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.06) inset;
  --ink:#080808; --paper:#f4f4f1;
  /* gray ramp */
  --gray-50:#f9f9f9; --gray-100:#f0f0f0; --gray-200:#e0e0e0; --gray-300:#c8c8c8;
  --gray-400:#a0a0a0; --gray-500:#808080; --gray-600:#606060; --gray-700:#404040;
  --gray-800:#282828; --gray-900:#181818;
}

/* ── LIGHT ── */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f7f9;
  --sidebar:#ffffff;
  --surface:#ffffff;
  --surface-2:#f1f3f7;
  --border:#c8cdd8;
  --border-strong:#a8b0c2;
  --text:#0e1018;
  --muted:#545868;
  --faint:#969dab;
  --accent:#1f8a82;
  --accent-soft:rgba(31,138,130,.12);
  --live:#059669;
  --live-glow:rgba(5,150,105,.2);
  --ok:#059669; --ok-soft:rgba(5,150,105,.12);
  --shadow:0 1px 3px rgba(14,16,24,.04), 0 10px 30px rgba(14,16,24,.06);
  --shadow-lg:0 30px 80px rgba(14,16,24,.14);
  --scrim:rgba(14,16,24,.38);
  --viewport:linear-gradient(140deg,#eef0f6,#e4e8f0);
  --badge-bg:rgba(14,16,24,.58);
  --skel:#1f8a82;
  --glass-bg:rgba(255,255,255,.55);
  --glass-border:rgba(255,255,255,.45);
  --shadow-glass:0 8px 32px rgba(14,16,24,.10), 0 1px 0 rgba(255,255,255,.6) inset;
  --ink:#080808; --paper:#f4f4f1;
  --gray-50:#f9f9f9; --gray-100:#f0f0f0; --gray-200:#e0e0e0; --gray-300:#c8c8c8;
  --gray-400:#a0a0a0; --gray-500:#808080; --gray-600:#606060; --gray-700:#404040;
  --gray-800:#282828; --gray-900:#181818;
}

/* honor system preference only when the user hasn't chosen
   (theme.js sets data-theme; this is the no-JS fallback) */
@media (prefers-color-scheme:light){
  html:not([data-theme]){
    color-scheme:light;
    --bg:#f6f7f9; --sidebar:#fff; --surface:#fff; --surface-2:#f1f3f7;
    --border:#c8cdd8; --border-strong:#a8b0c2; --text:#0e1018; --muted:#545868;
    --faint:#969dab; --accent:#1f8a82; --accent-soft:rgba(31,138,130,.12);
    --live:#059669; --live-glow:rgba(5,150,105,.2); --ok:#059669; --ok-soft:rgba(5,150,105,.12);
    --shadow:0 1px 3px rgba(14,16,24,.04),0 10px 30px rgba(14,16,24,.06);
    --shadow-lg:0 30px 80px rgba(14,16,24,.14); --scrim:rgba(14,16,24,.38);
    --viewport:linear-gradient(140deg,#eef0f6,#e4e8f0); --badge-bg:rgba(14,16,24,.58); --skel:#1f8a82;
  }
}

/* ── Arabic / RTL ── */
[lang="ar"],[dir="rtl"]{font-family:var(--font-arabic)}

/* ── Reduced-motion global override ── */
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* RTL is driven by [dir="rtl"]; logical properties in ui.css do the mirroring. */