/*
 * Design tokens, taken from design/screens/. Use these everywhere; no ad-hoc colours.
 * Light UI is the default (guest, owner, website). Add class "theme-dark" to <body> for the
 * staff floor, kitchen board and staff web app.
 */
:root {
  /* Type */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Space Grotesk", "Inter", system-ui, sans-serif;

  /* Light surfaces */
  --color-ground: #F4F5F7;
  --color-surface: #FFFFFF;
  --color-surface-2: #F4F5F7;
  --color-border: #E3E6EB;
  --color-border-strong: #C9CED6;
  --color-border-control: #D5D9E0;
  --color-divider: #EEF0F3;
  --color-text: #14181F;
  --color-text-muted: #5B6472;
  --color-text-soft: #4A525E;
  --color-text-nav: #3F4652;

  /* Accent */
  --color-accent: #1F5FD6;
  --color-accent-hover: #174AA8;
  --color-accent-contrast: #FFFFFF;
  --color-accent-soft: #EEF3FD;
  --color-accent-soft-text: #1D3F80;
  --color-chart-soft: #A9C1F2;

  /* Inverse (dark buttons/tabs on light UI) */
  --color-inverse: #14181F;
  --color-inverse-text: #FFFFFF;

  /* Notices */
  --color-warning-bg: #FFF4E5;
  --color-warning-border: #F5D6A8;
  --color-warning-text: #6B3D06;

  /* Status: calling */
  --status-calling-bg: #FDE2E2;
  --status-calling-border: #D64545;
  --status-calling-text: #9B1C1C;
  /* Status: new order */
  --status-new-bg: #E2EAFB;
  --status-new-border: #1F5FD6;
  --status-new-text: #1D3F80;
  /* Status: waiting / in kitchen */
  --status-waiting-bg: #FDEBD3;
  --status-waiting-border: #D98A1A;
  --status-waiting-text: #8A4A06;
  /* Status: ready / wants to pay / paid */
  --status-ready-bg: #DDF3E6;
  --status-ready-border: #2F8A5E;
  --status-ready-text: #146C3B;
  /* Status: served / neutral */
  --status-served-bg: #EDEFF2;
  --status-served-border: #8B94A3;
  --status-served-text: #3F4652;
  /* Status: free table */
  --status-free-bg: #FFFFFF;
  --status-free-border: #C9CED6;
  --status-free-text: #5B6472;
  /* Extra tag colour used in the audit log ("plan or trial") */
  --status-plan-bg: #EADFFB;
  --status-plan-text: #4B2A85;

  /* Danger (form errors) */
  --color-danger: #D64545;
  --color-danger-text: #9B1C1C;

  /* Radii */
  --radius-sm: 8px;
  --radius-control: 10px;
  --radius-control-lg: 12px;
  --radius-card: 14px;
  --radius-card-lg: 16px;
  --radius-panel: 20px;
  --radius-panel-lg: 24px;

  /* Sizes */
  --touch-min: 44px;
  --control-h: 48px;
  --button-h: 52px;
  --sidebar-w: 232px;

  /* Breakpoint is 700px (phone below, desktop/tablet at and above). CSS custom properties
     cannot be used in media queries, so the value is repeated in app.css. */
}

.theme-dark {
  --color-ground: #0F1318;
  --color-surface: #161C24;
  --color-surface-2: #1A212B;
  --color-surface-3: #2A3340;
  --color-border: #222A35;
  --color-border-strong: #2D3542;
  --color-border-control: #2D3542;
  --color-divider: #222A35;
  --color-text: #F2F4F7;
  --color-text-muted: #A3ACB9;
  --color-text-soft: #D3D8E0;
  --color-text-nav: #A3ACB9;

  --color-accent: #6E9BFF;
  --color-accent-hover: #8FB4FF;
  --color-accent-contrast: #0B1630;
  --color-accent-soft: #16213A;
  --color-accent-soft-text: #8FB4FF;

  --color-inverse: #F2F4F7;
  --color-inverse-text: #0F1318;

  --status-calling-bg: #3A1A1C;
  --status-calling-border: #F26B6B;
  --status-calling-text: #F78A8A;
  --status-new-bg: #16213A;
  --status-new-border: #6E9BFF;
  --status-new-text: #8FB4FF;
  --status-waiting-bg: #221C12;
  --status-waiting-border: #7A5A22;
  --status-waiting-text: #F2B045;
  --status-ready-bg: #122319;
  --status-ready-border: #2F8A5E;
  --status-ready-text: #4CC38A;
  --status-served-bg: #161C24;
  --status-served-border: #2D3542;
  --status-served-text: #C3C9D2;
  --status-free-bg: #0F1318;
  --status-free-border: #1C222B;
  --status-free-text: #8B94A3;

  --color-live-bg: #17301F;
  --color-live-text: #4CC38A;

  --color-danger: #F26B6B;
  --color-danger-text: #F78A8A;
}

/* Platform admin sidebar is dark on a light page. */
.sidebar-dark {
  --sidebar-bg: #14181F;
  --sidebar-text: #F2F4F7;
  --sidebar-muted: #A3ACB9;
  --sidebar-link: #C3C9D2;
  --sidebar-active-bg: #252D39;
  --sidebar-active-text: #FFFFFF;
}