/*
 * Tablescape design tokens.
 * Every colour, font, size, radius and shadow in the app comes from here.
 * Never hard-code a hex value or pixel size in a component; add a token instead.
 */
:root {
  /* Colour: grounds */
  --ts-bg: #EFF4EC;            /* sage mist, the page ground */
  --ts-surface: #FFFFFF;       /* cards, panels, dialogs */
  --ts-surface-muted: #F6FAF4; /* seats, quiet fills inside cards */
  --ts-surface-sunken: #EFF4EC;/* rows and wells inside a white card */

  /* Colour: text */
  --ts-ink: #1E3A2B;           /* forest, headings and body */
  --ts-muted: #4E6656;         /* secondary text, 6:1 on white */
  --ts-on-accent: #FFFFFF;

  /* Colour: lines */
  --ts-line: #D5E1D1;
  --ts-line-strong: #A9BFA4;   /* input borders, ghost buttons, open seats */

  /* Colour: accent (forest green) */
  --ts-accent: #2F6B4F;
  --ts-accent-hover: #255A41;
  --ts-accent-soft: #E6F0E3;   /* chips, selected fills */
  --ts-ring: #9CC2A6;          /* table rims, focus halo */

  /* Colour: status */
  --ts-ok: #2F6B4F;            /* rule met */
  --ts-flag: #B4410B;          /* rule bent, ambiguity, 4.9:1 on --ts-flag-bg */
  --ts-flag-bg: #FDECE1;

  /* Type */
  --ts-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ts-font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ts-weight-regular: 400;
  --ts-weight-medium: 500;
  --ts-weight-semibold: 600;

  --ts-text-xs: 0.75rem;    /* 12 */
  --ts-text-sm: 0.8125rem;  /* 13 */
  --ts-text-md: 0.9375rem;  /* 15, body */
  --ts-text-lg: 1.0625rem;  /* 17 */
  --ts-text-xl: 1.375rem;   /* 22, panel titles */
  --ts-text-2xl: 1.75rem;   /* 28, page titles, wordmark */
  --ts-text-3xl: 2.5rem;    /* 40, section headings */
  --ts-text-4xl: clamp(2.5rem, 5vw + 1rem, 4rem); /* hero */

  --ts-leading-tight: 1.1;
  --ts-leading-body: 1.55;
  --ts-leading-rule: 1.7;   /* rule sentences with inline chips */

  /* Space (4px base) */
  --ts-space-1: 4px;
  --ts-space-2: 8px;
  --ts-space-3: 12px;
  --ts-space-4: 16px;
  --ts-space-5: 20px;
  --ts-space-6: 24px;
  --ts-space-8: 32px;
  --ts-space-10: 40px;
  --ts-space-14: 56px;
  --ts-space-20: 80px;

  /* Shape */
  --ts-radius-sm: 8px;
  --ts-radius-md: 12px;   /* rows inside cards, option buttons */
  --ts-radius-lg: 16px;   /* cards, panels */
  --ts-radius-xl: 24px;   /* dialogs, bottom sheets, hero art */
  --ts-radius-pill: 999px;/* buttons, inputs, chips, pills */

  /* Elevation: soft and green-tinted, never grey */
  --ts-shadow-sm: 0 1px 2px rgba(30, 58, 43, 0.06), 0 4px 14px rgba(30, 58, 43, 0.06);
  --ts-shadow-lg: 0 1px 2px rgba(30, 58, 43, 0.06), 0 12px 32px rgba(30, 58, 43, 0.12);
  --ts-shadow-sheet: 0 -4px 20px rgba(30, 58, 43, 0.10);

  /* Sizing */
  --ts-touch: 44px;        /* minimum hit target */
  --ts-seat: 30px;         /* seat on desktop floor plan */
  --ts-seat-touch: 44px;   /* seat on phone */
  --ts-content-max: 1200px;

  /* Motion */
  --ts-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ts-duration: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ts-duration: 0ms; }
}