/* ==========================================================================
   ATHAR — tokens.css
   The single source of truth for the visual language.
   Everything downstream must reference these tokens.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------ ink */

  --c-bg: #f5f3ef;
  --c-bg-soft: #eceae4;
  --c-surface: #ffffff;
  --c-surface-2: #fbfaf8;
  --c-surface-sunken: #f0eee8;

  --c-border: #dbd5cb;
  --c-border-strong: #c2bbae;

  --c-text: #16181b;
  --c-text-muted: #5a5e66;
  --c-text-subtle: #8b9098;
  --c-text-inverse: #ffffff;

  /* Technology accent — used sparingly. The interface is not "blue". */
  --c-accent: #1e43d6;
  --c-accent-hover: #1836ae;
  --c-accent-active: #132b86;
  --c-accent-soft: #e9edfb;
  --c-accent-line: #c4d0f5;

  /* Warm secondary accent — memory, clay, ink. */
  --c-clay: #a4603c;
  --c-clay-soft: #f7ece3;
  --c-clay-line: #ecd6c7;

  /* Feedback */
  --c-success: #2e6a4e;
  --c-success-soft: #e7f2ec;
  --c-danger: #a6362d;
  --c-danger-soft: #f9eae7;
  --c-warning: #8a6a1e;
  --c-warning-soft: #f8f1dd;

  --c-overlay: rgba(22, 24, 27, 0.44);
  --c-scrim: rgba(22, 24, 27, 0.06);

  /* -------------------------------------------------------------- typography */

  --font-latin: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-arabic: "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro",
    "Traditional Arabic", "Segoe UI", Tahoma, sans-serif;

  --font-sans: var(--font-latin), var(--font-arabic);
  --font-display: Georgia, "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic",
    "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo,
    Consolas, monospace;

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: clamp(2.25rem, 1.2rem + 3.4vw, 3.25rem);
  --fs-hero: clamp(2.9rem, 1rem + 7.6vw, 5.25rem);

  --lh-tight: 1.12;
  --lh-snug: 1.34;
  --lh-base: 1.68;

  --ls-tight: -0.022em;
  --ls-wide: 0.16em;
  --ls-xwide: 0.3em;

  /* ----------------------------------------------------------------- spacing */

  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 2rem;
  --sp-8: 2.5rem;
  --sp-9: 3rem;
  --sp-10: 4rem;
  --sp-11: 5rem;
  --sp-12: 7rem;

  /* ------------------------------------------------------------------- shape */

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --bw-1: 1px;
  --bw-2: 2px;

  /* ------------------------------------------------------------------ shadow */

  --sh-xs: 0 1px 2px rgba(22, 24, 27, 0.05);
  --sh-sm: 0 1px 3px rgba(22, 24, 27, 0.07), 0 1px 2px rgba(22, 24, 27, 0.04);
  --sh-md: 0 6px 18px -6px rgba(22, 24, 27, 0.14), 0 2px 6px rgba(22, 24, 27, 0.05);
  --sh-lg: 0 26px 60px -22px rgba(22, 24, 27, 0.28), 0 8px 22px rgba(22, 24, 27, 0.07);

  /* ------------------------------------------------------------------ layout */

  --container: 1120px;
  --container-narrow: 720px;
  --header-h: 66px;

  /* ------------------------------------------------------------------ motion */

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ---------------------------------------------------------------- z-index */

  --z-header: 40;
  --z-drawer: 45;
  --z-modal: 80;
  --z-toast: 90;
  --z-skip: 100;
}