/* Hallmark · genre: modern-minimal · macrostructure: workbench · tone: calm, plain-spoken
   palette anchor: hue 165 (green), neutrals tinted toward 175-200 · fonts: Readex Pro (display) + IBM Plex Sans Arabic (text), self-hosted
   nav: N5 floating pill · footer: Ft2 inline single line · Locked tokens: every colour and font in site.css and legal.css comes from here.
   Light is the default; dark follows the visitor's system unless they chose a theme (data-theme, stored as zeky_theme). */

@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 160 700;
  font-display: swap;
  src: url("/assets/fonts/readex-pro-latin-wght-normal.woff2") format("woff2-variations");
  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: "Readex Pro";
  font-style: normal;
  font-weight: 160 700;
  font-display: swap;
  src: url("/assets/fonts/readex-pro-arabic-wght-normal.woff2") format("woff2-variations");
  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-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/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+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-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/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+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  color-scheme: light dark;

  /* Colour — light */
  --color-paper: oklch(97.5% 0.008 175);
  --color-paper-2: oklch(95% 0.010 175);
  --color-paper-3: oklch(91.5% 0.013 175);
  --color-rule: oklch(86% 0.012 180);
  --color-neutral: oklch(50% 0.014 190);
  --color-muted: oklch(41% 0.015 195);
  --color-ink: oklch(20% 0.015 200);
  --color-accent: oklch(46% 0.115 165);
  --color-accent-hover: oklch(40% 0.105 165);
  --color-accent-ink: oklch(98% 0.006 175);
  --color-accent-soft: oklch(93.5% 0.035 165);
  --color-focus: oklch(40% 0.12 165);
  --color-warn: oklch(94% 0.055 85);
  --color-warn-rule: oklch(76% 0.12 80);
  --color-warn-ink: oklch(35% 0.075 65);
  --color-plate: oklch(98.5% 0.004 175);
  --color-shadow: oklch(20% 0.015 200 / 0.14);

  /* Device mockup: the same in both themes (it is a physical object) */
  --device-body: oklch(34% 0.006 250);
  --device-hi: oklch(56% 0.006 250);
  --device-lo: oklch(21% 0.005 250);
  --device-rim: oklch(68% 0.006 250);
  --device-bezel: oklch(9% 0.003 250);
  --device-island: oklch(5% 0.002 250);
  --device-glass: oklch(14% 0.004 250);
  --device-glare: oklch(100% 0 0 / 0.09);
  --device-shadow: oklch(18% 0.02 200 / 0.38);
  --device-shadow-near: oklch(18% 0.02 200 / 0.16);

  /* Type */
  --font-display: "Readex Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
  --font-body: "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;

  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --text-display: clamp(2.25rem, 1.4rem + 4vw, 4rem);

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.65;
  --lh-arabic: 1.85;

  --measure: 62ch;

  /* Space — 4pt scale */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 62.5rem;
  --rule-hair: 1px;
  --target: 2.75rem;
  --page-gutter: max(var(--space-md), env(safe-area-inset-left));
  --page-width: 72rem;
  --prose-width: 46rem;

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

  /* Layers */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
  --z-sticky-nav: 300;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper: oklch(15% 0.012 190);
    --color-paper-2: oklch(19% 0.014 190);
    --color-paper-3: oklch(23.5% 0.016 190);
    --color-rule: oklch(32% 0.014 190);
    --color-neutral: oklch(64% 0.013 190);
    --color-muted: oklch(75% 0.012 185);
    --color-ink: oklch(94% 0.008 175);
    --color-accent: oklch(72% 0.125 165);
    --color-accent-hover: oklch(78% 0.115 165);
    --color-accent-ink: oklch(17% 0.02 190);
    --color-accent-soft: oklch(26% 0.04 170);
    --color-focus: oklch(80% 0.12 165);
    --color-warn: oklch(26% 0.045 80);
    --color-warn-rule: oklch(55% 0.1 80);
    --color-warn-ink: oklch(88% 0.07 85);
    --color-shadow: oklch(5% 0.01 190 / 0.5);
  }
}

:root[data-theme="dark"] {
  --color-paper: oklch(15% 0.012 190);
  --color-paper-2: oklch(19% 0.014 190);
  --color-paper-3: oklch(23.5% 0.016 190);
  --color-rule: oklch(32% 0.014 190);
  --color-neutral: oklch(64% 0.013 190);
  --color-muted: oklch(75% 0.012 185);
  --color-ink: oklch(94% 0.008 175);
  --color-accent: oklch(72% 0.125 165);
  --color-accent-hover: oklch(78% 0.115 165);
  --color-accent-ink: oklch(17% 0.02 190);
  --color-accent-soft: oklch(26% 0.04 170);
  --color-focus: oklch(80% 0.12 165);
  --color-warn: oklch(26% 0.045 80);
  --color-warn-rule: oklch(55% 0.1 80);
  --color-warn-ink: oklch(88% 0.07 85);
  --color-shadow: oklch(5% 0.01 190 / 0.5);
}

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