/* ==========================================================================
   Al Fajar Transport — Design Tokens (CSS)
   Source of truth: tokens.json. Generated from an audit of all 44 pages.

   Light theme is the default (:root). Dark theme applies when:
     1. the OS prefers dark AND the page has not forced light, or
     2. <html data-theme="dark"> is set explicitly.
   Force light with <html data-theme="light">.

   Drop-in: every variable name already used by the pages is kept with the
   same value, so this file can replace each page's inline :root blocks.
   New semantic roles (--accent-text, --focus, --danger …) are additions.
   ========================================================================== */

:root{
  color-scheme:light;

  /* ---------- 1. Primitives (theme-independent) ---------- */

  /* Gold ramp — brand values preserved from tokens.css */
  --gold-50:#FBF6EA;          /* also the light accent-subtle surface */
  --gold-100:#F5EAD0;
  --gold-200:#ECD6A0;
  --gold-300:#DEBC65;         /* = --gold-lt */
  --gold-500:#CEA449;         /* = --gold, brand primary */
  --gold-600:#A87C2C;         /* = --gold-dk, rules/icons only on light (3.6:1) */
  --gold-700:#87601F;         /* NEW: gold text on light, AA on every light surface */
  --gold-900:#241C0E;         /* = --dawn */

  /* Warm neutral ramp (biased toward the gold) */
  --neutral-0:#FFFFFF;
  --neutral-25:#FAF9F7;
  --neutral-50:#F3F2EF;
  --neutral-100:#EBE8E1;
  --neutral-200:#E2DED5;
  --neutral-250:#D6D1C6;
  --neutral-300:#CDC7BA;
  --neutral-400:#9B9488;
  --neutral-500:#6E685E;
  --neutral-600:#4A453D;
  --neutral-650:#C3BCAE;      /* dark-theme secondary text */
  --neutral-675:#F6F3EC;      /* dark-theme primary text (warm white) */
  --neutral-700:#24211A;
  --neutral-750:#1C1A14;
  --neutral-800:#161410;
  --neutral-850:#0E0D0A;
  --neutral-900:#0C0C0C;      /* = --ink */

  /* Brand aliases (existing names, unchanged values) */
  --gold:var(--gold-500);
  --gold-lt:var(--gold-300);
  --gold-dk:var(--gold-600);
  --ink:var(--neutral-900);
  --dawn:var(--gold-900);
  --verified:#2E7D5B;         /* semantic only: "open now", "new" */
  --whatsapp:#25D366;

  /* Gradients — the "dawn" idea, previously hard-coded per page */
  --grad-dawn:linear-gradient(180deg,#191610 0%,#0C0C0C 58%,#241C0E 100%);
  --grad-hero:linear-gradient(180deg,#121110 0%,#1E1A14 50%,#33281A 100%);
  --grad-hero-glow:radial-gradient(80% 62% at 88% 2%,rgba(222,188,101,.14) 0%,rgba(12,12,12,0) 62%);
  --grad-dawn-light:linear-gradient(180deg,#FFFFFF 0%,#FDFBF6 55%,#F6F0E2 100%);

  /* ---------- 2. Semantic — LIGHT (default) ---------- */

  /* Backgrounds */
  --page:var(--neutral-25);
  --surface:var(--neutral-0);
  --surface-2:var(--neutral-50);
  --surface-3:var(--neutral-100);
  --field:var(--neutral-0);

  /* Text */
  --text:var(--neutral-900);          /* 18.6:1 on page */
  --text-mid:var(--neutral-600);      /*  9.0:1 */
  --text-muted:var(--neutral-500);    /*  5.3:1 */

  /* Borders */
  --border:var(--neutral-200);
  --border-strong:var(--neutral-300);
  --field-border:var(--neutral-250);

  /* Accent (gold) */
  --accent:var(--gold-500);           /* fills: buttons, active chips, rules */
  --on-accent:#150F02;                /* text on gold fill, 8.2:1 */
  --accent-text:var(--gold-700);      /* gold-coloured TEXT/eyebrows, 5.4:1 */
  --accent-subtle:var(--gold-50);     /* tinted backgrounds */
  --accent-line:rgba(206,164,73,.32); /* gold hairlines and borders */
  --focus:var(--gold-700);            /* focus ring, 3:1+ against page */

  /* Status */
  --success:var(--verified);          /* dots and fills */
  --success-text:#276B4E;
  --success-subtle:rgba(46,125,91,.10);
  --danger:#B3261E;
  --danger-text:#B3261E;
  --danger-subtle:rgba(179,38,30,.08);
  --on-whatsapp:#06301A;
  --whatsapp-text:#0F7A41;

  /* Elevation */
  --shadow-sm:0 1px 2px rgba(12,12,12,.05);
  --shadow-md:0 10px 30px rgba(12,12,12,.07);
  --shadow-lg:0 28px 60px rgba(12,12,12,.12);

  /* Plate: the always-dark brand band (masthead, hero, footer).
     Same in both themes — it is a brand surface, not a theme surface. */
  --plate:var(--neutral-900);
  --plate-2:#171309;
  --plate-3:var(--gold-900);
  --on-plate:#FFFFFF;
  --on-plate-mid:rgba(255,255,255,.72);
  --on-plate-muted:rgba(255,255,255,.54);
  --on-plate-accent:var(--gold-300);
  --plate-line:rgba(206,164,73,.26);
  --plate-line-soft:rgba(255,255,255,.10);

  /* ---------- 3. Typography ---------- */

  /* Families */
  --display:"Zain","Trebuchet MS",system-ui,sans-serif;
  --body:"IBM Plex Sans Arabic","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Weights (only the cuts the Google Fonts request loads) */
  --fw-regular:400;     /* Zain, Plex Sans, Plex Mono */
  --fw-medium:500;      /* Plex Sans, Plex Mono */
  --fw-semibold:600;    /* Plex Sans, Plex Mono — UI default */
  --fw-bold:700;        /* Zain, Plex Sans */
  --fw-extrabold:800;   /* Zain — headings */
  --fw-black:900;       /* Zain — stats, big numerals */

  /* Size scale. Static steps replace ~40 one-off sizes found in the pages. */
  --fs-micro:.68rem;    /* 10.9px — floor for mono labels/table heads */
  --fs-mono:.72rem;     /* 11.5px — eyebrows, .mono */
  --fs-xs:.82rem;       /* 13.1px — captions, meta */
  --fs-sm:.9rem;        /* 14.4px — secondary body, cards */
  --fs-base:1rem;       /* 16px   — body */
  --fs-md:1.1rem;       /* 17.6px — emphasised body, small h3 */
  --fs-lg:1.35rem;      /* 21.6px — form headers */
  /* Fluid steps (existing, kept) */
  --fs-lead:clamp(1.05rem,.99rem + .38vw,1.25rem);
  --fs-h4:clamp(1.2rem,1.05rem + .55vw,1.55rem);
  --fs-h3:clamp(1.2rem,1.06rem + .6vw,1.5rem);
  --fs-h2-sm:clamp(1.7rem,1.2rem + 2vw,2.6rem);
  --fs-stat:clamp(2rem,1.4rem + 2.4vw,3.1rem);
  --fs-h2:clamp(1.85rem,1.3rem + 2.2vw,3rem);
  --fs-h1:clamp(2.3rem,1.6rem + 3vw,3.9rem);
  --fs-display:clamp(2.6rem,1.5rem + 4.4vw,4.75rem);
  --fs-mark:clamp(4.5rem,11vw,9rem);

  /* Line heights */
  --lh-none:1;          /* numerals, stats */
  --lh-heading:1.08;
  --lh-snug:1.3;
  --lh-ui:1.5;
  --lh-text:1.6;        /* cards, lead */
  --lh-body:1.65;       /* body default */
  --lh-arabic:1.95;     /* Arabic body copy */

  /* Letter spacing */
  --ls-display:-.028em;
  --ls-heading:-.018em;
  --ls-tight:-.01em;
  --ls-normal:0;
  --ls-ui:.01em;        /* buttons */
  --ls-caps:.12em;      /* small caps labels */
  --ls-eyebrow:.14em;   /* .mono eyebrows */
  --ls-caps-wide:.16em;
  --ls-brand:.28em;     /* "TRANSPORT · KSA" lockup */

  /* ---------- 4. Layout (existing, unchanged) ---------- */
  --gutter:clamp(1.1rem,4vw,2.75rem);
  --max:1280px;
  --sec-y:clamp(2.5rem,1.9rem + 2.2vw,4.25rem);
  --r-sm:4px;
  --r:8px;
  --r-lg:14px;
  --r-xl:22px;
}

/* ---------- 5. Semantic — DARK ---------- */
/* Kept identical in both selectors; edit together. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --page:var(--neutral-850);
    --surface:var(--neutral-800);
    --surface-2:var(--neutral-750);
    --surface-3:var(--neutral-700);
    --field:var(--neutral-750);
    --text:var(--neutral-675);        /* 17.5:1 */
    --text-mid:var(--neutral-650);    /* 10.3:1 */
    --text-muted:var(--neutral-400);  /*  6.5:1 */
    --border:rgba(255,255,255,.11);
    --border-strong:rgba(255,255,255,.20);
    --field-border:rgba(255,255,255,.18);
    --accent-text:var(--gold-300);    /* 10.1:1 */
    --accent-subtle:rgba(206,164,73,.10);
    --gold-50:rgba(206,164,73,.10);   /* legacy: pages read --gold-50 as a tint */
    --focus:var(--gold-500);
    --success-text:#4CB386;
    --success-subtle:rgba(76,179,134,.14);
    --danger:#E07A6E;
    --danger-text:#E07A6E;
    --danger-subtle:rgba(224,122,110,.12);
    --whatsapp-text:#3DDC84;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 10px 30px rgba(0,0,0,.45);
    --shadow-lg:0 28px 60px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:var(--neutral-850);
  --surface:var(--neutral-800);
  --surface-2:var(--neutral-750);
  --surface-3:var(--neutral-700);
  --field:var(--neutral-750);
  --text:var(--neutral-675);
  --text-mid:var(--neutral-650);
  --text-muted:var(--neutral-400);
  --border:rgba(255,255,255,.11);
  --border-strong:rgba(255,255,255,.20);
  --field-border:rgba(255,255,255,.18);
  --accent-text:var(--gold-300);
  --accent-subtle:rgba(206,164,73,.10);
  --gold-50:rgba(206,164,73,.10);
  --focus:var(--gold-500);
  --success-text:#4CB386;
  --success-subtle:rgba(76,179,134,.14);
  --danger:#E07A6E;
  --danger-text:#E07A6E;
  --danger-subtle:rgba(224,122,110,.12);
  --whatsapp-text:#3DDC84;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 10px 30px rgba(0,0,0,.45);
  --shadow-lg:0 28px 60px rgba(0,0,0,.55);
}

/* Optional light hero variant (as in "ALFAJAR-HOMEPAGE copy.html").
   Add class="plate-light" to a plate section to render it on warm white. */
.plate-light{
  --plate:#FDFBF6;
  --plate-2:#FFFFFF;
  --plate-3:#F6F0E2;
  --on-plate:var(--text);
  --on-plate-mid:var(--text-mid);
  --on-plate-muted:var(--text-muted);
  --on-plate-accent:var(--accent-text);
  --plate-line:var(--accent-line);
  --plate-line-soft:var(--border);
}

/* ---------- 6. Text styles (composites) ---------- */
.t-display{font-family:var(--display);font-size:var(--fs-display);font-weight:var(--fw-extrabold);line-height:var(--lh-heading);letter-spacing:var(--ls-display);}
.t-h1{font-family:var(--display);font-size:var(--fs-h1);font-weight:var(--fw-extrabold);line-height:var(--lh-heading);letter-spacing:var(--ls-display);}
.t-h2{font-family:var(--display);font-size:var(--fs-h2);font-weight:var(--fw-extrabold);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);}
.t-h3{font-family:var(--display);font-size:var(--fs-h3);font-weight:var(--fw-extrabold);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);}
.t-h4{font-family:var(--display);font-size:var(--fs-h4);font-weight:var(--fw-extrabold);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);}
.t-stat{font-family:var(--display);font-size:var(--fs-stat);font-weight:var(--fw-black);line-height:var(--lh-none);letter-spacing:var(--ls-heading);font-variant-numeric:tabular-nums;}
.t-lead{font-family:var(--body);font-size:var(--fs-lead);font-weight:var(--fw-regular);line-height:var(--lh-text);color:var(--text-mid);}
.t-body{font-family:var(--body);font-size:var(--fs-base);font-weight:var(--fw-regular);line-height:var(--lh-body);}
.t-body-sm{font-family:var(--body);font-size:var(--fs-sm);font-weight:var(--fw-regular);line-height:var(--lh-text);}
.t-caption{font-family:var(--body);font-size:var(--fs-xs);font-weight:var(--fw-medium);line-height:var(--lh-ui);color:var(--text-muted);}
.t-button{font-family:var(--body);font-size:.95rem;font-weight:var(--fw-semibold);line-height:var(--lh-none);letter-spacing:var(--ls-ui);}
.t-eyebrow{font-family:var(--mono);font-size:var(--fs-mono);font-weight:var(--fw-medium);line-height:var(--lh-ui);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-text);}
.t-label{font-family:var(--mono);font-size:var(--fs-micro);font-weight:var(--fw-semibold);line-height:var(--lh-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;}
.t-data{font-family:var(--mono);font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:var(--lh-ui);font-variant-numeric:tabular-nums;}
:root[lang="ar"] .t-body,:root[lang="ar"] .t-body-sm,:root[lang="ar"] .t-lead{line-height:var(--lh-arabic);}