/*
 * Colours, sizes and spacing used everywhere, in the Silvergre-style theme: teal brand, system font, compact sizes.
 * These are the LIGHT theme values; css/theme.css redefines them for the dark theme (html[data-theme="dark"], the
 * default). Change a value here and every screen follows.
 */
:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-lg: 15px;
  --font-size-xl: 20px;
  --line-height: 1.5;

  --color-text: #1e293b;
  --color-text-strong: #0f172a;
  /* Muted text stays readable on white and the page colour (at least 4.5 : 1). */
  --color-text-muted: #6b7280;
  --color-text-subtle: #64748b;
  --color-logo: #ffffff;
  --color-page: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #f1f5f9;
  --color-control: #ffffff;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-border-header: #e2e8f0;
  --color-border-input: #cbd5e1;
  --color-border-focus: #14b8a6;
  --color-table-head: #f1f5f9;
  --color-table-head-border: #e2e8f0;
  --color-table-row-hover: rgb(20 184 166 / 6%);
  --color-row-line: #f1f5f9;

  /* A fixed dark colour (sign-in background, info messages, photo placeholder): the same in both themes. */
  --color-ink: #0b0f17;

  /* Side menu: white in the light theme (css/theme.css gives the dark theme its dark menu). */
  --color-sidebar: #ffffff;
  --color-sidebar-active: rgb(20 184 166 / 12%);
  --color-sidebar-hover: #f1f5f9;
  --color-sidebar-sub: transparent;
  --color-sidebar-text: #334155;
  --color-sidebar-text-muted: #6b7280;
  --color-sidebar-text-active: #0f172a;
  --color-sidebar-line: #e2e8f0;
  --color-sidebar-leaf: #64748b;
  --color-sidebar-search: #f1f5f9;
  --color-sidebar-search-text: #0f172a;

  --color-brand: #14b8a6;
  --color-brand-strong: #0d9488;
  --color-brand-light: #2dd4bf;
  --color-success: #0d9488;
  --color-success-strong: #0f766e;
  --color-success-soft: #ccfbf1;
  --color-success-badge: #0f766e;
  --color-warning: #d97706;
  --color-warning-soft: #fef3c7;
  --color-danger: #e11d48;
  --color-danger-soft: #ffe4e6;
  --color-primary: #4f46e5;
  --color-primary-soft: #e0e7ff;
  --color-info: #0284c7;
  --color-info-soft: #e0f2fe;
  --color-default: #94a3b8;
  --color-default-soft: #f1f5f9;
  --color-on-accent: #ffffff;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;

  --header-height: 56px;
  --sidebar-width: 248px;
  --control-height: 34px;
  --shadow-card: 0 4px 6px -1px rgb(0 0 0 / 5%), 0 2px 4px -2px rgb(0 0 0 / 5%);
  --shadow-card-hover: 0 6px 16px rgb(0 0 0 / 6%);
  --shadow-menu: 0 12px 32px -4px rgb(15 23 42 / 16%), 0 4px 12px -2px rgb(15 23 42 / 8%);
  --shadow-modal: 0 24px 64px rgb(15 23 42 / 28%);
  --glass-blur: none;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.25, 1, 0.35, 1);
  --transition-fast: 200ms var(--ease);
  --z-header: 30;
  --z-sidebar: 35;
  --z-menu: 40;
  --z-toast: 60;
}