/* Design tokens. Components must reference these, never raw values. */

/* IBM Plex Sans Arabic — self-hosted, split by script so each page only
   downloads the subsets it actually renders. */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/plex-arabic-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-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-style: normal;
  font-display: swap;
  src: url("../fonts/plex-arabic-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-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-style: normal;
  font-display: swap;
  src: url("../fonts/plex-arabic-latin-400.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+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-style: normal;
  font-display: swap;
  src: url("../fonts/plex-arabic-latin-600.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Follows the device by default; [data-theme] is the user's manual override. */
  color-scheme: light dark;

  /* Color — light-dark(light, dark). #ebebeb is the brand neutral:
     surface in light mode, text in dark mode. */
  --color-bg: light-dark(#ffffff, #111214);
  --color-surface: light-dark(#ebebeb, #1c1d20);
  --color-surface-raised: light-dark(#f6f6f6, #26272b);
  --color-border: light-dark(#d6d6d6, #34363b);
  --color-border-strong: light-dark(#8c8c8c, #70747c);
  --color-text: light-dark(#141414, #ebebeb);
  --color-text-muted: light-dark(#5a5a5a, #a4a6ac);
  --color-accent: light-dark(#2f5bea, #86a3ff);
  --color-accent-hover: light-dark(#2449c7, #a3b9ff);
  --color-accent-soft: light-dark(#e9eefd, #1b2547);
  --color-on-accent: light-dark(#ffffff, #0b1024);
  --color-focus: light-dark(#2f5bea, #86a3ff);
  --color-warning: light-dark(#92400e, #f0b45a);
  --color-warning-soft: light-dark(#fdf3e1, #33270f);

  /* Typography */
  --font-sans: "IBM Plex Sans Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, "IBM Plex Sans Arabic", monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  --leading-tight: 1.3;
  --leading-normal: 1.7; /* Arabic needs more line height than Latin */
  --weight-regular: 400;
  --weight-bold: 600;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Shape & layout */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --tap-target: 44px;
  --header-height: 3.75rem;
  --content-width: 76rem;

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}