/* Bruchma design tokens — copied from bruchma-saas-suite/docs/design-system.md §2.1.
   Do not edit here first: change the design system, then copy. */

:root {
  /* ---- colour: light surfaces ---- */
  --color-paper: oklch(98.5% 0.004 250);
  --color-surface: oklch(95.5% 0.008 250);
  --color-surface-2: oklch(92.5% 0.012 252);
  --color-rule: oklch(88% 0.012 255);
  --color-rule-strong: oklch(80% 0.016 258);
  --color-field-border: oklch(62% 0.02 260);
  --color-muted: oklch(46% 0.03 265);
  --color-ink: oklch(22% 0.045 270);

  /* ---- colour: navy band ---- */
  --color-navy: oklch(22% 0.045 270);
  --color-navy-2: oklch(28% 0.05 270);
  --color-navy-rule: oklch(36% 0.045 268);
  --color-on-navy: oklch(96% 0.01 250);
  --color-on-navy-muted: oklch(80% 0.03 255);

  /* ---- colour: accent ---- */
  --color-accent: oklch(74% 0.12 185); /* filled buttons (navy text), highlights */
  --color-accent-hover: oklch(80% 0.11 185);
  --color-accent-press: oklch(69% 0.12 186);
  --color-accent-soft: oklch(93% 0.04 185); /* tinted chip / recommended badge bg */
  --color-accent-dark: oklch(48% 0.09 190); /* links + small text on light */
  --color-accent-deep: oklch(40% 0.08 192); /* link hover on light */
  --color-on-accent: oklch(22% 0.045 270);

  /* ---- colour: state ---- */
  --color-focus: oklch(48% 0.11 195);
  --color-focus-on-navy: oklch(80% 0.12 185);
  --color-error: oklch(50% 0.17 25);
  --color-error-soft: oklch(95% 0.03 25);
  --color-success: oklch(45% 0.1 160);
  --color-success-soft: oklch(95% 0.035 165);
  --color-disabled-bg: oklch(90% 0.008 255);
  --color-disabled-ink: oklch(58% 0.015 260);

  /* ---- colour: overlays (modifiers, not palette) ---- */
  --color-frost: oklch(98.5% 0.004 250 / 0.82);
  --color-shadow: oklch(22% 0.045 270 / 0.14);
  --color-hatch: oklch(88% 0.012 255 / 0.55);

  /* ---- type ---- */
  --font-display: "Bricolage Grotesque", "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* major-third scale on a 16px body */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: clamp(1.875rem, 1.6vw + 1.3rem, 2.5rem);
  --text-3xl: clamp(2.25rem, 2.6vw + 1.3rem, 3.375rem);
  --text-display: clamp(2.5rem, 3.4vw + 1.2rem, 4.5rem);
  --text-figure: clamp(3.5rem, 6vw + 1rem, 6.5rem);

  --leading-tight: 1.04;
  --leading-snug: 1.2;
  --leading-body: 1.6;
  --tracking-display: -0.035em;
  --tracking-head: -0.02em;
  --tracking-label: 0.06em;

  /* ---- space: 4pt scale ---- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --page-max: 76rem;
  --page-gutter: clamp(1rem, 4vw, 3rem);
  --measure: 65ch;
  --nav-h: 4rem;

  /* ---- shape ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-tile: 16px;
  --radius-pill: 999px;
  --rule-hair: 1px;

  --shadow-hover: 0 14px 32px -18px var(--color-shadow);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-instant: 100ms;
  --dur-short: 180ms;
  --dur-medium: 280ms;

  /* ---- layers ---- */
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 400;
}

/* ---- app extension (Bruchma Rezervace) — same system, denser, plus operational states ---- */
:root {
  --color-amber: oklch(80% 0.14 75); /* arriving soon / pending */
  --color-amber-soft: oklch(95% 0.05 85);
  --color-amber-ink: oklch(42% 0.09 65); /* text on amber-soft, 6.4:1 */
  --color-occupied: oklch(30% 0.06 270); /* seated / occupied table */
  --color-occupied-ink: oklch(96% 0.01 250);
  --color-free: oklch(97% 0.025 185);
  --color-sidebar: oklch(22% 0.045 270);
  --color-sidebar-2: oklch(27% 0.05 270);
  --color-sidebar-active: oklch(31% 0.055 270);
  --color-scrim: oklch(22% 0.045 270 / 0.4);

  /* sequential teal ramp for charts (one hue, light → dark) */
  --seq-1: oklch(95% 0.03 185);
  --seq-2: oklch(87% 0.06 185);
  --seq-3: oklch(77% 0.09 186);
  --seq-4: oklch(64% 0.1 188);
  --seq-5: oklch(50% 0.09 190);
  --seq-6: oklch(38% 0.07 192);

  --side-w: 15.5rem;
  --rail-w: 4.5rem;
  --top-h: 4.25rem;
  --app-gutter: clamp(1rem, 2.4vw, 2rem);
}

/* ---- lifted from the prototype's app.css (were inline values) ---- */
:root {
  --color-amber-hover: oklch(84% 0.13 78); /* .btn--confirm hover */
  --color-accent-halo: oklch(74% 0.12 185 / 0.25); /* status dot ring */
  --color-shadow-deep: oklch(10% 0.03 270 / 0.6); /* login aside preview card */
}