/* ==========================================================================
   Forsa — design tokens.  Art direction: "Mosaic Ink".
   Plum/aubergine brand from Levantine tilework, jade = open, saffron = closing.
   Every size is tuned mobile-first and stays compact: cards must never eat a
   phone screen.
   ========================================================================== */

@layer tokens {
  :root {
    /* ---- brand hues (OKLCH hue angles, reused by category accents) ---- */
    --hue-brand: 328;
    --hue-jade: 162;
    --hue-saffron: 78;
    --hue-danger: 27;

    /* ---- light theme: cool-neutral paper, never cream ---- */
    --bg: oklch(98.4% 0.005 var(--hue-brand));
    --bg-sunk: oklch(96.2% 0.008 var(--hue-brand));
    --surface: oklch(100% 0 0);
    --surface-2: oklch(98.8% 0.004 var(--hue-brand));
    --surface-raised: oklch(100% 0 0);
    --border: oklch(90.5% 0.009 var(--hue-brand));
    --border-strong: oklch(84% 0.014 var(--hue-brand));
    --text: oklch(21% 0.026 var(--hue-brand));
    --text-soft: oklch(43% 0.021 var(--hue-brand));
    --text-muted: oklch(56% 0.017 var(--hue-brand));

    --brand: oklch(48% 0.152 var(--hue-brand));
    --brand-hover: oklch(42% 0.163 var(--hue-brand));
    --brand-soft: oklch(95.5% 0.028 var(--hue-brand));
    --brand-ring: oklch(48% 0.152 var(--hue-brand) / 0.32);
    --on-brand: oklch(99% 0.004 var(--hue-brand));

    --open: oklch(52% 0.115 var(--hue-jade));
    --open-soft: oklch(94.5% 0.045 var(--hue-jade));
    --closing: oklch(56% 0.125 var(--hue-saffron));
    --closing-soft: oklch(95% 0.055 var(--hue-saffron));
    --expired: oklch(52% 0.145 var(--hue-danger));
    --expired-soft: oklch(95% 0.04 var(--hue-danger));
    --info: oklch(52% 0.11 245);
    --info-soft: oklch(95% 0.035 245);

    --gold: oklch(64% 0.135 var(--hue-saffron));

    --shadow-color: var(--hue-brand);
    --shadow-xs: 0 1px 2px oklch(21% 0.03 var(--shadow-color) / 0.05);
    --shadow-sm: 0 1px 3px oklch(21% 0.03 var(--shadow-color) / 0.07),
                 0 1px 2px oklch(21% 0.03 var(--shadow-color) / 0.04);
    --shadow-md: 0 6px 16px -4px oklch(21% 0.03 var(--shadow-color) / 0.12),
                 0 2px 6px -2px oklch(21% 0.03 var(--shadow-color) / 0.07);
    --shadow-lg: 0 18px 40px -12px oklch(21% 0.03 var(--shadow-color) / 0.20),
                 0 6px 14px -6px oklch(21% 0.03 var(--shadow-color) / 0.10);
    --grain-opacity: 0.035;
    --mesh-opacity: 0.10;

    /* ---- typography ---- */
    --font-display: "Readex Pro", "Segoe UI", system-ui, sans-serif;
    --font-body: "IBM Plex Sans Arabic", "Readex Pro", "Segoe UI", system-ui, sans-serif;
    --font-num: "IBM Plex Sans Arabic", ui-monospace, monospace;

    /* Compact-first scale: readable at 360px without shouting. */
    --text-2xs: clamp(0.66rem, 0.645rem + 0.08vw, 0.72rem);
    --text-xs: clamp(0.735rem, 0.72rem + 0.09vw, 0.795rem);
    --text-sm: clamp(0.815rem, 0.795rem + 0.11vw, 0.885rem);
    --text-base: clamp(0.925rem, 0.9rem + 0.14vw, 1rem);
    --text-md: clamp(1rem, 0.965rem + 0.18vw, 1.09rem);
    --text-lg: clamp(1.1rem, 1.045rem + 0.28vw, 1.3rem);
    --text-xl: clamp(1.26rem, 1.15rem + 0.5vw, 1.6rem);
    --text-2xl: clamp(1.45rem, 1.24rem + 0.95vw, 2.1rem);
    --text-3xl: clamp(1.75rem, 1.35rem + 1.9vw, 3rem);

    --leading-tight: 1.28;
    --leading-snug: 1.45;
    --leading-normal: 1.68;
    --leading-loose: 1.85;

    /* ---- space: compact rhythm ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.375rem;
    --space-6: 1.75rem;
    --space-7: 2.25rem;
    --space-8: 3rem;
    --space-section: clamp(1.75rem, 1.15rem + 2.6vw, 3.5rem);
    --card-pad: clamp(0.8rem, 0.7rem + 0.5vw, 1.15rem);
    --gap-grid: clamp(0.7rem, 0.6rem + 0.5vw, 1.1rem);

    --container: 74rem;
    --container-narrow: 46rem;
    --container-pad: clamp(0.875rem, 0.6rem + 1.6vw, 2rem);

    /* ---- shape ---- */
    --r-xs: 6px;
    --r-sm: 9px;
    --r-md: 13px;
    --r-lg: 18px;
    --r-xl: 26px;
    --r-pill: 999px;

    /* ---- motion ---- */
    --dur-instant: 90ms;
    --dur-fast: 170ms;
    --dur-mid: 300ms;
    --dur-slow: 520ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.46, 0.54, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    --header-h: 3.5rem;
    --z-header: 40;
    --z-sheet: 60;
    --z-toast: 80;

    /* Smallest comfortable tap target — phones are the primary device. */
    --tap: 2.75rem;

    /* `translate`/`transform` are PHYSICAL, so a value tuned for LTR runs the
       wrong way in RTL and pushes knobs, sheens and drawers off-screen.
       Multiply every horizontal transform by --flip and it works in both. */
    --flip: 1;

    color-scheme: light;
  }

  :root[dir="rtl"] { --flip: -1; }

  /* ---- dark theme: plum-tinted ink, not pure black (OLED-safe) ---- */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: oklch(16.5% 0.017 var(--hue-brand));
      --bg-sunk: oklch(13.5% 0.015 var(--hue-brand));
      --surface: oklch(20.5% 0.019 var(--hue-brand));
      --surface-2: oklch(23.5% 0.021 var(--hue-brand));
      --surface-raised: oklch(25% 0.023 var(--hue-brand));
      --border: oklch(31% 0.024 var(--hue-brand));
      --border-strong: oklch(40% 0.03 var(--hue-brand));
      --text: oklch(95.5% 0.008 var(--hue-brand));
      --text-soft: oklch(78% 0.014 var(--hue-brand));
      --text-muted: oklch(64% 0.016 var(--hue-brand));

      --brand: oklch(76% 0.128 var(--hue-brand));
      --brand-hover: oklch(83% 0.108 var(--hue-brand));
      --brand-soft: oklch(28% 0.055 var(--hue-brand));
      --brand-ring: oklch(76% 0.128 var(--hue-brand) / 0.4);
      --on-brand: oklch(16% 0.03 var(--hue-brand));

      --open: oklch(78% 0.135 var(--hue-jade));
      --open-soft: oklch(27% 0.06 var(--hue-jade));
      --closing: oklch(82% 0.135 var(--hue-saffron));
      --closing-soft: oklch(28% 0.06 var(--hue-saffron));
      --expired: oklch(72% 0.15 var(--hue-danger));
      --expired-soft: oklch(27% 0.06 var(--hue-danger));
      --info: oklch(76% 0.11 245);
      --info-soft: oklch(26% 0.05 245);
      --gold: oklch(80% 0.13 var(--hue-saffron));

      --shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.30);
      --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.36), 0 1px 2px oklch(0% 0 0 / 0.24);
      --shadow-md: 0 8px 20px -6px oklch(0% 0 0 / 0.5), 0 2px 6px -2px oklch(0% 0 0 / 0.3);
      --shadow-lg: 0 22px 46px -14px oklch(0% 0 0 / 0.62), 0 8px 16px -8px oklch(0% 0 0 / 0.4);
      --grain-opacity: 0.05;
      --mesh-opacity: 0.16;

      color-scheme: dark;
    }
  }

  /* Explicit choice always wins over the OS preference. */
  :root[data-theme="dark"] {
    --bg: oklch(16.5% 0.017 var(--hue-brand));
    --bg-sunk: oklch(13.5% 0.015 var(--hue-brand));
    --surface: oklch(20.5% 0.019 var(--hue-brand));
    --surface-2: oklch(23.5% 0.021 var(--hue-brand));
    --surface-raised: oklch(25% 0.023 var(--hue-brand));
    --border: oklch(31% 0.024 var(--hue-brand));
    --border-strong: oklch(40% 0.03 var(--hue-brand));
    --text: oklch(95.5% 0.008 var(--hue-brand));
    --text-soft: oklch(78% 0.014 var(--hue-brand));
    --text-muted: oklch(64% 0.016 var(--hue-brand));

    --brand: oklch(76% 0.128 var(--hue-brand));
    --brand-hover: oklch(83% 0.108 var(--hue-brand));
    --brand-soft: oklch(28% 0.055 var(--hue-brand));
    --brand-ring: oklch(76% 0.128 var(--hue-brand) / 0.4);
    --on-brand: oklch(16% 0.03 var(--hue-brand));

    --open: oklch(78% 0.135 var(--hue-jade));
    --open-soft: oklch(27% 0.06 var(--hue-jade));
    --closing: oklch(82% 0.135 var(--hue-saffron));
    --closing-soft: oklch(28% 0.06 var(--hue-saffron));
    --expired: oklch(72% 0.15 var(--hue-danger));
    --expired-soft: oklch(27% 0.06 var(--hue-danger));
    --info: oklch(76% 0.11 245);
    --info-soft: oklch(26% 0.05 245);
    --gold: oklch(80% 0.13 var(--hue-saffron));

    --shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.30);
    --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.36), 0 1px 2px oklch(0% 0 0 / 0.24);
    --shadow-md: 0 8px 20px -6px oklch(0% 0 0 / 0.5), 0 2px 6px -2px oklch(0% 0 0 / 0.3);
    --shadow-lg: 0 22px 46px -14px oklch(0% 0 0 / 0.62), 0 8px 16px -8px oklch(0% 0 0 / 0.4);
    --grain-opacity: 0.05;
    --mesh-opacity: 0.16;

    color-scheme: dark;
  }

  /* Fallback for engines without oklch(): flat sRGB equivalents. */
  @supports not (color: oklch(50% 0.1 200)) {
    :root {
      --bg: #faf7fa;
      --bg-sunk: #f2edf2;
      --surface: #ffffff;
      --surface-2: #fbf8fb;
      --surface-raised: #ffffff;
      --border: #e4dbe4;
      --border-strong: #cfc0cf;
      --text: #241d26;
      --text-soft: #5c4f5e;
      --text-muted: #7d6f80;
      --brand: #96227a;
      --brand-hover: #7d1b66;
      --brand-soft: #fbeef7;
      --on-brand: #ffffff;
      --open: #0f7a5a;
      --open-soft: #e6f6f0;
      --closing: #8a6300;
      --closing-soft: #fdf3dc;
      --expired: #ad2d24;
      --expired-soft: #fdeceb;
      --gold: #c08a1e;
    }
  }
}