/* =============================================================================
   Dr. BuAbbas v2, design tokens on the Diriyah DNA (dna/DNA.md, DETAILS.md, MOTION.md, FONTS.md).
   Every value is measured off the oracle and named here once; base.css reads only these tokens.
   No em or en dashes anywhere.
   ========================================================================== */

/* ---- fonts, self-hosted, all SIL OFL 1.1 (licence texts beside the files in /assets/fonts/).
   Alegreya Sans 700 is the file Diriyah ships as "linoTypeBrewery"; IBM Plex Sans Arabic is its "graphikArabic"
   (Latin and Arabic in one face); El Messiri 600 replaces the commercial Kermes (DEVIATIONS font-ar-display). ---- */
@font-face { font-family: "Alegreya Sans"; src: url("/assets/fonts/alegreya-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/fonts/plex-arabic-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/fonts/plex-arabic-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/fonts/plex-arabic-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "El Messiri"; src: url("/assets/fonts/el-messiri-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* ---- colour roles (by painted area) ---- */
  --ground: #FDFAF7;          /* neutral-cream: body and every light section */
  --ink: #623C2C;             /* ethel: all headings and copy on light ground, icons, progress line */
  --on-photo: #FDFAF7;        /* headings over photos */
  --white: #FFFFFF;           /* UI over photos, cards, inputs */
  --tan: #C79667;             /* motifs, wordmark on light, gradient start, selected ring */
  --tan-light: #D9A97F;       /* hover fill of light round arrows */
  --tan-lighter: #E8C9AF;     /* light arrows, footer rule, 1px borders */
  --tan-lightest: #F6E9DF;    /* cookie banner, disabled button */
  --tan-disabled-ink: #A0705A;/* disabled label on tan-lightest (Diriyah #C89884 darkened to 4.5:1, DEVIATIONS muted-grey) */
  --plum: #55152E;            /* active chip, active round icon */
  --plum-light: #774458;      /* filter labels, hover of secondary links */
  --plum-lightest: #DDD0D5;   /* inactive chips, input and card borders */
  --navy: #1E1F39;            /* the one dark band, tag text, offset panel */
  --navy-lightest: #C0CCE9;   /* tag pills */
  --black: #000000;           /* story stages only, never text */
  --muted: #6E6E6E;           /* form labels (Diriyah #888, raised to AA) */
  --placeholder: #767676;     /* placeholders (Diriyah #B0B0B0, raised to AA) */
  --ink-10: rgba(98, 60, 44, .10);   /* progress track on cream */
  --scrim: rgba(0, 0, 0, .40);
  --glass: rgba(255, 255, 255, .10);
  --glass-line: rgba(255, 255, 255, .10);
  --glass-line-2: rgba(255, 255, 255, .20);
  --head-grad: linear-gradient(180deg, rgba(0, 0, 0, .40), rgba(0, 0, 0, 0));
  --hero-grad: linear-gradient(90deg, rgba(54, 31, 20, .78) 0%, rgba(54, 31, 20, .52) 34%, rgba(54, 31, 20, 0) 68%);
  --hero-grad-rtl: linear-gradient(270deg, rgba(54, 31, 20, .78) 0%, rgba(54, 31, 20, .52) 34%, rgba(54, 31, 20, 0) 68%);
  --hero-grad-b: linear-gradient(0deg, rgba(30, 16, 10, .55) 0%, rgba(30, 16, 10, 0) 40%);

  /* the primary gradient; background-position starts at 18% so every label pixel sits on 4.5:1 or more
     (DEVIATIONS button-contrast), the hover slides it to the right end over 700ms as on Diriyah */
  --grad: linear-gradient(132deg, #C79667, #623C2C, #623C2C, #C79667);
  --grad-size: 500% 500%;
  --grad-pos: 22% 50%;
  --grad-pos-hover: 100% 50%;

  /* ---- type families ---- */
  --f-display: "Alegreya Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-body: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-display-ar: "El Messiri", "IBM Plex Sans Arabic", system-ui, sans-serif;

  /* ---- type sizes: Diriyah's own clamps (1440 / 390 readings in DNA.md) ---- */
  --t-story: clamp(3.75rem, 1.837rem + 7.848vw, 8.9rem);       /* 60 at 390, 142.4 at 1440 */
  --t-story-ar: clamp(3.75rem, 2.357rem + 5.714vw, 7.5rem);    /* 60 / 120 */
  --t-h1: clamp(2.25rem, 1.654rem + 2.443vw, 4rem);        /* 36 / 61.64 */
  --t-h2: clamp(2rem, 1.66rem + 1.396vw, 3rem);            /* 32 / 46.66 */
  --t-h3: clamp(1.75rem, 1.495rem + 1.047vw, 2.5rem);      /* 28 / 39 */
  --t-b1: clamp(1.25rem, 1.037rem + .873vw, 1.875rem);     /* 20 / 29.16 */
  --t-b1-ar: clamp(1.25rem, 1.169rem + .333vw, 1.47rem);     /* 20 / 23.5 */
  --t-b2: clamp(1.125rem, .997rem + .524vw, 1.5rem);       /* 18 / 23.5 */
  --t-b3: clamp(1rem, .872rem + .524vw, 1.375rem);         /* 16 / 21.5 */
  --t-b4: clamp(1rem, .915rem + .349vw, 1.25rem);          /* 16 / 19.67 */
  --t-b5: clamp(.9375rem, .874rem + .262vw, 1.125rem);     /* 16 / 17.76 */
  --t-b6: 1rem;                                            /* 16 */
  --t-cta: clamp(1rem, .957rem + .175vw, 1.125rem);        /* 16 / 17.83 */
  --t-pill: clamp(.875rem, .832rem + .175vw, 1rem);        /* 14 / 15.83 */
  --t-cap: .875rem;                                        /* 14, captions and legal */
  --t-nav: 1rem;

  --lh-story: .89;
  --lh-head: 1.2;
  --lh-head-ar: 1.3;
  --lh-body: 1.4;
  --lh-body-lg: 1.2;          /* Diriyah's tight desktop paragraphs (lg:leading-120) */
  --lh-body-ar: 1.7;
  --lh-ui: 1.2;
  --w-display: 700;
  --w-display-ar: 600;
  --w-body: 400;
  --w-mid: 500;
  --w-b1-ar: 600;

  /* ---- layout ---- */
  --gutter: 24px;             /* phones; 48 md, 64 lg, 80 xl, 104 2xl (set in base.css media queries) */
  --content: 1280px;          /* at 1440 */
  --cap: 1536px;              /* sections cap at 96rem */
  --sec: 64px;                /* section rhythm on phones; 80 from lg */
  --sec-tight: 40px;
  --gap-head-motif: 20px;     /* 32 from md */
  --gap-motif: 24px;          /* 32 from md */
  --head-h: 82px;             /* 114 from lg */
  --hero-h: 100vh;
  --short-hero: 633px;

  /* ---- shape ---- */
  --r: 4px;                   /* the house radius */
  --r-card: 6px;              /* story thumbs, info cards */
  --r-round: 50%;
  --r-pill: 50px;

  /* ---- shadows ---- */
  --sh-btn: 0 10px 25px rgba(0, 0, 0, .15);
  --sh-card: 0 4px 25px rgba(0, 0, 0, .05);
  --sh-head: -10px 14px 34px rgba(0, 0, 0, .08);
  --sh-ring: 0 0 0 2px #C79667, 8.576px 22.053px 30.016px rgba(199, 150, 103, .25);

  /* ---- glass ---- */
  --blur: blur(10px);
  --blur-2: blur(12px);

  /* ---- motion (MOTION-MAP.json) ---- */
  --e-head: cubic-bezier(.4, 0, .2, 1);
  --e-slide: cubic-bezier(.22, 1, .36, 1);
  --e-fade: cubic-bezier(.25, 1, .5, 1);
  --e-reveal: cubic-bezier(.33, 1, .68, 1);
  --e-grad: cubic-bezier(0, 0, .2, 1);
  --e-back: linear(0, .0089 1.1%, .0399 2.4%, .1513 5%, .5157 11.2%, .6826 14.6%, .8164 18.5%, .9171 23%, .9871 28.2%, 1.0255 33.6%, 1.0428 39.8%, 1.0413 47.4%, 1.0147 64.9%, 1.0022 79.4%, 1);
  --d-head: 300ms;
  --d-grad: 700ms;
  --d-fade: 1.5s;
  --d-rise: .85s;
  --d-fast: 150ms;
}