:root {
  /* Typography */
  --font-display: "Tektur", "Orbitron", "Chakra Petch", system-ui, sans-serif;
  --font-sans: "Outfit", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Layout */
  --gutter: clamp(20px, 5.6vw, 72px);
  --content-max: 760px;
  --maze-w: clamp(150px, 22.57vw, 320px);
  --maze-bg-w: var(--maze-w); 
  --maze-tile-ratio: 15.514; 

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --theme-fade: 0.45s;
}

:root[lang="ar"] {
  --font-display: "Cairo", "Tahoma", system-ui, sans-serif;
  --font-sans: "Cairo", "Tahoma", system-ui, sans-serif;
  --font-mono: "Cairo", "Tahoma", system-ui, sans-serif;
}


:root[lang="ar"] .eyebrow {
  letter-spacing: normal;
  text-transform: none;
}

:root[lang="ar"][data-theme="light"] .eyebrow__text,
:root[lang="ar"][data-theme="dark"] .eyebrow__text {
  letter-spacing: normal;
}

:root[lang="ar"] .section-label {
  letter-spacing: normal;
  text-transform: none;
}

:root[lang="ar"] .hero__proof {
  text-transform: none;
}

:root[lang="ar"] .hero__proof strong,
:root[lang="ar"] .hero__proof span {
  letter-spacing: normal;
}

:root[lang="ar"] .video-dialog__msg {
  letter-spacing: normal;
  text-transform: none;
}

:root[lang="ar"] .evidence__title {
  letter-spacing: normal;
}

/* ------------------------------- LIGHT -------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f6f5f0;
  --ink: #0c0c0c;
  --ink-soft: #52565b;
  --ink-mute: #7b7e82;

  --line: #cfcec8;
  --line-strong: #4a4a48;
  --field: #9d9c97;
  --placeholder: #b5b4ae;
  --ctrl-border: #8f8e89;

  --btn-bg: #0c0c0c;
  --btn-ink: #f6f5f0;

  /* network + diagram */
  --net-dot: #b8b6b0;
  --net-line: #d4d2cc;
  --net-line-on: #aaa8a2;
  --net-icon: #a5a39d;
  --net-accent: #0c0c0c;

  --node-fill: #f6f5f0;
  --node-fill-idle: #f6f5f0;
  --node-stroke: #0c0c0c;
  --node-stroke-idle: #bdbbb5;
  --node-stroke-w: 3.6;
  --node-stroke-w-idle: 3;
  --node-icon: #0c0c0c;
  --node-icon-idle: #b0aea8;
  --node-ring-inner: transparent;
  --halo: #c9c7c1;

  --flow-line: #0c0c0c;
  --flow-line-w: 3;
  --glow: rgba(0, 0, 0, 0.28);

  --play-bg: #161616;
  --play-ink: #f6f5f0;
  --play-ring: #a9a7a1;

  --flow-title-font: var(--font-sans);
  --flow-title-weight: 600;
  --evidence-weight: 800;
  --hero-weight: 800;
}

/* -------------------------------- DARK -------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #090909;
  --ink: #f4f3ee;
  --ink-soft: #d4d3ce;
  --ink-mute: #9a9a96;

  --line: #3a3a3a;
  --line-strong: #6c6c6c;
  --field: #4a4a4a;
  --placeholder: #8d8d89;
  --ctrl-border: #6a6a6a;

  --btn-bg: #f4f3ee;
  --btn-ink: #0a0a0a;

  --net-dot: #5b5b5b;
  --net-line: #2b2b2b;
  --net-line-on: #707070;
  --net-icon: #8a8a8a;
  --net-accent: #ffffff;

  --node-fill: #f4f3ee;
  --node-fill-idle: #1a1a1a;
  --node-stroke: #f4f3ee;
  --node-stroke-idle: #565656;
  --node-stroke-w: 0;
  --node-stroke-w-idle: 1.5;
  --node-icon: #0a0a0a;
  --node-icon-idle: #7a7a7a;
  --node-ring-inner: #0a0a0a;
  --halo: #5a5a5a;

  --flow-line: #f4f3ee;
  --flow-line-w: 2.2;
  --glow: rgba(255, 255, 255, 0.6);

  --play-bg: #f4f3ee;
  --play-ink: #0a0a0a;
  --play-ring: #f4f3ee;

  --flow-title-font: var(--font-display);
  --flow-title-weight: 600;
  --evidence-weight: 700;
  --hero-weight: 800;

  --maze-w: clamp(170px, 26.2vw, 360px);
  --maze-tile-ratio: 13.387; /* 3320 / 248 */
}