/* ============================================================
   warif.ai — Design Tokens
   Self-host all fonts in production. Do not load from Google.
   ============================================================ */

:root {
  /* --- Green (primary) --------------------------------------- */
  --warif-green-950: #06211C;
  --warif-green-900: #0A2E27;
  --warif-green-800: #0E3D33; /* PRIMARY BRAND GREEN */
  --warif-green-700: #155146;
  --warif-green-600: #1E6B5C;
  --warif-green-500: #3E8B7A;
  --warif-green-400: #6FAE9F;
  --warif-green-300: #A7CDC3;
  --warif-green-200: #D6E7E2;
  --warif-green-100: #EEF5F3;

  /* --- Brass (accent) ---------------------------------------- */
  --warif-brass-800: #6B4C1A;
  --warif-brass-700: #7E5A1F; /* small text on light — AA safe */
  --warif-brass-600: #A97C34; /* mark + graphics on light */
  --warif-brass-500: #C79A4E; /* mark + text on dark — AA safe */
  --warif-brass-400: #D9B472;
  --warif-brass-200: #E7CE9E;
  --warif-brass-100: #F5EBD8;

  /* --- Neutrals (warm, paper-leaning) ------------------------ */
  --warif-ink:        #14201C;
  --warif-neutral-800:#2B3733;
  --warif-neutral-600:#5A6662;
  --warif-neutral-400:#8E9793;
  --warif-neutral-200:#D6D8D3;
  --warif-neutral-100:#E9E7E0;
  --warif-paper:      #F2EFE6;
  --warif-white:      #FFFFFF;

  /* --- Semantic ---------------------------------------------- */
  --color-bg:            var(--warif-paper);
  --color-bg-raised:     var(--warif-white);
  --color-bg-inverse:    var(--warif-green-800);
  --color-text:          var(--warif-ink);
  --color-text-muted:    var(--warif-neutral-600);
  --color-text-inverse:  var(--warif-paper);
  --color-accent:        var(--warif-brass-700);
  --color-accent-on-dark:var(--warif-brass-500);
  --color-border:        var(--warif-neutral-200);
  --color-focus:         var(--warif-brass-600);

  /* --- Typefaces --------------------------------------------- */
  --font-ar-display: "Noto Kufi Arabic", sans-serif;
  --font-ar-body:    "Noto Sans Arabic", sans-serif;
  --font-en-display: "Archivo", sans-serif;
  --font-en-body:    "Noto Sans", sans-serif;
  --font-mono:       "IBM Plex Mono", ui-monospace, monospace;

  /* --- Type scale: Arabic ------------------------------------ */
  --ar-h1: 38px;  --ar-h1-lh: 1.40;
  --ar-h2: 30px;  --ar-h2-lh: 1.50;
  --ar-h3: 22px;  --ar-h3-lh: 1.60;
  --ar-h4: 17px;  --ar-h4-lh: 1.70;
  --ar-body: 18px;      --ar-body-lh: 1.95;
  --ar-body-sm: 16px;   --ar-body-sm-lh: 1.85;
  --ar-caption: 14px;   --ar-caption-lh: 1.80;
  --ar-label: 13px;     --ar-label-lh: 1.60;

  /* --- Type scale: Latin (one step tighter than Arabic) ------ */
  --en-h1: 36px;  --en-h1-lh: 1.20;
  --en-h2: 28px;  --en-h2-lh: 1.30;
  --en-h3: 21px;  --en-h3-lh: 1.40;
  --en-h4: 16px;  --en-h4-lh: 1.50;
  --en-body: 17px;      --en-body-lh: 1.65;
  --en-body-sm: 15px;   --en-body-sm-lh: 1.60;
  --en-caption: 13px;   --en-caption-lh: 1.55;
  --en-label: 12px;     --en-label-lh: 1.40;

  /* Weights. Never exceed 500 for Arabic — Kufi turns to a slab. */
  --weight-regular: 400;
  --weight-medium:  500;

  /* --- Spacing (4px base) ------------------------------------ */
  --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: 96px;
  --space-10: 128px;

  /* --- Radius / motion --------------------------------------- */
  --radius-sm: 4px;  --radius-md: 8px;  --radius-lg: 14px;
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --ease: cubic-bezier(0.2, 0, 0.1, 1);

  --logo-min-width: 96px;   /* full lockup */
  --mark-min-size: 24px;    /* mark alone; below this use the compact mark */
}

/* --- Language-aware defaults --------------------------------- */
html[lang="ar"] body { font-family: var(--font-ar-body); font-size: var(--ar-body); line-height: var(--ar-body-lh); }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 { font-family: var(--font-ar-display); font-weight: var(--weight-medium); }
html[lang="en"] body { font-family: var(--font-en-body); font-size: var(--en-body); line-height: var(--en-body-lh); }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] h4 { font-family: var(--font-en-display); font-weight: 600; }

/* Numerals stay Latin in both languages, for data consistency. */
html[lang="ar"] { font-variant-numeric: lining-nums; }

/* --- Direction-agnostic layout ------------------------------- */
/* Use logical properties everywhere. Never left/right. */
.stack > * + * { margin-block-start: var(--space-4); }
.section       { padding-block: var(--space-9); }
.prose         { max-inline-size: 68ch; }
.text-start    { text-align: start; }

/* --- Focus (must stay visible) ------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}