/* ============================================================
   ORDERLY DESIGN SYSTEM — canonical OKLCH tokens
   Source of truth: root /tokens/*.css (imported by root /styles.css).
   Brief updated 2026-08: single orange accent on an achromatic
   Vercel-style neutral scale, tighter radius 6/8/10/14/18/pill,
   DM Sans/DM Mono, Lucide icons. This file mirrors that source
   under the --ods- prefix custom.css already bridges to — every
   other layer re-points to --ods-*. Keep in sync with /tokens/*.css
   by hand (no shared build step); do not let them drift again.
   Loaded via link BEFORE custom.css and pos.css in every layout.
   ============================================================ */
:root {
  /* ---- brand ramp (single orange — per brief) ---- */
  --ods-brand-tint: oklch(96% 0.03 55);
  --ods-brand-light: oklch(85% 0.10 50);
  --ods-brand-primary: oklch(70% 0.19 45);
  --ods-brand-deep: oklch(58% 0.21 32);
  --ods-brand-gradient: linear-gradient(135deg, oklch(75% 0.18 55), oklch(55% 0.22 22));

  /* ---- light surfaces ----
     Neutral (chroma 0), matching tokens/colors.css. These previously carried
     chroma .004-.01 at hue 40-60, i.e. a faint warm cast, while the dark
     scale below is pure neutral - so the two themes were not the same design,
     and warm-tinted surfaces sat beside neutral ones on the same screen. */
  --ods-bg: oklch(98.5% 0 0);
  --ods-surface: oklch(100% 0 0);
  --ods-surface-sunken: oklch(97% 0 0);
  --ods-surface-sunken-2: oklch(96% 0 0);
  --ods-border: oklch(92% 0 0);
  --ods-border-soft: oklch(94.5% 0 0);
  --ods-border-strong: oklch(89% 0 0);
  --ods-text: oklch(17% 0 0);
  --ods-text-secondary: oklch(45% 0 0);
  --ods-text-muted: oklch(55% 0 0);
  --ods-text-faint: oklch(66% 0 0);

  /* ---- dark surfaces (Kitchen / POS default) ---- */
  /* Charcoal NEUTRAL (chroma 0) - not brownish. tokens/colors.css says so
     explicitly. These carried chroma 0.013 at hue 40, which read warm/brown
     beside anything drawn from the neutral scale - the visible cause of dark
     mode differing screen to screen. surface-raised was also BELOW surface
     (17% vs 22%), so "raised" elements rendered darker than their base. */
  --ods-dark-bg: oklch(14% 0 0);
  --ods-dark-surface: oklch(18% 0 0);
  --ods-dark-surface-raised: oklch(22% 0 0);
  --ods-dark-surface-sunken: oklch(12% 0 0);
  --ods-dark-border: oklch(27% 0 0);
  --ods-dark-border-soft: oklch(24% 0 0);
  --ods-dark-text: oklch(97% 0 0);
  --ods-dark-text-muted: oklch(65% 0 0);
  --ods-dark-text-faint: oklch(50% 0 0);
  --ods-dark-accent: oklch(75% 0.16 45);
  --ods-dark-accent-strong: oklch(80% 0.16 48);

  /* ---- semantic (global) ---- */
  --ods-success: oklch(70% 0.19 145);
  --ods-warning: oklch(70% 0.19 95);
  --ods-error: oklch(70% 0.19 15);
  --ods-info: oklch(70% 0.19 230);

  /* ---- status pill pairs (text / bg) ---- */
  --ods-status-amber-text: oklch(45% 0.15 95);
  --ods-status-amber-bg: oklch(92% 0.07 95);
  --ods-status-orange-text: oklch(45% 0.17 45);
  --ods-status-orange-bg: oklch(92% 0.07 50);
  --ods-status-red-text: oklch(45% 0.16 15);
  --ods-status-red-bg: oklch(92% 0.06 15);
  --ods-status-green-text: oklch(38% 0.15 145);
  --ods-status-green-bg: oklch(92% 0.06 145);

  /* ---- links ---- */
  --ods-link: oklch(58% 0.19 40);
  --ods-link-hover: oklch(50% 0.21 30);

  /* ---- per-product accents — single orange per brief ----
     Manager / Kitchen / POS / Delivery kept as aliases to
     Orderly orange for back-compat so var(--ods-product-*)
     never breaks; they are intentionally dead per
     docs/plans/orderly-design-brief.md:9. Do not revive
     manager green or pos blue without fresh approval. */
  --ods-product-orderly: oklch(70% 0.19 45);
  --ods-product-orderly-deep: oklch(58% 0.21 45);
  --ods-product-manager: var(--ods-product-orderly);
  --ods-product-manager-deep: var(--ods-product-orderly-deep);
  --ods-product-kitchen: var(--ods-product-orderly);
  --ods-product-kitchen-deep: var(--ods-product-orderly-deep);
  --ods-product-pos: var(--ods-product-orderly);
  --ods-product-pos-deep: var(--ods-product-orderly-deep);
  --ods-product-delivery: var(--ods-product-orderly);
  --ods-product-delivery-deep: var(--ods-product-orderly-deep);

  /* ---- radius: tight per current brief 6/8/10/14/18/pill
     (matches root /tokens/radius.css). Pills and toggles use
     --ods-radius-pill. ---- */
  --ods-radius-xs: 6px;
  --ods-radius-sm: 8px;
  --ods-radius-md: 10px;
  --ods-radius-lg: 14px;
  --ods-radius-xl: 18px;
  --ods-radius-pill: 9999px;

  /* ---- borders / shadows ----
     Kept at "none" (flat, border-only elevation) to match what
     currently ships — custom.css already consumes --ods-shadow-e1/e2/e3
     (see --shadow-soft/--shadow-card/--shadow-card-hover). Root
     /tokens/shadow.css now defines real "shadow-as-border" elevation
     (subtle 1px + blur) instead of flat none; adopting that is a
     visible change on every card/modal, so it's deliberately left for
     Phase 2 rather than folded into this token sync. */
  --ods-border-width: 1px;
  --ods-shadow-e0: none;
  --ods-shadow-e1: none;
  --ods-shadow-e2: none;
  --ods-shadow-e3: none;
  --ods-shadow-brand-glow: none;

  /* ---- spacing scale (matches root /tokens/spacing.css) ---- */
  --ods-space-1: 4px;
  --ods-space-2: 8px;
  --ods-space-3: 12px;
  --ods-space-4: 16px;
  --ods-space-5: 24px;
  --ods-space-6: 32px;
  --ods-space-7: 48px;
  --ods-space-8: 64px;
  --ods-space-section-x: 80px;
  --ods-space-section-y: 64px;

  /* ---- motion (matches root /tokens/motion.css) ---- */
  --ods-ease-quick: 140ms cubic-bezier(0.16, 1, 0.3, 1);
  --ods-ease-standard: 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --ods-ease-swift: 300ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --ods-ease-pulse: 1.4s ease-in-out infinite;

  /* ---- typography ---- */
  --ods-font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ods-font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- type scale (matches root /tokens/typography.css) — not yet
     referenced by any selector; Phase 2 screens should use these
     instead of the ad hoc .font9..font16 utility classes in custom.css. ---- */
  --ods-text-display: 600 48px/1.0 var(--ods-font-sans);
  --ods-text-h1: 600 32px/1.2 var(--ods-font-sans);
  --ods-text-h2: 600 20px/1.3 var(--ods-font-sans);
  --ods-text-h3: 500 16px/1.4 var(--ods-font-sans);
  --ods-text-body: 400 14px/1.6 var(--ods-font-sans);
  --ods-text-body-lg: 400 16px/1.6 var(--ods-font-sans);
  --ods-text-label: 500 12px/1.4 var(--ods-font-sans);
  --ods-text-caption: 400 13px/1.4 var(--ods-font-sans);
  --ods-text-mono: 500 13px/1.5 var(--ods-font-mono);
  --ods-text-mono-sm: 400 11px/1.4 var(--ods-font-mono);
}

@keyframes odsToastIn {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes odsPulseDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}