/* ==========================================================================
   duyufajwa — Design Tokens
   --------------------------------------------------------------------------
   Layer 1  primitives   raw values. never used directly in components.
   Layer 2  semantic     meaning. what a thing IS, not what it looks like.
   Layer 3  component     where it is used.

   Arabic typography constraints baked in here (see docs/design-system.md):
     · letter-spacing is ALWAYS normal on any element containing Arabic.
       Positive tracking breaks the letter joins; negative crushes them.
     · display line-height floor is 1.35 — diacritics and dots above/below
       the baseline need more leading than Latin at the same px size.
     · body line-height is 1.75. Arabic letterforms are denser than Latin.
     · no italic, no text-transform (Arabic has no case, oblique is fake).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — self-hosted, variable (400–900 in one file per subset)
   3 files, 79.5 KB total. No external requests.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Thmanyah Sans";
  font-style: normal;
  font-weight: 300 500;
  font-display: optional;
  src: url("../fonts/thmanyahsans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Thmanyah Sans";
  font-style: normal;
  font-weight: 600 900;
  font-display: optional;
  src: url("../fonts/thmanyahsans-Bold.woff2") format("woff2");
}

/* ==========================================================================
   LAYER 1 — PRIMITIVES
   Palette: عسل السدر وعرجون التمر (Warm Amber & Roasted Date)
   ========================================================================== */
:root {
  /* Roasted Date / Espresso — brand authority */
  --date-950: #140d09;
  --date-900: #1f140e; /* primary brand */
  --date-800: #362419; /* hover */
  --date-700: #4d3324;
  --date-600: #684835;
  --date-200: #d6c6bc;
  --date-100: #efe8e2;

  /* Honey Amber — Sidr gold accent */
  --amber-950: #4a2903;
  --amber-900: #613907;
  --amber-800: #8e5712; /* AAA contrast text */
  --amber-700: #aa6b18;
  --amber-600: #c88528; /* primary accent */
  --amber-500: #db9838;
  --amber-400: #ebb059;
  --amber-300: #f4c882;
  --amber-200: #fae0b5;
  --amber-100: #fdf4e7; /* soft accent tint */

  /* Wheat & Paper — warm organic ground */
  --p-50: #fcfaf7;
  --p-100: #faf7f2; /* body bg */
  --p-200: #f5eee4; /* bento bg */
  --p-300: #ece3d4;
  --p-400: #dfd3c0;
  --p-500: #d0c1ab;

  /* Ink & Neutrals */
  --n-950: #140d09;
  --n-900: #1f140e;
  --n-800: #362820;
  --n-700: #4b3a30;
  --n-600: #615147;
  --n-500: #7a6a5f;
  --n-400: #8f7f75;
  --n-300: #ad9f95;
  --n-200: #cfc4ba;
  --n-100: #ece5dc;

  /* Functional — pull from the ramps where possible */
  --ok-600: #1f7a52;
  --ok-100: #e6f4ec;
  --warn-600: #98651e;
  --warn-100: #fbf1dc;
  --danger-700: #8a2f20;
  --danger-100: #fbe9e5;

  /* Legacy palette backward-compatibility aliases */
  --y-100: var(--amber-100);
  --y-200: var(--amber-200);
  --y-300: var(--amber-300);
  --y-400: var(--amber-400);
  --y-500: var(--amber-500);
  --y-600: var(--amber-600);
  --y-700: var(--amber-700);
  --y-800: var(--amber-800);
  --y-900: var(--amber-900);

  --g-100: var(--date-100);
  --g-200: var(--date-200);
  --g-600: var(--date-600);
  --g-700: var(--date-700);
  --g-800: var(--date-800);
  --g-900: var(--date-900);
  --g-950: var(--date-950);

  /* ---- Typography primitives ---- */
  --font: "Thmanyah Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
  --font-num: "Thmanyah Sans", ui-monospace, "SF Mono", Consolas, monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-black: 900;

  /* Fluid type scale. Arabic reads ~1px larger than Latin at the same size,
     so the base sits at 17px rather than 16px. */
  --fs-2xs: 0.75rem;    /* 12 — micro labels */
  --fs-xs:  0.8125rem;  /* 13 — captions      */
  --fs-sm:  0.875rem;   /* 14 — meta          */
  --fs-md:  0.9375rem;  /* 15 — dense UI      */
  --fs-base:1rem;       /* 16 — UI default    */
  --fs-lg:  1.0625rem;  /* 17 — body copy     */
  --fs-xl:  1.25rem;    /* 20 — card titles   */
  --fs-2xl: 1.5rem;     /* 24 — section sub   */

  /* Display sizes are fluid. Scaled gracefully for elegant laptop/desktop reading. */
  --fs-d1: clamp(2rem, 1.4rem + 2.2vw, 3rem);         /* 32 → 48  hero headline (was 56px) */
  --fs-d2: clamp(1.6rem, 1.25rem + 1.4vw, 2.25rem);   /* 25 → 36  section heading (was 44px) */
  --fs-d3: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);    /* 20 → 25.6  card head (was 30px) */

  /* Line height — the Arabic floors, enforced centrally */
  --lh-display: 1.35;  /* display floor. was 1.14 — diacritics collided */
  --lh-heading: 1.45;
  --lh-body:    1.75;
  --lh-tight:   1.25;  /* Latin numerals and single-line UI only */
  --lh-none:    1;

  /* Tracking — Arabic only ever gets `normal`. Kept as tokens so that
     `letter-spacing: var(--ls-arabic)` reads as a deliberate decision
     rather than an omission. */
  --ls-arabic: normal;
  --ls-latin-label: 0.02em; /* Latin-only micro labels. never Arabic. */

  /* ---- Spacing — 4px base ---- */
  --sp-1: 0.25rem;   /*  4 */
  --sp-2: 0.5rem;    /*  8 */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.5rem;    /* 24 */
  --sp-6: 2rem;      /* 32 */
  --sp-7: 2.75rem;   /* 44 */
  --sp-8: 3.5rem;    /* 56 */
  --sp-9: 4.5rem;    /* 72 */
  --sp-10: 6.5rem;   /* 104 */

  /* ---- Radius ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-bento: 26px;
  --r-pill: 9999px;
  /* Signature shape — kept for accents */
  --r-leaf: 20px 8px 20px 8px;
  --r-leaf-sm: 14px 6px 14px 6px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* original brand curve, kept */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-3: 360ms;

  /* ---- Layout ---- */
  --w-narrow: 42rem;   /* 672  prose */
  --w-content: 54rem;  /* 864  article column */
  --w-container: 72rem;/* 1152 page */
  --w-wide: 80rem;     /* 1280 full bleed rows */
  --gutter: clamp(1rem, 3.5vw, 2.25rem);
  --header-h: 4.25rem;
}

/* ==========================================================================
   LAYER 2 — SEMANTIC
   ========================================================================== */
:root {
  /* Surfaces */
  --bg: #faf7f2;
  --bg-alt: #f3ece1;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #ede4d6;
  --surface-brand: var(--date-900);
  --surface-brand-deep: var(--date-950);
  --surface-black: var(--date-900);

  /* Bento & Feature Theme Colors */
  --card-bento-bg: #f5eee4;      /* Warm Wheat / Almond tone */
  --card-bento-text: #1f140e;    /* Roasted Date Espresso */
  --card-bento-muted: #544337;   /* Roasted Walnut Muted Copy */

  /* Text */
  --text: #1f140e;
  --text-soft: #44372f;
  --text-muted: #726258;
  --text-faint: #9e8f85;
  --text-inverse: #ffffff;
  --text-inverse-soft: rgba(255, 255, 255, 0.88);
  --text-on-accent: #ffffff;

  /* Brand + accent */
  --brand: #1f140e;
  --brand-hover: #362419;
  --brand-active: #0f0a07;
  --brand-soft: #f5eee4;
  --accent: #c88528;
  --accent-hover: #af701b;
  --accent-soft: #fdf4e7;
  --accent-text: #8e5712;

  /* Lines */
  --line: rgba(31, 20, 14, 0.08);
  --line-soft: rgba(31, 20, 14, 0.05);
  --line-strong: rgba(31, 20, 14, 0.16);
  --line-inverse: rgba(255, 255, 255, 0.15);

  /* Status */
  --ok: var(--ok-600);
  --ok-soft: var(--ok-100);
  --warn: var(--warn-600);
  --warn-soft: var(--warn-100);
  --danger: var(--danger-700);
  --danger-soft: var(--danger-100);

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(31, 20, 14, 0.25);
  --focus-ring-offset: 2px;
}

/* ==========================================================================
   LAYER 3 — COMPONENT
   ========================================================================== */
:root {
  /* Elevation */
  --sh-1: 0 2px 8px rgba(18, 22, 20, 0.04);
  --sh-2: 0 8px 24px -4px rgba(18, 22, 20, 0.06);
  --sh-3: 0 16px 40px -8px rgba(18, 22, 20, 0.08);
  --sh-bento: 0 4px 20px rgba(18, 22, 20, 0.03);
  --sh-brand: 0 8px 20px -6px rgba(17, 26, 20, 0.35);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.2);

  /* Controls */
  --btn-h: 3rem;
  --btn-h-sm: 2.375rem;
  --btn-h-lg: 3.25rem;
  --btn-px: var(--sp-6);
  --btn-radius: var(--r-pill);

  /* Cards */
  --card-radius: var(--r-xl);
  --card-pad: var(--sp-6);
  --card-bg: var(--surface);
  --card-line: 1px solid var(--line-soft);

  /* Media */
  --media-bg: var(--p-200, #f5eee4);
  --media-radius: var(--r-lg);
  --img-ratio: 1 / 1;
}