/* SamayIQ design tokens — the single source of truth every page/component
   builds on. Light is deliberately the ONLY theme right now: an earlier
   version of this file auto-switched to a dark palette on
   `prefers-color-scheme: dark` with no manual toggle to override it, which
   meant anyone with system dark mode on saw a navy admin-tool-looking app
   regardless of what the light styles said — that auto-switch is removed
   below. The dark values are kept as a reference comment at the bottom of
   this file for whenever a real manual toggle gets built, not deleted. */
:root {
  /* ── Brand ──────────────────────────────────────────────────────────────
     A restrained, professional SaaS palette — mostly neutral surfaces with
     one strong brand blue as the accent, not a wash. --color-primary-light
     is the "soft blue selected/hover" tone used for active nav rows, table
     row hover, and selected states. --color-accent is a small secondary
     cyan touch reserved for rare highlight moments (the logo, a chart
     accent), never large UI areas — blue should mean something (primary
     actions, selected nav, links, focus), not be scattered everywhere. */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-light: #eff6ff;
  --color-primary-subtle: #eff6ff;
  --color-accent: #06b6d4;
  --color-accent-hover: #0891b2;

  /* ── Surfaces — light gray page, white cards on top, subtle border
     between them; never pure-white-on-white. ── */
  --color-bg: #f7f9fc;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-sunken: #f7f9fc;

  /* ── Text ── */
  --color-text: #172033;
  --color-text-muted: #667085;
  --color-text-faint: #98a2b3;
  --color-text-on-primary: #ffffff;

  /* ── Borders ── */
  --color-border: #e5eaf0;
  --color-border-strong: #cbd5e1;

  /* ── Status ── */
  --color-success: #16a34a;
  --color-success-strong: #15803d;
  --color-success-bg: #dcfce7;
  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --color-danger-border: #fca5a5;
  --color-warning: #d97706;
  --color-warning-bg: #fffbeb;
  --color-info: #0369a1;
  --color-info-bg: #e0f2fe;
  --color-neutral-bg: #f1f5f9;

  /* ── Typography ──────────────────────────────────────────────────────────
     A native/system stack, deliberately — no external font request (this
     app's CSP is font-src 'self' with no bundler to self-host one through,
     see lib/security.js), just a carefully-ordered list of the best
     built-in face on each platform. */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, Helvetica, Arial,
    sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  --text-display: 700 2.5rem/1.15 var(--font-sans);
  --text-h1: 800 1.75rem/1.25 var(--font-sans);
  --text-h2: 700 1.375rem/1.3 var(--font-sans);
  --text-h3: 700 1.0625rem/1.4 var(--font-sans);
  --text-body: 400 1rem/1.55 var(--font-sans);
  --text-body-strong: 600 1rem/1.55 var(--font-sans);
  --text-small: 400 0.875rem/1.5 var(--font-sans);
  --text-label: 700 0.8125rem/1.3 var(--font-sans);
  --text-caption: 600 0.75rem/1.3 var(--font-sans);

  /* ── Spacing scale ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── Radius ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ── Shadows — subtle, used only where they clarify hierarchy (cards
     floating over the page background, modals over everything) ── */
  --shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 2px 12px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 20px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.18);

  /* ── Motion — fast and subtle; prefers-reduced-motion overrides below ── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
}

/* Dark palette reference — NOT applied anywhere right now (see the note at
   the top of this file). Kept here so a future manual dark-mode toggle
   (e.g. an explicit [data-theme="dark"] attribute) doesn't have to
   rediscover these values from scratch:

   --color-primary: #60a5fa;         --color-primary-hover: #93c5fd;
   --color-primary-light: #23305a;   --color-primary-subtle: #1a2440;
   --color-accent: #22d3ee;          --color-accent-hover: #67e8f9;
   --color-bg: #0b0f19;              --color-surface: #131826;
   --color-surface-elevated: #1a2032; --color-surface-sunken: #0e1220;
   --color-text: #e8ecf6;            --color-text-muted: #9aa4bd;
   --color-text-faint: #6b7690;      --color-border: #262e42;
   --color-border-strong: #38415a;   --color-success: #4ade80;
   --color-success-strong: #86efac;  --color-success-bg: #123321;
   --color-danger: #f87171;          --color-danger-bg: #3a1a1a;
   --color-danger-border: #7f2b2b;   --color-warning: #fbbf24;
   --color-warning-bg: #3a3117;      --color-info: #38bdf8;
   --color-info-bg: #10293a;         --color-neutral-bg: #1a2032;
   --shadow-xs: 0 1px 3px rgba(0,0,0,.3); --shadow-sm: 0 2px 12px rgba(0,0,0,.35);
   --shadow-md: 0 4px 20px rgba(0,0,0,.4); --shadow-lg: 0 20px 60px rgba(0,0,0,.55);
*/

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font: var(--text-body);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-sans);
  color: var(--color-text);
}

a {
  color: var(--color-primary);
}

/* Respected everywhere a transition/animation is declared — see
   components.css and the page-specific stylesheets. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}