/* ==========================================================================
   DESIGN TOKENS — CSS Custom Properties
   All font declarations and design tokens live here.
   Import order: tokens → primitives → components → layouts → utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   Self-hosted fonts
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cairo-arabic.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, U+102E0-102FB, U+10E60-10E7E,
    U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F,
    U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37,
    U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F,
    U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F,
    U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77,
    U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3,
    U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cairo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cairo-latin.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: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.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;
}

/* --------------------------------------------------------------------------
   Design tokens — light mode (default)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Font family */
  --font-ar: 'Cairo', sans-serif;
  --font-en: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;
  --line-height-relaxed: 1.75;
  --line-height-tight: 1.2;

  /* Color — backgrounds */
  --color-bg: #f4f7fb;
  --color-bg-light: #ffffff;
  --color-surface: #ffffff;
  --color-surface-soft: #eef3f9;

  /* Color — text */
  --color-text: #0f172a;
  --color-text-secondary: #334155;
  --color-text-muted: #5b6475;
  --color-muted: #5b6475;

  /* Color — UI borders */
  --color-border: #d7dfeb;
  --color-border-light: #e5e7eb;
  --color-divider: #edf2f8;

  /* Color — brand */
  --color-primary: #0b7a5a;
  --color-primary-dark: #075f46;
  --color-primary-light: #d1fae5;
  --color-accent: #0ea5c6;
  --color-accent-dark: #0891b2;

  /* Color — feedback */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-hover: 0 18px 44px rgba(15, 23, 42, 0.14);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* Spacing — 8pt scale */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;

  /* Containers */
  --container-max: 1280px;
  --container-lg: 1200px;
  --container-md: 1100px;
  --container-sm: 900px;
  --container-narrow: 760px;
  --container-article: 760px;
  --page-max: 1100px;
  --measure: 72ch;

  /* Card tokens */
  --card-radius: 16px;
  --card-border: 1px solid rgba(15, 23, 42, 0.1);
  --card-padding: 20px;
  --card-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);

  /* Transitions (legacy aliases) */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Motion — design system tokens */
  --motion-quick: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-base:  180ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-slow:  280ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Shell */
  --nav-height: 82px;
}

/* --------------------------------------------------------------------------
   Dark mode token overrides
   -------------------------------------------------------------------------- */
html.dark {
  /* Backgrounds */
  --color-bg: #0b1f17;
  --color-bg-light: #122a21;
  --color-surface: #122a21;
  --color-surface-soft: #10261f;

  /* Text */
  --color-text: #e8fff4;
  --color-text-secondary: #c7d9cf;
  --color-text-muted: #b7e5d3;
  --color-muted: #b7e5d3;

  /* UI */
  --color-border: #334155;
  --color-border-light: #2d3748;
  --color-divider: #1f2937;

  /* Brand */
  --color-primary: #50c878;
  --color-primary-dark: #2fae72;
  --color-primary-light: #d1fae5;
  --color-accent: #7be8c0;
  --color-accent-dark: #5ac9a8;

  /* Feedback */
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-error: #f87171;

  --card-border: 1px solid rgba(80, 200, 120, 0.25);
}