/* Site theme: roles the website needs that the design system does not define yet.
   Every value derives from system primitives or tokens; see README "ثغرات في نظام التصميم". */

/* ---------- Fonts (subset woff2, OFL — see assets/fonts) ---------- */
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url(../../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-display: swap; src: url(../../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url(../../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-display: swap; src: url(../../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url(../../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-display: swap; src: url(../../fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url(../../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-display: swap; src: url(../../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Kufi Arabic"; font-weight: 800; font-display: swap; src: url(../../fonts/noto-kufi-arabic-arabic-800-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

/* ---------- Theme-independent site roles ---------- */
:root {
  /* Web layout (gap 2): derived from space-* */
  --site-max: calc(var(--space-12) * 24);          /* 1152px */
  --site-gutter: var(--space-4);
  --site-section: calc(var(--space-12) * 2);
  /* Web display sizes (gap 1): the system tops out at display-xl 48px */
  --site-display: clamp(var(--type-display-size), 4.6vw, calc(var(--type-display-xl-size) * 2));
  --site-chapter: clamp(var(--type-display-sm-size), 3.4vw, var(--type-display-xl-size));
  /* Web motion (gap 8) */
  --motion-word: 560ms;
  --motion-word-stagger: 28ms;
  --glass-blur: 20px;
}
@media (min-width: 760px) {
  :root { --site-gutter: var(--space-12); --site-section: calc(var(--space-12) * 3); }
}

/* ---------- Themed site roles: light ---------- */
:root,
[data-theme="light"] {
  --tablet-face: var(--clay-300);
  --tablet-shade: var(--clay-450);
  --tablet-edge: var(--clay-600);
  --tablet-engrave: var(--clay-600);
  --tablet-highlight: var(--clay-100);
  --marker-ring: var(--neutral-50);                 /* gap 4: spec says pure white */
  --marker-arrow-a: var(--neutral-800);
  --marker-arrow-b: var(--brand-ink);
  --logo-edge: var(--neutral-300);                  /* gap 6: logo guide gives a literal edge colour */
  --building-roof: color-mix(in srgb, var(--map-block) 55%, var(--neutral-50));   /* gap 3 */
  --window-light: var(--clay-100);
  --stage-fade: var(--surface-canvas);
  /* Baghdad landmarks and palms in the 3D city (gap 11: the map palette has no landmark colours) */
  --landmark-stone: color-mix(in srgb, var(--neutral-50) 85%, var(--status-warning));
  --landmark-bronze: var(--clay-600);
  --landmark-dome: color-mix(in srgb, var(--brand-route) 45%, var(--status-success));
  --landmark-gold: color-mix(in srgb, var(--status-warning) 55%, var(--clay-100));
  --building-brick: color-mix(in srgb, var(--status-warning) 22%, var(--map-block));
  --palm-leaf: color-mix(in srgb, var(--status-success) 70%, var(--map-park));
  --palm-trunk: var(--clay-450);
  /* Glass map UI: translucent surfaces over the live map (gap 12: the design system has no glass roles) */
  --glass-surface: color-mix(in srgb, var(--surface-base) 60%, transparent);
  --glass-surface-strong: color-mix(in srgb, var(--maneuver-bg) 66%, transparent);
  --glass-sunken: color-mix(in srgb, var(--surface-sunken) 55%, transparent);
  --glass-panel: color-mix(in srgb, var(--stage-fade) 72%, transparent);
  --glass-edge: color-mix(in srgb, var(--surface-raised) 70%, transparent);
  --glass-sheen: color-mix(in srgb, var(--surface-raised) 45%, transparent);
}

/* ---------- Themed site roles: night ---------- */
[data-theme="dark"] {
  --tablet-face: var(--clay-500);
  --tablet-shade: var(--clay-600);
  --tablet-edge: var(--neutral-900);
  --tablet-engrave: var(--neutral-950);
  --tablet-highlight: var(--clay-300);
  --marker-ring: var(--neutral-50);
  --marker-arrow-a: var(--neutral-800);
  --marker-arrow-b: var(--brand-ink);
  --logo-edge: var(--neutral-800);
  --building-roof: color-mix(in srgb, var(--map-block) 70%, var(--neutral-800));
  --window-light: color-mix(in srgb, var(--status-warning) 70%, var(--clay-100));
  --stage-fade: var(--surface-canvas);
  --landmark-stone: color-mix(in srgb, var(--status-warning) 45%, var(--clay-600));
  --landmark-bronze: var(--clay-500);
  --landmark-dome: color-mix(in srgb, var(--brand-route) 50%, var(--status-success));
  --landmark-gold: color-mix(in srgb, var(--status-warning) 85%, var(--clay-100));
  --building-brick: color-mix(in srgb, var(--clay-600) 30%, var(--map-block));
  --palm-leaf: color-mix(in srgb, var(--map-park) 55%, var(--status-success));
  --palm-trunk: var(--clay-600);
  --glass-surface: color-mix(in srgb, var(--surface-base) 58%, transparent);
  --glass-surface-strong: color-mix(in srgb, var(--maneuver-bg) 62%, transparent);
  --glass-sunken: color-mix(in srgb, var(--surface-sunken) 45%, transparent);
  --glass-panel: color-mix(in srgb, var(--stage-fade) 58%, transparent);
  --glass-edge: color-mix(in srgb, var(--text-primary) 16%, transparent);
  --glass-sheen: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tablet-face: var(--clay-500);
    --tablet-shade: var(--clay-600);
    --tablet-edge: var(--neutral-900);
    --tablet-engrave: var(--neutral-950);
    --tablet-highlight: var(--clay-300);
    --logo-edge: var(--neutral-800);
    --building-roof: color-mix(in srgb, var(--map-block) 70%, var(--neutral-800));
    --window-light: color-mix(in srgb, var(--status-warning) 70%, var(--clay-100));
    --landmark-stone: color-mix(in srgb, var(--status-warning) 45%, var(--clay-600));
    --landmark-bronze: var(--clay-500);
    --landmark-dome: color-mix(in srgb, var(--brand-route) 50%, var(--status-success));
    --landmark-gold: color-mix(in srgb, var(--status-warning) 85%, var(--clay-100));
    --building-brick: color-mix(in srgb, var(--clay-600) 30%, var(--map-block));
    --palm-leaf: color-mix(in srgb, var(--map-park) 55%, var(--status-success));
    --palm-trunk: var(--clay-600);
    --glass-surface: color-mix(in srgb, var(--surface-base) 58%, transparent);
    --glass-surface-strong: color-mix(in srgb, var(--maneuver-bg) 62%, transparent);
    --glass-sunken: color-mix(in srgb, var(--surface-sunken) 45%, transparent);
    --glass-panel: color-mix(in srgb, var(--stage-fade) 58%, transparent);
    --glass-edge: color-mix(in srgb, var(--text-primary) 16%, transparent);
    --glass-sheen: color-mix(in srgb, var(--text-primary) 8%, transparent);
  }
}