/* =====================================================================
   وصلة — Design tokens
   Source of truth for every color / size / space in the product.
   Pages must NEVER use raw hex values — only var(--token).

   Font: Alexandria (400 body · 600 buttons/prices · 800 headings).
   For fastest load, also put these in <head> (optional; @import below is the fallback):
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Alexandria:wght@400;600;800&display=swap">

   Theme: light by default, dark via OS (prefers-color-scheme) unless the page
   sets <html data-theme="light|dark"> (ui.js → initTheme / toggleTheme).
   All text pairs below are verified WCAG AA (≥ 4.5:1) — see DESIGN.md «Final tokens».
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@400;600;800&display=swap");

:root {
  color-scheme: light;

  /* ---------- 60% neutrals ---------- */
  --bg: #FAF7F2;            /* warm cream page background */
  --surface: #FFFFFF;       /* cards, sheets, inputs */
  --surface-2: #F3EFE8;     /* subtle fills: chips, table head, skeleton base */
  --surface-3: #ECE6DC;     /* pressed / hover fill on surface-2 */
  --ink: #1B1F1D;           /* primary text           15.6:1 on bg */
  --muted: #5E6662;         /* secondary text          5.5:1 on bg */
  --line: #E9E4DC;          /* hairlines, borders */
  --line-strong: #D6CEC1;   /* input borders, emphasized dividers */

  /* ---------- 30% brand (deep green) ---------- */
  --brand: #0B5D4B;         /* 7.3:1 on bg — links, selected chips/tabs, active icons, success */
  --brand-strong: #084638;  /* hover/pressed brand */
  --brand-soft: #E3F1EC;    /* selected fills, free-delivery tag bg */
  --brand-ink: #FFFFFF;     /* text on --brand      7.8:1 */

  /* ---------- 10% accent (warm orange) — main CTA + urgent/discount ONLY ---------- */
  --accent: #CF410C;        /* white text 4.8:1 (DESIGN.md #E8470F failed AA at 3.9) */
  --accent-strong: #B5380A; /* hover/pressed */
  --accent-soft: #FDEDE6;   /* decorative only — never put --accent text on it */
  --accent-ink: #FFFFFF;

  /* ---------- status ---------- */
  --success: var(--brand);
  --success-soft: var(--brand-soft);
  --danger: #C2372B;        /* 5.4:1 on white, 4.65:1 on --danger-soft */
  --danger-soft: #FBEAE8;
  --danger-ink: #FFFFFF;
  --warn: #946110;          /* darkened from #B7791F (3.6:1 fail) → 4.9:1 on bg */
  --warn-soft: #FBF1DF;
  --star: #E3A008;          /* rating star glyph (icon only, never text) */

  /* ---------- inverse (toasts, tooltips) ---------- */
  --inverse-bg: #1B1F1D;
  --inverse-ink: #FAF7F2;
  --inverse-muted: #B8C0BC;
  --inverse-brand: #3DBE95;
  --inverse-danger: #FF7A6B;

  /* ---------- header (30% brand surface) ---------- */
  --header-bg: var(--brand);
  --header-ink: #FFFFFF;
  --header-muted: #C9D4CE;  /* 5.1:1 on brand */
  --header-fill: rgb(255 255 255 / .12);   /* chips/buttons inside header */
  --header-fill-hover: rgb(255 255 255 / .2);
  --hero-bg: linear-gradient(135deg, #0C6452 0%, #0B5D4B 55%, #084638 100%); /* wallet / earnings hero card */

  /* ---------- overlay / misc ---------- */
  --overlay: rgb(16 22 20 / .48);
  --focus: #0B5D4B;
  --focus-ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--focus);
  --skeleton-a: #F0EBE3;
  --skeleton-b: #F8F5F0;
  --chart-grid: #ECE6DC;
  --chart-1: var(--brand);
  --chart-1-soft: rgb(11 93 75 / .14);

  /* placeholder image gradients (used when a photo is missing) */
  --ph-1: linear-gradient(135deg, #F6D8B8 0%, #E9A877 55%, #D9824E 100%);
  --ph-2: linear-gradient(135deg, #DCEBD9 0%, #A9CFA0 55%, #6FA67A 100%);
  --ph-3: linear-gradient(135deg, #F3E2C4 0%, #E7C27E 55%, #C99643 100%);
  --ph-4: linear-gradient(135deg, #DDE7EE 0%, #A9C3D6 55%, #6F93AE 100%);
  --ph-5: linear-gradient(135deg, #F4D6D2 0%, #E6A49B 55%, #C8695E 100%);
  --ph-6: linear-gradient(135deg, #E6E1F0 0%, #BDB2D6 55%, #8D7FB3 100%);

  /* ---------- typography (1.25 scale) ---------- */
  --font: "Alexandria", system-ui, "Segoe UI", Tahoma, sans-serif;
  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.875rem;   /* 14 */
  --fs-md: 1rem;       /* 16 — base */
  --fs-lg: 1.25rem;    /* 20 */
  --fs-xl: 1.5625rem;  /* 25 */
  --fs-2xl: 1.9375rem; /* 31 */
  --fs-3xl: 2.4375rem; /* 39 — KPI / hero numbers */
  --fw-regular: 400;
  --fw-semi: 600;
  --fw-bold: 800;
  --lh-body: 1.6;
  --lh-tight: 1.25;

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

  /* ---------- radii ---------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;     /* buttons, inputs, item images */
  --r-lg: 16px;     /* cards */
  --r-xl: 24px;     /* bottom sheet top corners, dialogs */
  --r-pill: 999px;  /* chips, badges */

  /* ---------- elevation ---------- */
  --sh-1: 0 1px 2px rgb(0 0 0 / .05), 0 4px 16px rgb(0 0 0 / .06);   /* cards */
  --sh-2: 0 2px 6px rgb(0 0 0 / .06), 0 12px 32px rgb(0 0 0 / .10);  /* floating bars, menus */
  --sh-3: 0 8px 24px rgb(0 0 0 / .12), 0 24px 64px rgb(0 0 0 / .16); /* sheets, dialogs */
  --card-border: 1px solid transparent;

  /* ---------- layers ---------- */
  --z-base: 1;
  --z-sticky: 20;
  --z-header: 50;
  --z-nav: 60;
  --z-cartbar: 70;
  --z-drawer: 80;
  --z-sheet: 90;
  --z-modal: 100;
  --z-toast: 120;

  /* ---------- motion ---------- */
  --dur-1: 150ms;
  --dur-2: 200ms;
  --dur-3: 250ms;
  --ease: cubic-bezier(.2, .8, .2, 1);     /* ease-out, default */
  --ease-in: cubic-bezier(.4, 0, 1, 1);

  /* ---------- layout ---------- */
  --container: 1200px;
  --gutter: 16px;
  --header-h: 64px;
  --nav-h: 64px;
  --side-w: 256px;
  --tap: 44px;               /* minimum tap target */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}

/* ---------- DARK — keep the two blocks below identical ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0E1412;
    --surface: #161E1B;
    --surface-2: #1E2824;
    --surface-3: #26322D;
    --ink: #EEF2EF;
    --muted: #A3ADA8;
    --line: #2A3530;
    --line-strong: #3A4741;
    --brand: #3DBE95;
    --brand-strong: #5FD0AC;
    --brand-soft: #17332B;
    --brand-ink: #0E1412;
    --accent: #FF6A33;
    --accent-strong: #FF8455;
    --accent-soft: #3A1E14;
    --accent-ink: #1A0D07;
    --danger: #FF7A6B;
    --danger-soft: #3A1C19;
    --danger-ink: #1A0D07;
    --warn: #F0A93B;
    --warn-soft: #33270F;
    --star: #F5B83D;
    --inverse-bg: #EEF2EF;
    --inverse-ink: #0E1412;
    --inverse-muted: #4A524E;
    --inverse-brand: #0B5D4B;
    --inverse-danger: #C2372B;
    --header-bg: #121A17;
    --header-ink: #EEF2EF;
    --header-muted: #A3ADA8;
    --header-fill: rgb(255 255 255 / .06);
    --header-fill-hover: rgb(255 255 255 / .1);
    --hero-bg: linear-gradient(135deg, #1D4136 0%, #17332B 55%, #12241F 100%);
    --overlay: rgb(0 0 0 / .6);
    --focus: #3DBE95;
    --skeleton-a: #1C2522;
    --skeleton-b: #24302B;
    --chart-grid: #26322D;
    --chart-1-soft: rgb(61 190 149 / .18);
    --ph-1: linear-gradient(135deg, #5A3A26 0%, #7A4A2C 55%, #92552F 100%);
    --ph-2: linear-gradient(135deg, #22382C 0%, #2F5040 55%, #3B6650 100%);
    --ph-3: linear-gradient(135deg, #4A3B22 0%, #66502A 55%, #806532 100%);
    --ph-4: linear-gradient(135deg, #22313B 0%, #2E4556 55%, #3B5A70 100%);
    --ph-5: linear-gradient(135deg, #4A2826 0%, #683632 55%, #82443E 100%);
    --ph-6: linear-gradient(135deg, #2E2A3E 0%, #413A58 55%, #554C72 100%);
    --sh-1: 0 1px 2px rgb(0 0 0 / .3);
    --sh-2: 0 2px 8px rgb(0 0 0 / .4), 0 12px 32px rgb(0 0 0 / .4);
    --sh-3: 0 8px 24px rgb(0 0 0 / .5), 0 24px 64px rgb(0 0 0 / .5);
    --card-border: 1px solid var(--line);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1412;
  --surface: #161E1B;
  --surface-2: #1E2824;
  --surface-3: #26322D;
  --ink: #EEF2EF;
  --muted: #A3ADA8;
  --line: #2A3530;
  --line-strong: #3A4741;
  --brand: #3DBE95;
  --brand-strong: #5FD0AC;
  --brand-soft: #17332B;
  --brand-ink: #0E1412;
  --accent: #FF6A33;
  --accent-strong: #FF8455;
  --accent-soft: #3A1E14;
  --accent-ink: #1A0D07;
  --danger: #FF7A6B;
  --danger-soft: #3A1C19;
  --danger-ink: #1A0D07;
  --warn: #F0A93B;
  --warn-soft: #33270F;
  --star: #F5B83D;
  --inverse-bg: #EEF2EF;
  --inverse-ink: #0E1412;
  --inverse-muted: #4A524E;
  --inverse-brand: #0B5D4B;
  --inverse-danger: #C2372B;
  --header-bg: #121A17;
  --header-ink: #EEF2EF;
  --header-muted: #A3ADA8;
  --header-fill: rgb(255 255 255 / .06);
  --header-fill-hover: rgb(255 255 255 / .1);
  --hero-bg: linear-gradient(135deg, #1D4136 0%, #17332B 55%, #12241F 100%);
  --overlay: rgb(0 0 0 / .6);
  --focus: #3DBE95;
  --skeleton-a: #1C2522;
  --skeleton-b: #24302B;
  --chart-grid: #26322D;
  --chart-1-soft: rgb(61 190 149 / .18);
  --ph-1: linear-gradient(135deg, #5A3A26 0%, #7A4A2C 55%, #92552F 100%);
  --ph-2: linear-gradient(135deg, #22382C 0%, #2F5040 55%, #3B6650 100%);
  --ph-3: linear-gradient(135deg, #4A3B22 0%, #66502A 55%, #806532 100%);
  --ph-4: linear-gradient(135deg, #22313B 0%, #2E4556 55%, #3B5A70 100%);
  --ph-5: linear-gradient(135deg, #4A2826 0%, #683632 55%, #82443E 100%);
  --ph-6: linear-gradient(135deg, #2E2A3E 0%, #413A58 55%, #554C72 100%);
  --sh-1: 0 1px 2px rgb(0 0 0 / .3);
  --sh-2: 0 2px 8px rgb(0 0 0 / .4), 0 12px 32px rgb(0 0 0 / .4);
  --sh-3: 0 8px 24px rgb(0 0 0 / .5), 0 24px 64px rgb(0 0 0 / .5);
  --card-border: 1px solid var(--line);
}

/* ---------- reduced motion: collapse all durations ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}