/* ═══════════════════════════════════════════════════════════
   TODDOO DESIGN TOKENS — v3.2, imported from the brand kit at commit dd14694 (sha256 02442f2538558610).
   Served by componentsd at /assets/toddoo-tokens.css. Do not edit: run tools/brandkit_tokens.js.
   Values are the kit's (AGENTS.md §14); only the selectors differ:

   - Dark mode is the default. Light mode: class "light" on <body> or <html>.
   - The default block is declared on :root AND body. Tokens built from other
     tokens (--focus-ring, --input-border, --badge-info-bg, --step-done-bg, …)
     are then worked out again where the light values are set. In the brand
     kit's own file they stay dark in light mode, because they are only
     computed on :root.
   - Never hardcode these values in components — always var().
   ═══════════════════════════════════════════════════════════ */

:root,
body {
  /* ── Teal system (dark mode) ── */
  --teal: #00C8C8;                 /* primary — readable/interactive */
  --teal-dk: #1A7587;              /* depth — tonal backgrounds */
  --grey: #A8AAAB;                 /* medium grey, mode-aware */

  /* ── Semantic status (both modes) ── */
  --red: #E54535;
  --yellow: #FFBE0B;
  --success: #00C9A8;

  /* ── Brand gradient (brand marks only — never UI) ── */
  --grad: linear-gradient(60deg, #00FFCE 0%, #1A7587 45%, #1A7587 55%, #00F3FF 100%);

  /* ── Surfaces (dark) ── */
  --bg: #0F1A1D;
  --surface: #1A2A2E;
  --surface2: #1E3035;
  --border: #2A4048;
  --text1: #F8F8F8;
  --text2: #8AACB0;
  --text3: #4A6468;
  --sb-bg: rgba(22,32,36,.92);
  --hdr-bg: #1A2A2E;
  --hdr-border: #2A4048;
  --accent: #00C8C8;
  --accent-dim: rgba(0,200,200,.12);

  /* ── Glass (dark) ── */
  --glass-1: rgba(255,255,255,.02);  --glass-b1: rgba(255,255,255,.06);
  --glass-2: rgba(255,255,255,.04);  --glass-b2: rgba(255,255,255,.09);
  --glass-3: rgba(255,255,255,.06);  --glass-b3: rgba(255,255,255,.12);
  --glass-4: rgba(255,255,255,.08);  --glass-b4: rgba(255,255,255,.17);
  --glass-hi1: rgba(255,255,255,.08);
  --glass-hi2: rgba(255,255,255,.12);
  --glass-hi3: rgba(255,255,255,.16);
  --glass-hi4: rgba(255,255,255,.22);
  --glass-reflect-1: rgba(165,239,255,.04);
  --glass-reflect-2: rgba(165,239,255,.08);
  --glass-reflect-3: rgba(165,239,255,.14);
  --glass-reflect-4: rgba(165,239,255,.20);
  --glass-noise-1: 0.03; --glass-noise-2: 0.04;
  --glass-noise-3: 0.05; --glass-noise-4: 0.06;
  --glass-blur-1: 16px; --glass-blur-2: 24px;
  --glass-blur-3: 36px; --glass-blur-4: 50px;

  /* ── Spacing (4px base grid) ── */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px;  --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px;

  /* ── Radius ── */
  --radius-xs: 4px;   --radius-sm: 6px;  --radius-md: 8px;
  --radius-lg: 10px;  --radius-xl: 12px; --radius-2xl: 16px;
  --radius-full: 999px;

  /* ── Layout ── */
  --header-h: 52px;
  --sidebar-w: 200px;
  --sidebar-gap: 30px;
  --content-ml: 260px;
  --page-px: 48px;      /* desktop >=1024px; 32px tablet; 16px mobile */
  --page-pt: 40px;
  --max-content: 1200px;
  --form-max: 640px;

  /* ── z-index ── */
  --z-base: 1; --z-sticky: 100; --z-dropdown: 1000;
  --z-popover: 1050; --z-tooltip: 1100; --z-sidesheet: 1200;
  --z-modal: 1300; --z-toast: 1400; --z-scrollbar: 9999;

  /* ── Animation ── */
  --dur-micro: 100ms; --dur-small: 150ms; --dur-medium: 200ms;
  --dur-large: 250ms; --dur-exit: 300ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --stagger: 50ms;

  /* ── Unified pill interaction ── */
  --interact-radius-pill: 999px;
  --interact-radius-circle: 50%;
  --interact-border: 1.5px;
  --interact-hover-bg: var(--accent-dim);
  --interact-press-bg: var(--teal);
  --interact-press-text: var(--bg);
  --interact-select-border: var(--accent);
  --interact-select-bg: transparent;
  --interact-scale: 0.98;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px #00C8C8;

  /* ── Buttons ── */
  --btn-h-sm: 32px; --btn-h-md: 40px; --btn-h-lg: 48px;
  --btn-px-sm: 14px; --btn-px-md: 20px; --btn-px-lg: 28px;
  --btn-radius: 999px;
  --btn-icon-radius: 50%;
  --btn-icon-sm: 28px; --btn-icon-md: 36px; --btn-icon-lg: 44px;
  --btn-border: 1.5px;
  --btn-focus: 0 0 0 2px var(--bg), 0 0 0 4px #00C8C8;
  --btn-disabled-opacity: 0.4;

  /* ── Inputs ── */
  --input-h: 42px; --input-px: 14px;
  --input-radius: 999px;
  --textarea-radius: 21px;          /* half of --input-h, same curvature as the pill */
  --input-border: 1.5px solid var(--border);
  --input-focus: 1.5px solid var(--accent);
  --input-error: 1.5px solid var(--red);

  /* ── Sidebar ── */
  --sb-w-icon: 48px; --sb-w-text: 200px;
  --sb-item-py: 8px; --sb-item-px: 14px;
  --sb-item-radius: 999px;
  --sb-icon-size: 36px;
  --sb-select-border: 1.5px solid var(--accent);

  /* ── Tabs ── */
  --tab-py: 8px; --tab-px: 16px;
  --tab-radius: 999px; --tab-gap: 4px; --tab-border: 1.5px;
  --tab-divider: 1px solid var(--glass-b2);
  --tab-font: 13px;

  /* ── Dropdown ── */
  --dd-trigger-radius: 999px; --dd-panel-radius: 12px;
  --dd-max-h: 280px; --dd-offset: 4px;
  --dd-option-h: 40px; --dd-option-radius: 999px; --dd-option-border: 1.5px;

  /* ── Table ── */
  --tbl-row-h: 44px; --tbl-cell-px: 16px; --tbl-cell-py: 10px;
  --tbl-header-font: 9px; --tbl-body-font: 12px;
  --tbl-row-radius: 999px; --tbl-row-gap: 2px; --tbl-flash-dur: 150ms;

  /* ── Tooltip / Popover ── */
  --tip-max-w: 240px; --tip-px: 12px; --tip-py: 8px;
  --tip-radius: 8px; --tip-delay: 300ms; --tip-arrow: 5px;
  --pop-max-w: 320px; --pop-radius: 12px; --pop-px: 16px;

  /* ── Pagination ── */
  --pg-size: 36px; --pg-radius: 50%; --pg-gap: 4px; --pg-border: 1.5px;

  /* ── Avatar ── */
  --avatar-xs: 24px; --avatar-sm: 32px; --avatar-md: 40px;
  --avatar-lg: 56px; --avatar-xl: 80px;
  --avatar-overlap: -8px; --avatar-max-stack: 4;
  --avatar-status: 10px; --avatar-status-border: 2px solid var(--bg);
  --avatar-online: #00C9A8; --avatar-away: #FFBE0B;

  /* ── Stepper ── */
  --step-size: 32px; --step-line: 2px;
  --step-done-bg: var(--teal); --step-done-text: var(--bg);
  --step-current-ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent-dim);
  --step-upcoming-bg: var(--border);

  /* ── Search ── */
  --search-icon-size: 14px; --search-icon-left: 12px;
  --search-radius: 999px; --search-debounce: 300ms;
  --search-results-max-h: 400px; --search-result-h: 48px;

  /* ── Sidesheet / Drawer ── */
  --sheet-w: 480px; --sheet-w-lg: 640px;
  --sheet-header: 56px; --sheet-px: 24px; --sheet-radius: 16px;
  --sheet-backdrop: rgba(0,0,0,.4);
  --drawer-w: 280px;

  /* ── Modal ── */
  --modal-w: 480px; --modal-w-lg: 640px; --modal-w-sm: 320px;
  --modal-px: 24px; --modal-radius: 16px;
  --modal-backdrop: rgba(0,0,0,.5);
  --modal-close-size: 28px;

  /* ── Toast ── */
  --toast-max-w: 400px; --toast-radius: 12px;
  --toast-px: 14px; --toast-bar: 3px;
  --toast-dismiss: 5000ms; --toast-stack-gap: 8px; --toast-max-stack: 3;

  /* ── Notification panel ── */
  --notif-w: 380px; --notif-max-h: 480px;
  --notif-item-radius: 999px; --notif-dot: 6px;

  /* ── Breadcrumbs ── */
  --bc-font: 11px; --bc-gap: 6px;
  --bc-link-color: var(--text3);
  --bc-current-color: var(--accent);
  --bc-max-items: 4;

  /* ── Progress / Loaders ── */
  --prog-track-h: 4px; --prog-track-bg: var(--border);
  --prog-fill-bg: var(--teal); --prog-radius: 999px;
  --spinner-speed: 6s;
  --spinner-xs: 16px; --spinner-sm: 24px; --spinner-md: 40px; --spinner-lg: 64px;

  /* ── Skeleton ── */
  --skel-bg-dark: rgba(255,255,255,.06);
  --skel-bg-light: rgba(0,0,0,.06);
  --skel-shimmer-dark: rgba(255,255,255,.08);
  --skel-shimmer-light: rgba(0,0,0,.04);
  --skel-speed: 1.5s;

  /* ── Upload zone ── */
  --upload-border: 2px dashed var(--glass-b2);
  --upload-border-active: 2px dashed var(--teal);
  --upload-radius: 16px; --upload-py: 40px; --upload-px: 24px;

  /* ── Date picker ── */
  --cal-w: 300px; --cal-w-range: 600px;
  --cal-cell: 40px; --cal-cell-radius: 50%;
  --cal-selected-bg: var(--teal); --cal-selected-text: var(--bg);
  --cal-today-border: 1.5px solid var(--border);
  --cal-range-bg: var(--teal); --cal-nav-size: 32px;

  /* ── Empty state ── */
  --empty-max-w: 400px; --empty-py: 48px; --empty-px: 24px;
  --empty-heading: 16px; --empty-body: 13px; --empty-action-mt: 20px;

  /* ── Error state ── */
  --error-tint: rgba(229,69,53,.08);
  --error-border: 1px solid rgba(229,69,53,.2);
  --error-bar: 4px solid #E54535;
  --error-inline-font: 11px;

  /* ── Badge (filled system, resolved 2026-07-23) ── */
  --badge-py: 4px; --badge-px: 12px;
  --badge-radius: 999px; --badge-font: 10px;
  --badge-success-bg: #00C9A8;  --badge-success-text: #1A2A2E;
  --badge-warning-bg: #FFBE0B;  --badge-warning-text: #1A2A2E;
  --badge-error-bg: #E54535;    --badge-error-text: #FFFFFF;
  --badge-info-bg: var(--teal); --badge-info-text: #1A2A2E;
  --badge-neutral-bg: rgba(128,128,128,.10); --badge-neutral-text: var(--text2);
  --badge-dot: 5px;

  /* ── KPI card ── */
  --kpi-px: 20px; --kpi-radius: 12px;
  --kpi-label: 9px; --kpi-value: 28px; --kpi-trend: 10px;
  --kpi-trend-up: var(--success); --kpi-trend-down: var(--red);

  /* ── Glass scrollbar ── */
  --scroll-w: 5px; --scroll-inset: 28px; --scroll-min-h: 36px;
  --scroll-thumb-dark: rgba(255,255,255,.22);
  --scroll-thumb-light: rgba(0,0,0,.13);
  --scroll-glow-dark: 0 0 5px rgba(165,239,255,.14);
  --scroll-glow-light: 0 0 5px rgba(26,117,135,.07);
  --scroll-fade: 1200ms;

  /* ── Email template ── */
  --email-max-w: 600px; --email-bg: #F3F2EF;
  --email-card-bg: #FFFFFF; --email-card-radius: 8px; --email-card-px: 32px;
  --email-logo-w: 100px;
  --email-cta-radius: 999px;
  --email-body-font: 14px; --email-body-color: #333333;
  --email-footer-font: 12px; --email-footer-color: #777777;

  /* ── Breakpoints (reference — use in media queries) ── */
  --bp-mobile: 639px; --bp-tablet: 640px; --bp-desktop: 1024px; --bp-wide: 1440px;
}

:root.light,
:root.light body,
body.light {
  /* ── Teal system (light mode) ── */
  --teal: #1A7587;
  --teal-dk: #135A68;
  --grey: #777777;

  /* ── Surfaces (light) ── */
  --bg: #F0F4F5;
  --surface: #FFFFFF;
  --surface2: #F8F8F8;
  --border: #E1E1E1;
  --text1: #1A2A2E;
  --text2: #555F62;
  --text3: #8A9496;
  --sb-bg: rgba(255,255,255,.92);
  --hdr-bg: #FFFFFF;
  --hdr-border: #E1E1E1;
  --accent: #1A7587;
  --accent-dim: rgba(26,117,135,.08);

  /* ── Glass (light) ── */
  --glass-1: rgba(255,255,255,.50);  --glass-b1: rgba(255,255,255,.50);
  --glass-2: rgba(255,255,255,.60);  --glass-b2: rgba(255,255,255,.60);
  --glass-3: rgba(255,255,255,.74);  --glass-b3: rgba(255,255,255,.74);
  --glass-4: rgba(255,255,255,.86);  --glass-b4: rgba(255,255,255,.86);
  --glass-hi1: rgba(255,255,255,.60);
  --glass-hi2: rgba(255,255,255,.72);
  --glass-hi3: rgba(255,255,255,.84);
  --glass-hi4: rgba(255,255,255,.94);
  --glass-reflect-1: rgba(26,117,135,.03);
  --glass-reflect-2: rgba(26,117,135,.03);
  --glass-reflect-3: rgba(26,117,135,.06);
  --glass-reflect-4: rgba(26,117,135,.08);
  --glass-noise-1: 0.02; --glass-noise-2: 0.02;
  --glass-noise-3: 0.03; --glass-noise-4: 0.04;

  --badge-info-text: #FFFFFF;
}


/* ── Phones (AGENTS.md §17, R-31): glass blur reduced to 8–24px below 640px, for speed ── */
@media (max-width: 639px) {
  :root, body, :root.light, :root.light body, body.light {
    --glass-blur-1: 8px; --glass-blur-2: 12px; --glass-blur-3: 18px; --glass-blur-4: 24px;
  }
}