/* MySmartMail – design tokens (SHSS UI). Every colour, radius, shadow and font lives here; components only use the tokens.
   Brand colours come from branding.json via /brand.css (loaded after this file) – change the brand there, not here.
   Premium look: deep indigo brand + cyan accent on cool slate; light first, dark as a tested variant (data-mode="dark"). */
:root {
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'Inter', system-ui, sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs: 14px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 23px; --fs-2xl: 30px;

  --brand: #4f46e5; --brand-600: #4338ca; --brand-700: #3730a3; --brand-400: #6366f1;
  --brand-50: color-mix(in srgb, var(--brand) 8%, #fff); --brand-100: color-mix(in srgb, var(--brand) 16%, #fff);
  --accent: #06b6d4; --accent-600: #0891b2; --accent-50: color-mix(in srgb, var(--accent) 10%, #fff);
  --primary: var(--brand); --primary-hover: var(--brand-600); --primary-soft: var(--brand-50); --on-primary: #ffffff;
  --grad: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 55%, var(--accent)) 100%);

  --bg: #f5f6fa; --surface: #ffffff; --surface-2: #f8f9fc; --surface-3: #eef0f6; --overlay: rgba(15, 23, 42, .45);
  --border: #e4e7ef; --border-strong: #cfd4e2; --focus: var(--brand-400);
  --text: #0f172a; --text-2: #334155; --text-3: #64748b; --text-inv: #ffffff;

  --success: #059669; --success-bg: #e7f7f0; --warning: #b45309; --warning-bg: #fef4e2; --danger: #dc2626; --danger-bg: #fdecec; --info: #2563eb; --info-bg: #eaf1fe; --neutral-bg: #eef0f6;
  /* rental states (calendar bars, pills) */
  --st-request: #a855f7; --st-reserved: #f59e0b; --st-confirmed: #4f46e5; --st-active: #059669; --st-returned: #0891b2; --st-closed: #64748b; --st-cancelled: #94a3b8; --st-overdue: #dc2626;
  --st-maintenance: #78716c; --st-block: #475569;
  --c-1: #4f46e5; --c-2: #06b6d4; --c-3: #f59e0b; --c-4: #10b981; --c-5: #ec4899; --c-6: #8b5cf6; --c-other: #94a3b8; --c-prev: #cbd5e1;

  --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05); --shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06); --shadow-lg: 0 16px 48px rgba(15, 23, 42, .18);
  --sidebar-w: 256px; --topbar-h: 60px; --gap: 16px; --input-h: 42px;
  color-scheme: light;
}
[data-mode="dark"] {
  --brand-50: color-mix(in srgb, var(--brand-400) 18%, #0d1220); --brand-100: color-mix(in srgb, var(--brand-400) 30%, #0d1220);
  --primary: color-mix(in srgb, var(--brand-400) 75%, #fff); --primary-hover: color-mix(in srgb, var(--brand-400) 60%, #fff); --primary-soft: color-mix(in srgb, var(--brand-400) 20%, transparent); --on-primary: #0b1020;
  --accent-50: color-mix(in srgb, var(--accent) 16%, transparent);
  --bg: #0b1020; --surface: #121829; --surface-2: #161d31; --surface-3: #1d2540; --overlay: rgba(0, 0, 0, .6);
  --border: #232c47; --border-strong: #303b5c; --focus: #a5b4fc;
  --text: #e8ebf5; --text-2: #b8c0d9; --text-3: #8a93b0;
  --success: #34d399; --success-bg: rgba(52, 211, 153, .12); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, .13); --danger: #f87171; --danger-bg: rgba(248, 113, 113, .13); --info: #93b4ff; --info-bg: rgba(147, 180, 255, .13); --neutral-bg: #1d2540;
  --st-closed: #8a93b0; --st-cancelled: #475569; --c-prev: #334155;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
[data-density="compact"] { --input-h: 36px; --gap: 12px; }