/* =====================================================================
   بيت جذور — Design tokens (3.55)
   Load order: styles.css → tokens.css → map.css → motion.css
   Light is the default. Dark applies when:
     (a) the OS prefers dark AND <html> has no data-theme="light", or
     (b) <html data-theme="dark"> (manual choice, see theme toggle).
   Every text/background pair below is checked for WCAG AA (see MERGE_PLAN.md §contrast).
   ===================================================================== */
:root{
  color-scheme:light;

  /* ---- brand constants (never change with theme) ---- */
  --brand-deep:#374025;   /* Deep Olive */
  --brand-cream:#E7D8C5;  /* Cream */
  --brand-sand:#CBB79C;   /* Sand */
  --brand-gold:#C9A24B;   /* decoration only — never text */

  /* ---- color roles (light) ---- */
  --bg:#EFE5D5;           /* page — 3.70: كريمي دافي B (كان #FBF8F3) */
  --surface:#F7F0E4;      /* cards, inputs, sheets — 3.70 (كان #FFFFFF) */
  --surface-2:#E9DECB;    /* wells, chips, tracks, skeleton — 3.70 (كان #F3ECE1) */
  --text:#2E2A22;
  --text-muted:#645C4C;
  --heading:#374025;      /* titles, numbers, links */
  --text-warm:#4B3D1A;    /* secondary emphasis (old --brown) */
  --primary:#374025;      /* filled buttons, selected chips */
  --on-primary:#FBF8F3;
  --primary-soft:#E7D8C5; /* pills, avatar initials */
  --on-primary-soft:#374025;
  --accent:#6B7348;       /* olive decided in 3.53: bars, borders, icons, links on white */
  --accent-text:#5A6238;  /* olive for TEXT on any light surface incl. surface-2 (AA everywhere) */
  --success:#476226;  --success-bg:#E6EEDD;  --success-bg-2:#C9D6AE;
  --warning:#7A5A12;  --warning-bg:#F6EBD2;  --warning-line:#C9A24B;
  --danger:#A23F28;   --danger-bg:#F7E4DE;   --danger-soft:#C8806F;
  --info:#3D5A6C;     --info-bg:#E3EBF0;
  --border:#D9C8AE;       /* card + input outlines — 3.70 (كان #E4D8C6) */
  --divider:#E6D9C3;      /* row separators inside cards — 3.70 */
  --border-strong:#CBB79C;/* dashed / ghost button borders */
  --focus:#6B7348;
  --scrim:rgba(46,42,34,.5);

  /* brand surfaces: header, hero, side bar, passport — stay dark in both themes */
  --brand-bg:#374025;
  --on-brand:#FBF8F3;
  --on-brand-muted:#CBB79C;

  /* heat scale (heatmaps, band scales) */
  --heat-0:var(--surface-2); --heat-1:#E9EDDC; --heat-2:#D5DDBA; --heat-3:#BFC897; --heat-4:#E7C98C; --heat-5:#A9573D;

  /* ---- spacing (4px grid) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-12:48px;

  /* ---- radii (4) ---- */
  --r-sm:8px;    /* chips, inputs inside rows, small tiles */
  --r-md:12px;   /* buttons, inputs, list tiles */
  --r-lg:18px;   /* cards, sheets */
  --r-pill:999px;/* pills, avatars, round icon buttons */

  /* ---- type ---- */
  --font-body:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif;
  --font-latin:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
  --font-head:Camel,"IBM Plex Sans Arabic",serif;
  --fs-xs:12px;  /* captions, badges, tab labels (minimum) */
  --fs-sm:13px;  /* meta lines, hints */
  --fs-base:15px;/* body, rows, buttons */
  --fs-md:17px;  /* card titles */
  --fs-lg:20px;  /* section titles, numbers */
  --fs-xl:24px;  /* page titles */
  --fs-2xl:30px; /* greetings, hero numbers */
  --lh-tight:1.25; --lh-head:1.3; --lh-body:1.6;

  /* ---- elevation (2) ---- */
  --shadow-1:0 1px 2px rgba(55,64,37,.06),0 4px 14px rgba(55,64,37,.08);
  --shadow-2:0 12px 32px rgba(30,34,20,.20);

  /* ---- motion ---- */
  --dur-1:120ms;  /* press */
  --dur-2:180ms;  /* page enter, toggles */
  --dur-3:240ms;  /* sheets, indicator */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-std:cubic-bezier(.4,0,.2,1);
}

/* ---------- dark palette (warm olive night, not pure black) ---------- */
/* written twice on purpose: OS preference (unless user forced light) + manual [data-theme=dark] */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#171A12; --surface:#21251A; --surface-2:#2B3022;
    --text:#EDE4D6; --text-muted:#B3A994; --heading:#E7D8C5; --text-warm:#E2CFB0;
    --primary:#CBB79C; --on-primary:#1B1E15; --primary-soft:#3A3F2C; --on-primary-soft:#E7D8C5;
    --accent:#B9C08F; --accent-text:#B9C08F;
    --success:#9CC59F; --success-bg:#22311F; --success-bg-2:#34492F;
    --warning:#E2C27A; --warning-bg:#372D16; --warning-line:#B08A3A;
    --danger:#EE9C86;  --danger-bg:#3D221B;  --danger-soft:#B86A55;
    --info:#9EC0D6;    --info-bg:#1E2B33;
    --border:#3B4130; --divider:#2E3326; --border-strong:#5A5F48; --focus:#CFD6A3;
    --scrim:rgba(0,0,0,.6);
    --brand-bg:#262C1A; --on-brand:#F1E7D8; --on-brand-muted:#CBB79C;
    --heat-1:#2A3524; --heat-2:#36472D; --heat-3:#4A5E36; --heat-4:#5E4A20; --heat-5:#8A4632;
    --shadow-1:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.25);
    --shadow-2:0 12px 32px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#171A12; --surface:#21251A; --surface-2:#2B3022;
  --text:#EDE4D6; --text-muted:#B3A994; --heading:#E7D8C5; --text-warm:#E2CFB0;
  --primary:#CBB79C; --on-primary:#1B1E15; --primary-soft:#3A3F2C; --on-primary-soft:#E7D8C5;
  --accent:#B9C08F; --accent-text:#B9C08F;
  --success:#9CC59F; --success-bg:#22311F; --success-bg-2:#34492F;
  --warning:#E2C27A; --warning-bg:#372D16; --warning-line:#B08A3A;
  --danger:#EE9C86;  --danger-bg:#3D221B;  --danger-soft:#B86A55;
  --info:#9EC0D6;    --info-bg:#1E2B33;
  --border:#3B4130; --divider:#2E3326; --border-strong:#5A5F48; --focus:#CFD6A3;
  --scrim:rgba(0,0,0,.6);
  --brand-bg:#262C1A; --on-brand:#F1E7D8; --on-brand-muted:#CBB79C;
  --heat-1:#2A3524; --heat-2:#36472D; --heat-3:#4A5E36; --heat-4:#5E4A20; --heat-5:#8A4632;
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.25);
  --shadow-2:0 12px 32px rgba(0,0,0,.5);
}