/* Global design tokens. Components must consume these semantic variables. */

:root {
  color-scheme: light;
  --font-main: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --text-2xs: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.3125rem;
  --text-display: clamp(2rem, 4vw, 3.125rem);
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --bg: #f4f7f9;
  --panel: #ffffff;
  --panel-soft: #f8fbfc;
  --text: #17202a;
  --muted: #64717f;
  --line: #d8e1e8;
  --accent: #168777;
  --accent-dark: #0f675c;
  --accent-soft: #dff6f1;
  --accent-contrast: #ffffff;
  --gold: #d3a348;
  --ink: #101820;
  --danger: #b42318;
  --shadow-lg: 0 24px 70px rgba(12, 25, 38, 0.18);
  --shadow-sm: 0 10px 28px rgba(12, 25, 38, 0.08);
  --sidebar-bg: color-mix(in srgb, var(--panel) 78%, var(--bg));
  --sidebar-veil: color-mix(in srgb, var(--panel-soft) 70%, transparent);
  --sidebar-text: var(--text);
  --sidebar-muted: var(--muted);
  --sidebar-line: var(--line);
  --sidebar-hover: color-mix(in srgb, var(--accent) 10%, var(--panel-soft));
  --sidebar-active: color-mix(in srgb, var(--accent) 18%, var(--panel-soft));
  --sidebar-user-bg: color-mix(in srgb, var(--panel-soft) 82%, var(--panel));
  --surface-page: var(--bg);
  --surface-page-tint: color-mix(in srgb, var(--bg) 82%, var(--accent));
  --surface-card: var(--panel);
  --surface-card-soft: var(--panel-soft);
  --surface-card-raised: color-mix(in srgb, var(--panel) 88%, var(--bg));
  --surface-control: color-mix(in srgb, var(--panel) 84%, var(--panel-soft));
  --surface-control-hover: color-mix(in srgb, var(--accent) 10%, var(--panel-soft));
  --surface-overlay: color-mix(in srgb, var(--bg) 72%, transparent);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-inverse: #ffffff;
  --border-subtle: var(--line);
  --border-strong: color-mix(in srgb, var(--line) 74%, var(--text));
  --border-accent: color-mix(in srgb, var(--accent) 42%, transparent);
  --control-primary-bg: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent-dark) 74%, var(--gold)));
  --control-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--accent-dark) 82%, var(--gold)), var(--accent));
  --control-primary-text: var(--accent-contrast);
  --control-secondary-bg: var(--surface-control);
  --control-secondary-text: var(--text-primary);
  --status-success: #16a34a;
  --status-success-bg: color-mix(in srgb, var(--status-success) 13%, var(--surface-card));
  --status-success-border: color-mix(in srgb, var(--status-success) 38%, transparent);
  --status-warning: #d08a22;
  --status-warning-bg: color-mix(in srgb, var(--status-warning) 14%, var(--surface-card));
  --status-warning-border: color-mix(in srgb, var(--status-warning) 36%, transparent);
  --status-danger: var(--danger);
  --status-danger-bg: color-mix(in srgb, var(--danger) 12%, var(--surface-card));
  --status-danger-border: color-mix(in srgb, var(--danger) 34%, transparent);
  --seat-female: #d9468f;
  --seat-male: #2563eb;
}

@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #18a891;
}

@property --accent-dark {
  syntax: "<color>";
  inherits: true;
  initial-value: #0d766b;
}