/* =====================================================================
   Osama Abou Hajar — Video Identity · Design Tokens  v1.0
   All sizes are authored on a 1920×1080 logical stage (16:9) or
   1080×1920 (9:16). Render at 4K via deviceScaleFactor — never resize.
   ===================================================================== */

/* ---------- Fonts: IBM Plex family (Arabic · Sans · Mono) ---------- */
@font-face { font-family: "Plex Arabic"; src: url("fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: block; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: "Plex Arabic"; src: url("fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); font-weight: 500; font-display: block; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: "Plex Arabic"; src: url("fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); font-weight: 700; font-display: block; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: "Plex Sans"; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Plex Sans"; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "Plex Sans"; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: block; }
@font-face { font-family: "Plex Sans"; src: url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Plex Mono"; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "Plex Mono"; src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: block; }

:root {
  /* ---------------- Primitive palette ---------------- */
  /* Navy — the "screen / explain" world (Alzubda dark) */
  --navy-950: #0b0f14;   /* stage background */
  --navy-900: #10161e;   /* window body */
  --navy-850: #141b25;   /* card */
  --navy-800: #1a2330;   /* raised: pills, rows */
  --navy-700: #24303f;   /* borders on raised, hover */
  --navy-500: #3a4a5e;

  /* Mint — the channel signature, used in BOTH worlds */
  --mint-200: #b9eedb;
  --mint-300: #7ddbb8;
  --mint-400: #5bcfa5;   /* signature on dark */
  --mint-600: #188a5e;   /* signature on light (AA on cream) */
  --mint-700: #0f6b48;
  --mint-900: #08392a;

  /* Sand — the "talk / studio" world (Alzubda light, warmed) */
  --sand-50:  #fffbee;   /* studio background (butter-cream) */
  --sand-100: #fbf4e2;   /* card on studio */
  --sand-200: #f1e6c9;   /* pills, rows */
  --sand-300: #e3d2a6;   /* borders */
  --gold-500: #c4973b;   /* secondary accent: numbers, kickers on light */
  --gold-600: #a67d2d;

  /* Ink */
  --ink-900: #0b1220;
  --ink-600: #4b5563;
  --ink-500: #5b6573;
  --paper:   #f3f4f6;
  --paper-2: #a0a8b4;

  /* Semantic */
  --red-500: #ef5350;    /* "wrong / don't" side of compare only */
  --red-600: #c62828;

  /* Company colours (from alzubda.news, use only inside logo context) */
  --co-openai: #10a37f; --co-anthropic: #d4622a; --co-google: #4285f4;
  --co-microsoft: #00bcf2; --co-meta: #f97316; --co-xai: #6b7280;

  /* ---------------- Typography ---------------- */
  --font-ar:   "Plex Arabic", "Plex Sans", system-ui, sans-serif;
  --font-en:   "Plex Sans", "Plex Arabic", system-ui, sans-serif;
  --font-mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale @1920 stage. Arabic needs ~1.35 line-height minimum. */
  --fs-display: 112px;  /* sting title, chapter number */
  --fs-h1: 76px;        /* key-card title (big) */
  --fs-h2: 56px;        /* key-card title (small), compare title */
  --fs-h3: 44px;        /* list items, list header */
  --fs-body: 34px;      /* sub lines */
  --fs-small: 28px;     /* meta, lower-third role */
  --fs-label: 20px;     /* MONO uppercase labels */
  --lh-tight: 1.2;
  --lh-ar: 1.4;
  --tracking-label: 0.14em;

  /* ---------------- Space / shape ---------------- */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --r-sm: 12px;     /* pills, chips, logo tiles small */
  --r-md: 20px;     /* cards small, code */
  --r-lg: 28px;     /* cards big, camera frame, window */
  --r-pill: 999px;
  --hair: 1.5px;    /* line weight for borders at 1080 */
  --stroke: 4px;    /* drawn lines, rings */

  /* Safe areas */
  --safe-x: 96px; --safe-y: 72px;             /* 16:9 title-safe */
  --short-safe-top: 220px; --short-safe-bottom: 440px; --short-safe-right: 150px; /* 9:16 (Shorts UI) */

  /* ---------------- Motion ---------------- */
  --dur-xs: .18s; --dur-sm: .32s; --dur-md: .5s; --dur-lg: .8s; --dur-xl: 1.2s;
  /* GSAP equivalents live in motion.js → BRAND.ease */
}

/* ---------------- Themes (semantic roles) ----------------
   data-theme="light"  → TALK world   (presenter, studio frame)
   data-theme="dark"   → SCREEN world (explaining on screen)        */
[data-theme="dark"], .theme-dark {
  --bg: var(--navy-950);
  --surface: var(--navy-850);
  --surface-glass: rgba(16, 22, 30, 0.92);
  --raised: var(--navy-800);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: var(--paper);
  --text-2: var(--paper-2);
  --text-3: #6b7685;
  --accent: var(--mint-400);
  --accent-ink: var(--navy-950);        /* text on accent fill */
  --accent-soft: rgba(91, 207, 165, 0.14);
  --accent-glow: rgba(91, 207, 165, 0.22);
  --second: var(--gold-500);
  --dot: rgba(91, 207, 165, 0.16);
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(255,255,255,0.03) inset;
  --cam-ring: var(--mint-400);
}
[data-theme="light"], .theme-light {
  --bg: var(--sand-50);
  --surface: #ffffff;
  --surface-glass: rgba(255, 253, 247, 0.94);
  --raised: #f7efdc;
  --line: rgba(11, 18, 32, 0.08);
  --line-strong: rgba(11, 18, 32, 0.16);
  --text: var(--ink-900);
  --text-2: var(--ink-500);
  --text-3: #8a8f98;
  --accent: var(--mint-600);
  --accent-ink: #ffffff;
  --accent-soft: rgba(24, 138, 94, 0.10);
  --accent-glow: rgba(91, 207, 165, 0.18);
  --second: var(--gold-600);
  --dot: rgba(11, 18, 32, 0.13);
  --shadow: 0 24px 60px rgba(60, 45, 10, 0.14), 0 1px 0 rgba(255,255,255,0.8) inset;
  --cam-ring: #ffffff;
}