/* ============================================================
   Tarabut Design System — colors_and_type.css
   Single source of truth for color tokens, type scale, spacing,
   radii, shadows, and motion.

   Usage:
     <link rel="stylesheet" href="colors_and_type.css" />
   then reference tokens as:
     color: var(--fg-1);
     font-family: var(--font-sans);

   All colors are in oklch() for perceptual uniformity.
   ============================================================ */

/* ---------- Latin webfonts (Google CDN) ----------
   Manrope = body/UI (paired with the brand display font, New Black).
   IBM Plex Mono  = code/numeric tabular.*/
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=block');

/* ---------- Arabic webfonts (Google CDN) ----------
   Noto Naskh Arabic = body / running text
   IBM Plex Sans Arabic + Amiri = fallbacks */
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Amiri:wght@400;700&display=block');

/* ---------- Brand Latin display — New Black Typeface (self-hosted) ----------
   Uploaded by Tarabut. Same family as the logo wordmark, so it carries the brand
   into every headline. Seven weights available; reserve for display sizes (≥20px). */
@font-face {
  font-family: 'New Black';
  src: url('fonts/NewBlackTypeface-UltraLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'New Black';
  src: url('fonts/NewBlackTypeface-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'New Black';
  src: url('fonts/NewBlackTypeface-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'New Black';
  src: url('fonts/NewBlackTypeface-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'New Black';
  src: url('fonts/NewBlackTypeface-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'New Black';
  src: url('fonts/NewBlackTypeface-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'New Black';
  src: url('fonts/NewBlackTypeface-ExtraBold.otf') format('opentype');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Brand Arabic — Helvetica Neue Arabic (self-hosted) ----------
   Uploaded by Tarabut. Registered under "Helvetica Neue" so it slots into
   the standard Helvetica stack and renders on every device. */
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/alfont_com_________-____-.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLORS — Cairo Paper palette
     ============================================================ */

  /* --- Paper / neutrals (warm) --- */
  --paper:        oklch(0.975 0.008 78);   /* warm ivory — page background */
  --paper-2:      oklch(0.955 0.010 78);   /* subtle card background       */
  --paper-3:      oklch(0.928 0.012 78);   /* hover / pressed surface      */
  --rule:         oklch(0.880 0.013 78);   /* divider lines, faint borders */
  --rule-strong:  oklch(0.800 0.015 78);   /* visible borders              */

  /* --- Ink / foreground --- */
  --ink:          oklch(0.205 0.018 205);  /* primary text — deep slate-teal */
  --ink-2:        oklch(0.380 0.020 205);  /* secondary text, captions       */
  --ink-3:        oklch(0.560 0.018 205);  /* tertiary, placeholders         */
  --ink-inverse:  oklch(0.975 0.008 78);   /* text on dark surfaces          */

  /* --- Clay (primary brand) — terracotta --- */
  --clay-50:      oklch(0.962 0.018 25);
  --clay-100:     oklch(0.920 0.038 25);
  --clay-200:     oklch(0.840 0.075 25);
  --clay-300:     oklch(0.760 0.110 25);
  --clay-400:     oklch(0.685 0.135 25);
  --clay:         oklch(0.605 0.145 25);   /* DEFAULT brand color — rose clay */
  --clay-600:     oklch(0.535 0.135 25);   /* hover               */
  --clay-700:     oklch(0.460 0.120 25);   /* pressed             */
  --clay-800:     oklch(0.380 0.095 25);
  --clay-900:     oklch(0.290 0.070 25);

  /* --- Palm (secondary) — deep cypress --- */
  --palm-50:      oklch(0.962 0.018 165);
  --palm-100:     oklch(0.910 0.040 165);
  --palm-300:     oklch(0.650 0.080 165);
  --palm:         oklch(0.420 0.070 165);  /* DEFAULT */
  --palm-700:     oklch(0.330 0.060 165);

  /* --- Saffron (accent/highlight, use sparingly) --- */
  --saffron-100: oklch(0.960 0.040 80);
  --saffron-300: oklch(0.870 0.110 80);
  --saffron:     oklch(0.780 0.130 78);    /* DEFAULT */
  --saffron-700: oklch(0.610 0.110 78);

  /* --- Surface roles --- */
  --bg:           var(--paper);
  --bg-elevated:  var(--paper-2);
  --bg-sunken:    var(--paper-3);
  --bg-inverse:   oklch(0.165 0.018 205);  /* near-black ink for dark sections */

  /* --- Foreground roles --- */
  --fg-1:         var(--ink);
  --fg-2:         var(--ink-2);
  --fg-3:         var(--ink-3);
  --fg-inverse:   var(--ink-inverse);
  --fg-brand:     var(--clay);
  --fg-link:      var(--clay-700);

  /* --- Semantic --- */
  --success:      oklch(0.560 0.110 155);
  --success-bg:   oklch(0.945 0.030 155);
  --warning:      oklch(0.700 0.140 70);
  --warning-bg:   oklch(0.960 0.045 70);
  --danger:       oklch(0.540 0.180 25);
  --danger-bg:    oklch(0.955 0.035 25);
  --info:         oklch(0.490 0.080 240);
  --info-bg:      oklch(0.950 0.020 240);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  /* Latin body/UI — Manrope (Google CDN). Neutral, geometric, sits calmly
     under the New Black display headlines. */
  --font-sans:    "Manrope", "Noto Naskh Arabic", -apple-system, BlinkMacSystemFont, sans-serif;
  /* Arabic body — Noto Naskh Arabic, the running-text choice */
  --font-sans-ar: "Noto Naskh Arabic", "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
  /* Latin display/headlines — New Black (same family as the logo wordmark) */
  --font-serif:   "New Black", "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "New Black", "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  /* Arabic display / headlines — Helvetica stack */
  --font-serif-ar:"Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — perfect fourth (1.333) shifted for editorial feel */
  --fs-xs:    0.75rem;   /* 12px  — micro labels       */
  --fs-sm:    0.875rem;  /* 14px  — captions, meta     */
  --fs-base:  1rem;      /* 16px  — body               */
  --fs-md:    1.125rem;  /* 18px  — lede / lift body   */
  --fs-lg:    1.375rem;  /* 22px  — section subtitle   */
  --fs-xl:    1.75rem;   /* 28px  — H3                 */
  --fs-2xl:   2.25rem;   /* 36px  — H2                 */
  --fs-3xl:   3rem;      /* 48px  — H1                 */
  --fs-4xl:   4rem;      /* 64px  — hero display       */
  --fs-5xl:   5.5rem;    /* 88px  — XL hero            */

  /* Line heights — tighter for display, generous for body */
  --lh-tight:   1.08;   /* @kind font */
  --lh-snug:    1.22;   /* @kind font */
  --lh-normal:  1.55;   /* @kind font */
  --lh-relaxed: 1.7;    /* @kind font */

  --tracking-tight:  -0.022em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;   /* for SMALL CAPS labels */

  --fw-regular:  400;   /* @kind font */
  --fw-medium:   500;   /* @kind font */
  --fw-semibold: 600;   /* @kind font */
  --fw-bold:     700;   /* @kind font */

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ============================================================
     RADII — modest, editorial. No pillowy corners.
     ============================================================ */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — soft, warm, low. Layered with ink tint.
     ============================================================ */
  --shadow-sm:   0 1px 2px oklch(0.20 0.018 205 / 0.06);
  --shadow:      0 2px 4px oklch(0.20 0.018 205 / 0.04),
                 0 4px 12px oklch(0.20 0.018 205 / 0.06);
  --shadow-md:   0 4px 8px oklch(0.20 0.018 205 / 0.05),
                 0 12px 28px oklch(0.20 0.018 205 / 0.08);
  --shadow-lg:   0 8px 16px oklch(0.20 0.018 205 / 0.06),
                 0 24px 48px oklch(0.20 0.018 205 / 0.10);
  --shadow-inset:inset 0 1px 0 oklch(1 0 0 / 0.4);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-in:   cubic-bezier(0.55, 0.05, 0.68, 0.20); /* @kind other */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --dur-fast:    120ms;  /* @kind other */
  --dur:         200ms;  /* @kind other */
  --dur-slow:    320ms;  /* @kind other */
  --dur-slower:  520ms;  /* @kind other */

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container:    1200px;
  --container-narrow: 880px;
  --container-prose:  680px;
  --gutter:       clamp(20px, 4vw, 48px);  /* @kind spacing */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Use these instead of restyling tags everywhere.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg);
  font-feature-settings: "kern", "liga", "calt", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* RTL: when html[dir="rtl"], swap to Arabic-first font stack */
html[dir="rtl"] body { font-family: var(--font-sans-ar); }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] .display { font-family: var(--font-serif-ar); }

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

.display {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: clamp(2.5rem, 6vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

p, .p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.lede {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-brand);
}

.caption {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.numeric {
  font-family: var(--font-serif);
  font-feature-settings: "lnum", "tnum";
  font-variant-numeric: lining-nums tabular-nums;
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease-out);
}
a:hover { color: var(--clay-600); }

::selection { background: var(--clay-100); color: var(--ink); }