/* ==========================================================================
   Yomi v2 design tokens: the single source of truth.
   Three tiers: primitive (--p-*) → semantic (--bg, --accent, …) → component (--c-*).
   build.mjs compiles this file to tokens.json (W3C format) and tokens.ts
   (typed, for React Native and web). See docs/v2/design-tokens.md.
   Light is the default; dark re-points the semantic tier at other primitives.
   Theme: [data-theme="dark"] on <html>, or follow-system when no attribute.
   RTL: layout tokens are logical (inline-start/end), never left/right.
   ========================================================================== */

:root {
  /* ==== Tier 1: primitives. Raw values only; never used by components. ==== */
  --p-stone-0: #FFFFFF; --p-stone-25: #FAFAF8; --p-stone-30: #FAFAFA; --p-stone-50: #F5F5F3; --p-stone-60: #F6F6F3; --p-stone-100: #EEEEEB; --p-stone-110: #ECECE8; --p-stone-150: #E7E7E3; --p-stone-200: #D4D4CF; --p-stone-500: #6B6B73; --p-stone-600: #52525B; --p-stone-700: #4A4A52; --p-stone-900: #18181B;
  --p-night-0: #0B0B0D; --p-night-50: #151518; --p-night-100: #1A1A1E; --p-night-150: #1F1F24; --p-night-200: #222227; --p-night-220: #232328; --p-night-250: #26262C; --p-night-300: #29292F; --p-night-400: #34343B; --p-night-600: #8B8B95; --p-night-700: #A8A8B1; --p-night-750: #B4B4BD; --p-night-900: #EDEDEF; --p-night-950: #F2F2F4;
  --p-violet-50: #EFECFE; --p-violet-100: #E2DDFD; --p-violet-110: #E9E6FB; --p-violet-300: #B9B0FF; --p-violet-350: #A99EFF; --p-violet-450: #7765F6; --p-violet-500: #6A56F2; --p-violet-550: #5C48E6; --p-violet-600: #5B45E0; --p-violet-650: #4E39D2; --p-violet-700: #4A34D4; --p-violet-720: #4A3BB0; --p-violet-800: #4330BF; --p-violet-900: #2D2752; --p-violet-920: #262142; --p-violet-950: #221E3D;
  --p-green-50: #E5F4EC; --p-green-60: #E3F0EA; --p-green-300: #7FD0A6; --p-green-400: #45D093; --p-green-700: #0E7A4E; --p-green-750: #2D6A4F; --p-green-900: #15291F; --p-green-950: #10291E;
  --p-amber-50: #FCF0DA; --p-amber-300: #F2B450; --p-amber-400: #E89A1C; --p-amber-700: #9A5A00; --p-amber-950: #2E2312;
  --p-red-50: #FCE8E6; --p-red-300: #FF7A6E; --p-red-700: #C2261A; --p-red-950: #36161A;
  --p-clay-50: #F6E9DD; --p-clay-300: #E5B07F; --p-clay-700: #8A4B14; --p-clay-950: #2E2216;
  --p-blue-50: #E4EDF7; --p-blue-300: #8DB7E2; --p-blue-700: #2C5A8A; --p-blue-950: #172432;
  --p-rose-50: #F4E4EA; --p-rose-300: #E79AB6; --p-rose-700: #8C3654; --p-rose-950: #2E1821;


  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Heebo", "SF Hebrew", "Arial Hebrew", system-ui, sans-serif;
  --font-num: "Heebo", "SF Pro Text", system-ui, sans-serif;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700; /* ₪ amounts only */

  /* size / line-height pairs (spec §2.2) */
  --text-display: 32px;   --lh-display: 40px;
  --text-title: 24px;     --lh-title: 32px;
  --text-headline: 19px;  --lh-headline: 26px;
  --text-body: 16px;      --lh-body: 24px;
  --text-callout: 14px;   --lh-callout: 20px;
  --text-caption: 12px;   --lh-caption: 16px;
  /* numeric hero sizes (gadgets) */
  --text-figure-l: 40px;  --lh-figure-l: 44px;
  --text-figure-m: 28px;  --lh-figure-m: 34px;

  --tracking-tight: -0.01em;
  --tracking-figure: -0.02em;

  /* ---- Spacing (4-pt grid) -------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --margin-phone: 16px;
  --margin-wide: 24px;
  --touch-min: 44px;

  /* ---- Safe areas (iPhone 6.1") --------------------------------------- */
  --safe-top: 47px;
  --safe-bottom: 34px;

  /* ---- Radius ---------------------------------------------------------- */
  --radius-xs: 6px;     /* kbd, tiny badges */
  --radius-control: 10px;
  --radius-card: 16px;
  --radius-sheet: 24px;
  --radius-full: 999px;

  /* ---- Layout ---------------------------------------------------------- */
  --tabbar-h: 56px;
  --rail-w: 80px;
  --sidebar-w: 248px;
  --pane-list-w: 380px;
  --pane-queue-w: 400px;
  --pane-edit-w: 340px;
  --measure: 72ch;
  /* gadget grid per device class (spec v2.1 §7.1): columns · row unit · gap.
     Sizes span S 2×1 · M 4×1 · L 4×2 · XL 4×3 (phone), S 2×1 · M 4×1 · L 4×2 ·
     XL 8×2 (tablet), S 3×1 · M 6×1 · L 6×2 · XL 12×2 (desktop). The row unit is
     the minimum row height; a row grows to its content. */
  --grid-cols-phone: 4;    --grid-row-phone: 84px;
  --grid-cols-tablet: 8;   --grid-row-tablet: 96px;
  --grid-cols-desktop: 12; --grid-row-desktop: 96px;
  --grid-gap: 12px;

  /* ---- Motion ---------------------------------------------------------- */
  --dur-instant: 100ms;  /* pressed state */
  --dur-fast: 150ms;     /* hover, toggles */
  --dur-base: 200ms;     /* state changes */
  --dur-slow: 250ms;     /* push / pane change */
  --dur-sheet: 300ms;    /* sheet spring settle; ceiling for the work path */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);

  /* ==== Tier 2: semantic tokens (light). Components read these. ========= */
  color-scheme: light;
  --bg: var(--p-stone-50);
  --surface: var(--p-stone-0);
  --surface-2: var(--p-stone-25);
  --surface-sunken: var(--p-stone-100);
  --surface-inverse: var(--p-stone-900);
  --overlay: rgba(16, 16, 20, 0.36);
  --hover: rgba(24, 24, 32, 0.04);
  --pressed: rgba(24, 24, 32, 0.08);

  --line: var(--p-stone-150);
  --line-strong: var(--p-stone-200);
  --ring: rgba(24, 24, 32, 0.07);

  --text: var(--p-stone-900);
  --text-2: var(--p-stone-600);
  --text-3: var(--p-stone-500);
  --text-on-accent: var(--p-stone-0);
  --text-inverse: var(--p-stone-30);

  --accent: var(--p-violet-600);
  --accent-hover: var(--p-violet-650);
  --accent-pressed: var(--p-violet-800);
  --accent-text: var(--p-violet-700);
  --accent-soft: var(--p-violet-50);
  --accent-soft-2: var(--p-violet-100);
  --focus: rgba(91, 69, 224, 0.45);

  --positive: var(--p-green-700);
  --positive-soft: var(--p-green-50);
  --attention: var(--p-amber-700);
  --attention-soft: var(--p-amber-50);
  --attention-dot: var(--p-amber-400);
  --critical: var(--p-red-700);
  --critical-soft: var(--p-red-50);

  --skeleton: var(--p-stone-110);
  --skeleton-hi: var(--p-stone-60);

  /* avatar tints: low chroma, identity only, never status */
  --tint-1: var(--p-violet-110); --tint-1-ink: var(--p-violet-720);
  --tint-2: var(--p-green-60); --tint-2-ink: var(--p-green-750);
  --tint-3: var(--p-clay-50); --tint-3-ink: var(--p-clay-700);
  --tint-4: var(--p-blue-50); --tint-4-ink: var(--p-blue-700);
  --tint-5: var(--p-rose-50); --tint-5-ink: var(--p-rose-700);
  --tint-6: var(--p-stone-110); --tint-6-ink: var(--p-stone-700);

  /* ---- Elevation (one level for cards, one for sheets) ------------------ */
  --elev-card: 0 0 0 1px var(--ring), 0 1px 2px rgba(24, 24, 32, 0.04);
  --elev-sheet: 0 0 0 1px var(--ring), 0 -12px 40px rgba(16, 16, 20, 0.14);
  --elev-pop: 0 0 0 1px var(--ring), 0 24px 64px rgba(16, 16, 20, 0.20), 0 4px 12px rgba(16, 16, 20, 0.08);

  /* ==== Tier 3: component tokens. Reference semantic tokens only. ========== */
  --c-button-h-block: 50px;   --c-button-h-md: 44px;   --c-button-h-sm: 32px;
  --c-button-radius: 14px;
  --c-input-h: 52px;          --c-input-radius: 14px;
  --c-chip-h: 22px;           --c-filter-chip-h: 32px;
  --c-list-row-min-h: 60px;   --c-list-row-dense-h: 48px;
  --c-card-bg: var(--surface);         --c-card-radius: var(--radius-card);   --c-card-shadow: var(--elev-card);
  /* היום hero ("קודם כל"): the only accent-ringed surface on היום */
  --c-hero-bg: var(--surface);         --c-hero-radius: 22px;    --c-hero-eyebrow: var(--accent-text);
  --c-hero-ring: color-mix(in srgb, var(--accent) 40%, transparent);
  --c-hero-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 14%, transparent), 0 2px 6px rgba(16, 16, 20, 0.05);
  --c-hero-title: 21px;                --c-hero-title-lh: 28px;
  /* trust rows (checkout, לטפל): the owner's mark and the business's document, kept apart */
  --c-trust-done: var(--positive);     --c-trust-doc-bg: var(--surface-2);
  --c-sheet-bg: var(--surface);        --c-sheet-radius: var(--radius-sheet);  --c-sheet-shadow: var(--elev-sheet);
  --c-tabbar-bg: color-mix(in srgb, var(--surface) 86%, transparent);
  --c-tab-active: var(--text);         --c-tab-inactive: var(--text-3);
  --c-plus-bg: var(--accent);          --c-plus-fg: var(--text-on-accent);   --c-plus-w: 48px;   --c-plus-h: 40px;
  --c-badge-bg: var(--critical);       --c-badge-fg: #fff;
  --c-skeleton: var(--skeleton);       --c-skeleton-hi: var(--skeleton-hi);  --c-skeleton-cycle: 1400ms;
  --c-fiscal-provider-plate: var(--surface-2);
  /* edit mode (עריכת היום) */
  --c-edit-outline: var(--line-strong);  --c-edit-selected: var(--accent);
  --c-edit-handle-bg: var(--surface-inverse);  --c-edit-handle-fg: var(--text-inverse);
  --c-edit-drop: var(--accent-soft);     --c-edit-wiggle: 0.5deg;   --c-edit-wiggle-dur: 280ms;
  --c-edit-drop-ring: color-mix(in srgb, var(--accent) 55%, transparent);
  --c-edit-toolbar-bg: var(--surface-inverse);  --c-edit-toolbar-fg: var(--text-inverse);
  --c-drag-shadow: 0 18px 40px rgba(16, 16, 20, 0.22);
}

/* ---- Tier 2: semantic tokens (dark), designed separately, not inverted ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--p-night-0);
  --surface: var(--p-night-50);
  --surface-2: var(--p-night-100);
  --surface-sunken: var(--p-night-200);
  --surface-inverse: var(--p-night-950);
  --overlay: rgba(0, 0, 0, 0.56);
  --hover: rgba(255, 255, 255, 0.04);
  --pressed: rgba(255, 255, 255, 0.08);

  --line: var(--p-night-250);
  --line-strong: var(--p-night-400);
  --ring: rgba(255, 255, 255, 0.07);

  --text: var(--p-night-900);
  --text-2: var(--p-night-700);
  --text-3: var(--p-night-600);
  --text-on-accent: var(--p-stone-0);
  --text-inverse: var(--p-stone-900);

  --accent: var(--p-violet-600);
  --accent-hover: var(--p-violet-450);
  --accent-pressed: var(--p-violet-550);
  --accent-text: var(--p-violet-350);
  --accent-soft: var(--p-violet-950);
  --accent-soft-2: var(--p-violet-900);
  --focus: rgba(169, 158, 255, 0.5);

  --positive: var(--p-green-400);
  --positive-soft: var(--p-green-950);
  --attention: var(--p-amber-300);
  --attention-soft: var(--p-amber-950);
  --attention-dot: var(--p-amber-300);
  --critical: var(--p-red-300);
  --critical-soft: var(--p-red-950);

  --skeleton: var(--p-night-150);
  --skeleton-hi: var(--p-night-300);

  --tint-1: var(--p-violet-920); --tint-1-ink: var(--p-violet-300);
  --tint-2: var(--p-green-900); --tint-2-ink: var(--p-green-300);
  --tint-3: var(--p-clay-950); --tint-3-ink: var(--p-clay-300);
  --tint-4: var(--p-blue-950); --tint-4-ink: var(--p-blue-300);
  --tint-5: var(--p-rose-950); --tint-5-ink: var(--p-rose-300);
  --tint-6: var(--p-night-220); --tint-6-ink: var(--p-night-750);

  --elev-card: 0 0 0 1px var(--ring);
  --elev-sheet: 0 0 0 1px var(--ring), 0 -12px 40px rgba(0, 0, 0, 0.5);
  --elev-pop: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 24px 64px rgba(0, 0, 0, 0.6);
}

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