/* ==========================================================================
   Amana Design System: semantic tokens
   Components read ONLY these variables. Primitive ramps live in
   tokens-primitives.css (generated). Light and dark use light-dark(), driven
   by color-scheme, so the theme switch is one attribute: <html data-theme="light|dark">.
   Direction is one attribute: <html dir="rtl|ltr">. Arabic-first.
   ========================================================================== */

:root {
  color-scheme: light dark;
}
:root[data-theme="light"], [data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"], [data-theme="dark"]  { color-scheme: dark; }
[data-theme="light"], [data-theme="dark"] { color: var(--text); }

:root {
  /* ---------- Surfaces ---------- */
  --bg:               light-dark(var(--ink-50),  var(--ink-950));   /* app canvas */
  --surface:          light-dark(#ffffff,        var(--ink-900));   /* cards, panels */
  --surface-2:        light-dark(#ffffff,        oklch(0.265 0.012 320)); /* popovers, menus (raised) */
  --surface-sunken:   light-dark(var(--ink-100), oklch(0.185 0.011 320)); /* wells, table headers, inputs on surface */
  --surface-inverse:  light-dark(var(--ink-900), var(--ink-100));
  --scrim:            light-dark(oklch(0.2 0.03 320 / 0.5), oklch(0.05 0.01 320 / 0.7));

  /* ---------- Borders ---------- */
  --border:           light-dark(var(--ink-200), oklch(0.32 0.012 320));  /* decorative separators */
  --border-strong:    light-dark(var(--ink-500), oklch(0.62 0.012 320));  /* control boundaries, 3:1 */
  --border-focus:     light-dark(var(--plum-600), var(--saffron-400));

  /* ---------- Text ---------- */
  --text:             light-dark(var(--ink-900), var(--ink-100));
  --text-2:           light-dark(var(--ink-700), var(--ink-300));
  --text-3:           light-dark(var(--ink-600), oklch(0.72 0.01 320));  /* muted and placeholder, still 4.5:1 */
  --text-inverse:     light-dark(#ffffff,        var(--ink-950));
  --text-link:        light-dark(var(--plum-700), var(--plum-300));
  --text-link-hover:  light-dark(var(--plum-900), var(--plum-200));

  /* ---------- Brand (plum) ---------- */
  --brand:            light-dark(var(--plum-800), var(--plum-300));
  --brand-hover:      light-dark(var(--plum-900), var(--plum-200));
  --brand-active:     light-dark(var(--plum-950), var(--plum-100));
  --on-brand:         light-dark(#ffffff,        var(--plum-950));
  --brand-subtle:     light-dark(var(--plum-50),  oklch(0.27 0.045 320));
  --brand-subtle-2:   light-dark(var(--plum-100), oklch(0.32 0.055 320));
  --brand-subtle-fg:  light-dark(var(--plum-900), var(--plum-100));
  --brand-border:     light-dark(var(--plum-200), oklch(0.42 0.07 320));

  /* ---------- Brand surfaces (marketing hero, footer, splash). Fixed plum in both themes. ---------- */
  --surface-brand:       var(--plum-800);
  --surface-brand-deep:  var(--plum-950);
  --on-surface-brand:    #ffffff;
  --on-surface-brand-2:  var(--plum-100);
  --accent-on-brand:     var(--saffron-400);
  --border-on-brand:     var(--plum-300);

  /* ---------- Accent (saffron). Used for highlights, the top trust tier and the focus ring in dark. ---------- */
  --accent:           var(--saffron-500);
  --accent-hover:     var(--saffron-400);
  --accent-active:    light-dark(var(--saffron-600), var(--saffron-300));
  --on-accent:        var(--plum-950);
  --accent-subtle:    light-dark(var(--saffron-50), oklch(0.30 0.04 78));
  --accent-subtle-fg: light-dark(var(--saffron-800), var(--saffron-200));
  --accent-border:    light-dark(var(--saffron-300), oklch(0.5 0.08 78));

  /* ---------- Status. Always paired with an icon and a label, never colour alone. ---------- */
  --success-bg:       light-dark(var(--green-50),  oklch(0.26 0.05 155));
  --success-border:   light-dark(var(--green-200), oklch(0.42 0.08 155));
  --success-fg:       light-dark(var(--green-800), var(--green-300));
  --success-solid:    light-dark(var(--green-700), var(--green-400));
  --on-success-solid: light-dark(#ffffff,          var(--green-950));

  --warning-bg:       light-dark(var(--orange-50),  oklch(0.28 0.05 52));
  --warning-border:   light-dark(var(--orange-200), oklch(0.46 0.09 52));
  --warning-fg:       light-dark(var(--orange-800), var(--orange-300));
  --warning-solid:    light-dark(var(--orange-700), var(--orange-400));
  --on-warning-solid: light-dark(#ffffff,           var(--orange-950));

  --danger-bg:        light-dark(var(--red-50),  oklch(0.27 0.06 25));
  --danger-border:    light-dark(var(--red-200), oklch(0.46 0.1 25));
  --danger-fg:        light-dark(var(--red-800), var(--red-300));
  --danger-solid:     light-dark(var(--red-700), var(--red-400));
  --danger-solid-hover: light-dark(var(--red-800), var(--red-300));
  --on-danger-solid:  light-dark(#ffffff,        var(--red-950));

  --info-bg:          light-dark(var(--blue-50),  oklch(0.27 0.05 245));
  --info-border:      light-dark(var(--blue-200), oklch(0.45 0.08 245));
  --info-fg:          light-dark(var(--blue-800), var(--blue-300));
  --info-solid:       light-dark(var(--blue-700), var(--blue-400));
  --on-info-solid:    light-dark(#ffffff,         var(--blue-950));

  /* ---------- Verification tiers (the product's core trust signal) ----------
     T0 unverified, T1 identity, T2 background, T3 references and interview.
     Tier is always shown as a shield icon + label ("موثقة المستوى 2"). */
  --tier-0-fg:   var(--text-3);
  --tier-0-bg:   var(--surface-sunken);
  --tier-1-fg:   light-dark(var(--plum-700), var(--plum-300));
  --tier-1-bg:   var(--brand-subtle);
  --tier-2-fg:   light-dark(#ffffff, var(--plum-950));
  --tier-2-bg:   light-dark(var(--plum-800), var(--plum-300));
  --tier-3-fg:   var(--plum-950);
  --tier-3-bg:   var(--saffron-500);

  /* ---------- Interaction layers ---------- */
  --hover-wash:   light-dark(oklch(0.25 0.03 320 / 0.06), oklch(1 0 0 / 0.07));
  --pressed-wash: light-dark(oklch(0.25 0.03 320 / 0.11), oklch(1 0 0 / 0.12));
  --selected-bg:  var(--brand-subtle);
  --disabled-bg:  light-dark(var(--ink-100), oklch(0.27 0.01 320));
  --disabled-fg:  light-dark(var(--ink-500), oklch(0.55 0.01 320));
  --focus-ring:   0 0 0 2px var(--surface), 0 0 0 4px var(--border-focus);
  --highlight:    light-dark(var(--saffron-100), oklch(0.36 0.06 78)); /* search match, row flash */

  /* ---------- Data visualisation (validated with dataviz validate_palette.js; see tools/dataviz-validation.md) ----------
     Fixed order, never cycled. Cap of 6 series. 7th+ folds into "Other" or small multiples. */
  --viz-1: light-dark(#8a4d99, #a566b6);   /* plum */
  --viz-2: light-dark(#e8a418, #c38200);   /* saffron */
  --viz-3: light-dark(#2f6fdc, #4f86ea);   /* blue */
  --viz-4: light-dark(#d9558a, #e0628f);   /* rose */
  --viz-5: light-dark(#5a9a1e, #5fa328);   /* green */
  --viz-6: light-dark(#00919f, #0fa5b3);   /* teal */
  --viz-other: light-dark(var(--ink-400), var(--ink-500));
  --viz-seq-1: light-dark(var(--plum-100), oklch(0.32 0.06 320));
  --viz-seq-2: light-dark(var(--plum-200), oklch(0.40 0.08 320));
  --viz-seq-3: light-dark(var(--plum-300), oklch(0.50 0.10 320));
  --viz-seq-4: light-dark(var(--plum-400), oklch(0.60 0.115 320));
  --viz-seq-5: light-dark(var(--plum-600), oklch(0.72 0.11 320));
  --viz-seq-6: light-dark(var(--plum-800), oklch(0.83 0.085 320));
  --viz-grid: light-dark(var(--ink-200), oklch(0.30 0.012 320));
  --viz-axis: light-dark(var(--ink-300), oklch(0.38 0.012 320));
  --viz-ink: var(--text-2);
  --viz-surface-gap: var(--surface);

  /* ---------- Typography ---------- */
  --font-sans: "Readex Pro", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-ethiopic: "Noto Sans Ethiopic", "Readex Pro", system-ui, sans-serif;
  --font-mono: "Code Arabic", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Fixed rem scale for product UI (1rem = 16px). Ratio ~1.125 to 1.2. */
  --fs-2xs: 0.6875rem;  /* 11 */
  --fs-xs:  0.75rem;    /* 12 */
  --fs-sm:  0.8125rem;  /* 13 */
  --fs-md:  0.875rem;   /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg:  1.125rem;   /* 18 */
  --fs-xl:  1.25rem;    /* 20 */
  --fs-2xl: 1.5rem;     /* 24 */
  --fs-3xl: 1.75rem;    /* 28 */
  --fs-4xl: 2rem;       /* 32 */
  --fs-5xl: 2.5rem;     /* 40 */
  --fs-6xl: 3.25rem;    /* 52, web hero only */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Arabic needs generous leading; Readex Pro has tall metrics so 1.55 reads clean. */
  --lh-tight: 1.3;
  --lh-snug: 1.45;
  --lh-base: 1.6;
  --lh-loose: 1.75;
  --ls-heading: -0.005em; /* Arabic is never tracked; Latin gets a hair of tightening on large headings only */

  /* ---------- Spacing (4px grid) ---------- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */

  /* ---------- Shape ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;    /* ceiling for cards and sheets */
  --radius-pill: 999px;

  /* ---------- Elevation. Bordered surfaces use sm/md only (blur <= 8px). lg is for unbordered modals/sheets. ---------- */
  --shadow-sm: 0 1px 2px light-dark(oklch(0.2 0.03 320 / 0.08), oklch(0 0 0 / 0.4));
  --shadow-md: 0 2px 8px light-dark(oklch(0.2 0.03 320 / 0.10), oklch(0 0 0 / 0.45));
  --shadow-lg: 0 8px 24px light-dark(oklch(0.2 0.03 320 / 0.16), oklch(0 0 0 / 0.55));

  /* ---------- Motion. State changes only. 120 to 240ms. ---------- */
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);       /* ease-out-quart */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Z-index scale ---------- */
  --z-base: 0;
  --z-raised: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-drawer: 300;
  --z-modal-backdrop: 400;
  --z-modal: 410;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ---------- Control sizing (comfortable density, web default) ---------- */
  --control-h-sm: 2rem;      /* 32 */
  --control-h: 2.5rem;       /* 40 */
  --control-h-lg: 3rem;      /* 48 */
  --control-h-xl: 3.5rem;    /* 56 */
  --hit-min: 2.75rem;        /* 44, WCAG 2.2 target */
  --row-h: 3rem;
  --pad-x: var(--space-4);
  --pad-y: var(--space-3);
  --icon-size: 20px;

  /* ---------- Layout ---------- */
  --sidebar-w: 16.5rem;
  --sidebar-w-collapsed: 4.5rem;
  --topbar-h: 4rem;
  --container: 75rem;        /* 1200 */
  --container-narrow: 45rem; /* 720 */
  --measure: 68ch;
  --phone-w: 390px;
  --phone-h: 844px;
}

/* ---------- Surface profiles ----------
   Same components, different ergonomics. Set on the root of a surface. */
[data-density="compact"] {          /* dashboards, back office */
  --control-h: 2.25rem;
  --control-h-lg: 2.5rem;
  --row-h: 2.5rem;
  --pad-x: var(--space-3);
  --pad-y: var(--space-2);
  --icon-size: 18px;
}
[data-surface="app"] {              /* family app: one-handed, bright sun */
  --control-h: 3rem;
  --control-h-lg: 3.5rem;
  --hit-min: 3rem;                  /* 48dp */
  --row-h: 3.5rem;
  --icon-size: 22px;
}
[data-surface="worker"] {           /* worker app: larger type, 56dp targets, icons before words */
  --control-h: 3.5rem;
  --control-h-lg: 4rem;
  --hit-min: 3.5rem;                /* 56dp */
  --row-h: 4rem;
  --icon-size: 26px;
  --fs-md: 1rem;
  --fs-base: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.75rem;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}