/* ============================================================================
   Mission Control design tokens — "Lavender" (owner's reference, 2026-10-10)
   Light: a lavender-grey page, white cards with a soft shadow, one purple for actions and the current place, pastel
   tints for summary cards. Dark: the same layout on deep violet-greys. Shared by the staff app (components.css) and
   the client portal (shared.css, portal.css): a theme change is made here only.

   Theme: <html data-theme="light|dark"> is set before first paint from the saved choice ("light", "dark" or
   "system", the default) — see the theme script in src/legacy/layout.js and src/portal/layout.js. Without
   JavaScript the operating-system preference applies (prefers-color-scheme below).

   Contrast (WCAG 2.x, computed 2026-10-10): body text 15.2:1 (light page) / 14.5:1 (dark card); secondary text 6.2–7.3:1;
   muted text >= 4.6:1 on every surface and tint; white on the purple 5.5:1; control borders >= 3:1. Danger stays red
   and is used only with an explicit verb.
   ============================================================================ */

:root {
  color-scheme: light;

  /* Brand (the logo) */
  --ds-brand-red: #e12828;

  /* Surfaces */
  --ds-bg:#f4f3fa;
  --ds-surface:#ffffff;
  --ds-surface-raised:#ffffff;
  --ds-surface-subtle:#f1effa;
  --ds-input-bg:#ffffff;

  /* Borders */
  --ds-border:#eceaf4;
  --ds-border-strong:#dddaea;
  --ds-border-control:#8c88a3;

  /* Cards: no outline in light mode, a soft shadow instead */
  --ds-card-border: transparent;
  --ds-card-shadow: 0 1px 2px rgba(30, 27, 46, 0.04), 0 8px 24px rgba(30, 27, 46, 0.05);

  /* Text */
  --ds-text:#1e1b2e;
  --ds-text-secondary:#58556e;
  --ds-text-muted:#6b6880;
  --ds-text-disabled:#a9a6ba;

  /* Actions: one purple for primary buttons, the selected tab and the current page */
  --ds-primary:#6352e0;
  --ds-primary-hover:#5443d2;
  --ds-on-primary: #ffffff;
  --ds-accent: #6352e0;
  --ds-accent-solid: #6352e0;
  --ds-on-accent: #ffffff;
  --ds-accent-soft: rgba(99, 82, 224, 0.10);
  --ds-focus: #6352e0;

  /* Status: text/icon, badge background, badge text */
  --ds-success: #15803d;  --ds-success-bg: #e8f7ee;  --ds-success-fg: #166534;
  --ds-warning: #b45309;  --ds-warning-bg: #fff1e3;  --ds-warning-fg: #9a4a06;
  --ds-danger: #b42318;   --ds-danger-bg: #fdecee;   --ds-danger-fg: #9f1c12;  --ds-on-danger: #ffffff;
  --ds-danger-solid: #b42318; /* filled danger (count dots, destructive confirm button): white text 6.4:1 */
  --ds-info: #1d4ed8;     --ds-info-bg: #eaf1fe;     --ds-info-fg: #1e40af;
  --ds-neutral-bg: #f1effa; --ds-neutral-fg: #3f3d52;

  /* Pastel tints for summary cards (text on them stays --ds-text / --ds-text-secondary) */
  --ds-tint-violet: #efedfd;
  --ds-tint-peach: #fff3e8;
  --ds-tint-mint: #eaf7ef;
  --ds-tint-rose: #fdeef0;
  --ds-tint-sky: #eaf2fe;

  /* Usage meters (mailbox and disk space): empty → full = green, yellow (half), orange (three quarters), red */
  --ds-meter-low: #16a34a; --ds-meter-half: #eab308; --ds-meter-high: #ea580c; --ds-meter-full: #dc2626;

  /* Channels for Tailwind's opacity modifiers (rgb(var(--x) / <alpha>)) */
  --ds-text-rgb: 30 27 46;
  --ds-accent-rgb: 99 82 224;
  --ds-accent-solid-rgb: 99 82 224; /* filled accent (selected chips, progress): white text 5.5:1 */
  --ds-focus-rgb: 99 82 224;

  /* Typography */
  --ds-font-sans: "Inter", "Cairo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ds-text-xs:0.8125rem;    /* 12/16 caption */
  --ds-text-sm:0.9375rem;   /* 14/20 body (default) */
  --ds-text-md:1rem;       /* 16/24 */
  --ds-text-lg:1.125rem;   /* 18/26 h3 */
  --ds-text-xl:1.375rem;    /* 20/28 h2 */
  --ds-text-2xl:2rem;    /* 24/32 h1 */
  --ds-text-3xl:1.75rem;  /* 30/36 stat values */

  /* Radius, elevation, motion */
  --ds-radius-sm:8px;
  --ds-radius:12px;
  --ds-radius-lg:18px;
  /* Component sizes, shared by the staff app (components.css) and the portal (shared.css): one place to change the
     shape of buttons, fields, badges and labels everywhere. */
  --ds-control-h: 40px;  --ds-control-h-sm: 34px;  --ds-control-h-xs: 30px;  --ds-control-h-touch: 44px;
  --ds-control-px: 16px; --ds-control-px-sm: 12px; --ds-control-px-xs: 10px;
  --ds-control-text: 15px; --ds-control-text-sm: 14px; --ds-control-text-xs: 13px;
  --ds-badge-py: 3px; --ds-badge-px: 10px; --ds-badge-text: 13px;
  --ds-label-text: 14px;
  --ds-shadow-1: 0 1px 2px rgba(30, 27, 46, 0.05);
  --ds-shadow-2: 0 8px 24px rgba(30, 27, 46, 0.10);
  --ds-shadow-3: 0 16px 48px rgba(30, 27, 46, 0.16);
  --ds-dur-fast: 120ms;
  --ds-dur: 180ms;
  --ds-ease: cubic-bezier(0.2, 0, 0, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ds-bg:#121119;
  --ds-surface:#1b1a25;
  --ds-surface-raised:#24222f;
  --ds-surface-subtle:#262435;
  --ds-input-bg:#201f2b;
  --ds-border:#2c2a3a;
  --ds-border-strong:#3a374b;
  --ds-border-control:#74708f;
  --ds-card-border: transparent;
  --ds-card-shadow: none;
  --ds-text:#eceaf5;
  --ds-text-secondary:#aaa6c0;
  --ds-text-muted:#9792ae;
  --ds-text-disabled:#5c5873;
  --ds-primary:#6352e0;
  --ds-primary-hover:#7262ea;
  --ds-on-primary: #ffffff;
  --ds-accent: #9d90f8;
  --ds-accent-solid: #6352e0;
  --ds-accent-soft: rgba(157, 144, 248, 0.14);
  --ds-focus: #9d90f8;
  --ds-success: #4ade80;  --ds-success-bg:rgba(74, 222, 128, 0.1);  --ds-success-fg: #86efac;
  --ds-warning:#facc15;  --ds-warning-bg:rgba(250, 204, 21, 0.1);  --ds-warning-fg:#fde047;
  --ds-danger: #f87171;   --ds-danger-bg:rgba(248, 113, 113, 0.1); --ds-danger-fg: #fca5a5;  --ds-on-danger: #ffffff;
  --ds-info: #60a5fa;     --ds-info-bg:rgba(96, 165, 250, 0.1);    --ds-info-fg: #93c5fd;
  --ds-neutral-bg:#2a2838; --ds-neutral-fg:#d6d3e6;
  --ds-tint-violet: rgba(157, 144, 248, 0.13);
  --ds-tint-peach: rgba(251, 176, 96, 0.11);
  --ds-tint-mint: rgba(74, 222, 128, 0.09);
  --ds-tint-rose: rgba(248, 113, 113, 0.11);
  --ds-tint-sky: rgba(96, 165, 250, 0.11);
  --ds-meter-low: #4ade80; --ds-meter-half: #facc15; --ds-meter-high: #fb923c; --ds-meter-full: #f87171;
  --ds-text-rgb:236 234 245;
  --ds-accent-rgb: 157 144 248;
  --ds-focus-rgb: 157 144 248;
  --ds-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --ds-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --ds-shadow-3: 0 16px 48px rgba(0, 0, 0, 0.55);
}

/* No JavaScript (or before the theme script runs): follow the operating system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --ds-bg: #121119; --ds-surface: #1b1a25; --ds-surface-raised: #24222f; --ds-surface-subtle: #262435; --ds-input-bg: #201f2b;
    --ds-border: #2c2a3a; --ds-border-strong: #3a374b; --ds-border-control: #74708f; --ds-card-border: transparent; --ds-card-shadow: none;
    --ds-text: #eceaf5; --ds-text-secondary: #aaa6c0; --ds-text-muted: #9792ae; --ds-text-disabled: #5c5873;
    --ds-primary: #6352e0; --ds-primary-hover: #7262ea; --ds-on-primary: #ffffff;
    --ds-accent: #9d90f8; --ds-accent-soft: rgba(157, 144, 248, 0.14); --ds-focus: #9d90f8;
    --ds-success: #4ade80; --ds-success-bg: rgba(74, 222, 128, 0.1); --ds-success-fg: #86efac;
    --ds-warning: #facc15; --ds-warning-bg: rgba(250, 204, 21, 0.1); --ds-warning-fg: #fde047;
    --ds-danger: #f87171; --ds-danger-bg: rgba(248, 113, 113, 0.1); --ds-danger-fg: #fca5a5;
    --ds-info: #60a5fa; --ds-info-bg: rgba(96, 165, 250, 0.1); --ds-info-fg: #93c5fd;
    --ds-neutral-bg: #2a2838; --ds-neutral-fg: #d6d3e6;
    --ds-tint-violet: rgba(157, 144, 248, 0.13); --ds-tint-peach: rgba(251, 176, 96, 0.11); --ds-tint-mint: rgba(74, 222, 128, 0.09);
    --ds-tint-rose: rgba(248, 113, 113, 0.11); --ds-tint-sky: rgba(96, 165, 250, 0.11);
    --ds-meter-low: #4ade80; --ds-meter-half: #facc15; --ds-meter-high: #fb923c; --ds-meter-full: #f87171;
    --ds-text-rgb: 236 234 245; --ds-accent-rgb: 157 144 248; --ds-focus-rgb: 157 144 248;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --ds-dur-fast: 0ms; --ds-dur: 0ms; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}