/**
 * SENVIQ Design Tokens — Prompt 43 (SENVIQ_DESIGN_TOKENS.md is the
 * authoritative documentation for these values; this file is their one
 * runtime implementation). Every value here is deliberate and
 * WCAG 2.2 AA contrast-checked where it pairs text with a background —
 * see SENVIQ_DESIGN_TOKENS.md's own contrast table before changing any
 * color.
 *
 * The brand/action/neutral core below is NOT invented from scratch —
 * it formalizes and extends the palette apps/portal/public/styles.css
 * already used (--senviq-ink #14213d, --senviq-blue #2f5fd9, etc.),
 * deliberately preserving that continuity rather than replacing it (see
 * FRONTEND_MIGRATION_PLAN.md).
 *
 * No framework, no CSS-in-JS, no build step required to consume this —
 * plain CSS custom properties on :root, loadable via a single <link>
 * tag from any of Senviq's vanilla HTML surfaces.
 */

:root {
  /* ---- Brand ---- */
  --senviq-navy: #14213d; /* PRIMARY BRAND — deep Senviq navy; headings, wordmark, primary text */
  --senviq-navy-soft: #1f2f52; /* a lighter navy for large decorative surfaces, never for body text (contrast not re-verified for text use) */

  /* ---- Action ---- */
  --senviq-blue: #2f5fd9; /* PRIMARY ACTION — buttons, links, active nav state */
  --senviq-blue-hover: #23459e; /* hover/active state for primary action */
  --senviq-blue-tint: #eaf0fd; /* light tint for selected/active backgrounds behind blue content */

  /* ---- Neutrals ---- */
  --senviq-white: #ffffff;
  --senviq-bg: #f5f7fb; /* off-white app background */
  --senviq-surface: #ffffff; /* card/panel surface */
  --senviq-border: #dde3ee; /* subtle borders/dividers — informational only, never a status indicator by itself */
  --senviq-border-strong: #c3cce0; /* a slightly stronger border for inputs/focus-adjacent contexts */
  --senviq-muted: #5b6472; /* secondary/help text — 5.98:1 on white, passes AA */
  --senviq-disabled: #a8b0bf; /* disabled text/icon — decorative only, never the sole carrier of the "disabled" state (also uses aria-disabled/disabled attribute) */

  /* ---- Semantic ---- */
  --senviq-success: #1e7a34; /* 5.40:1 on white */
  --senviq-success-bg: #e6f4ea;
  --senviq-success-border: #b7ddc0;
  --senviq-warning: #8a5a00; /* 5.93:1 on white */
  --senviq-warning-bg: #fdf1e0;
  --senviq-warning-border: #f0d3a0;
  --senviq-danger: #b3261e; /* 6.54:1 on white */
  --senviq-danger-bg: #fdecea;
  --senviq-danger-border: #f5c2bd;
  --senviq-info: #0a5c8a; /* 7.21:1 on white — deliberately distinct from --senviq-blue so an informational note never reads as an action */
  --senviq-info-bg: #e7f3f9;
  --senviq-info-border: #bfe0ee;

  /* ---- Optional subtle accents (subordinate to the core identity — see SENVIQ_VISUAL_DIRECTION.md's brand-hierarchy note; never used for navigation branding) ---- */
  --senviq-accent-mail: var(--senviq-blue); /* Mail's accent IS the primary blue — no separate "Mail brand color" */
  --senviq-accent-mail-bg: var(--senviq-blue-tint);
  --senviq-accent-sign: var(--senviq-success); /* Sign's accent reuses the success green — completing a signature is a positive-outcome action */
  --senviq-accent-sign-bg: var(--senviq-success-bg);
  --senviq-accent-tertiary: #6b3fa0; /* a third, purely categorical tint (e.g. a "completed this month" stat) — decorative use only, not a semantic state; do not add a 4th/5th without a real need */
  --senviq-accent-tertiary-bg: #f1e9fb;

  /* ---- Focus ---- */
  --senviq-focus-ring: #2f5fd9;
  --senviq-focus-ring-offset: 2px;

  /* ---- Typography ---- */
  --senviq-font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* system-font stack — no web-font licensing dependency, see SENVIQ_DESIGN_TOKENS.md */
  --senviq-font-family-numeric: var(--senviq-font-family); /* same family; tabular-nums applied per-component, not a separate font */

  --senviq-fw-regular: 400;
  --senviq-fw-medium: 500;
  --senviq-fw-semibold: 600;
  --senviq-fw-bold: 700;

  --senviq-fs-display: 2rem; /* 32px */
  --senviq-fs-page-title: 1.5rem; /* 24px */
  --senviq-fs-section-title: 1.125rem; /* 18px */
  --senviq-fs-card-title: 1rem; /* 16px */
  --senviq-fs-body: 0.9375rem; /* 15px */
  --senviq-fs-small: 0.8125rem; /* 13px */
  --senviq-fs-label: 0.8125rem; /* 13px */
  --senviq-fs-caption: 0.75rem; /* 12px */
  --senviq-fs-button: 0.9375rem; /* 15px */
  --senviq-fs-table: 0.875rem; /* 14px — slightly denser than body, for administration data density */
  --senviq-fs-statistic: 1.75rem; /* 28px */

  --senviq-lh-tight: 1.25;
  --senviq-lh-normal: 1.5;
  --senviq-lh-relaxed: 1.6;

  --senviq-ls-label: 0.01em;
  --senviq-ls-caption: 0.02em;

  /* ---- Spacing scale (4px base unit) ---- */
  --senviq-space-1: 0.25rem; /* 4px */
  --senviq-space-2: 0.5rem; /* 8px */
  --senviq-space-3: 0.75rem; /* 12px */
  --senviq-space-4: 1rem; /* 16px */
  --senviq-space-5: 1.25rem; /* 20px */
  --senviq-space-6: 1.5rem; /* 24px */
  --senviq-space-8: 2rem; /* 32px */
  --senviq-space-10: 2.5rem; /* 40px */
  --senviq-space-12: 3rem; /* 48px */
  --senviq-space-16: 4rem; /* 64px */

  /* ---- Radius ---- */
  --senviq-radius-sm: 6px;
  --senviq-radius-md: 10px;
  --senviq-radius-lg: 16px;
  --senviq-radius-pill: 999px;

  /* ---- Shadow (restrained — never the primary signal of interactivity) ---- */
  --senviq-shadow-sm: 0 1px 2px rgba(20, 33, 61, 0.06);
  --senviq-shadow-md: 0 4px 12px rgba(20, 33, 61, 0.08);
  --senviq-shadow-lg: 0 12px 32px rgba(20, 33, 61, 0.12);

  /* ---- Layout ---- */
  --senviq-content-max-width: 1180px;
  --senviq-portal-max-width: 640px;
  --senviq-sidebar-width: 248px;
  --senviq-sidebar-width-collapsed: 72px;
  --senviq-topbar-height: 64px;
  --senviq-breakpoint-mobile: 640px;
  --senviq-breakpoint-tablet: 1024px;

  /* ---- Motion ---- */
  --senviq-duration-fast: 120ms;
  --senviq-duration-base: 200ms;
  --senviq-duration-slow: 320ms;
  --senviq-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --senviq-easing-emphasized: cubic-bezier(0.3, 0, 0.1, 1);

  /* ---- Z-index layers ---- */
  --senviq-z-dropdown: 100;
  --senviq-z-sticky: 200;
  --senviq-z-drawer: 300;
  --senviq-z-modal-backdrop: 400;
  --senviq-z-modal: 410;
  --senviq-z-toast: 500;
  --senviq-z-tooltip: 600;
}

/**
 * Reduced motion — every component using a --senviq-duration-*/easing
 * transition must respect this; see SENVIQ_COMPONENT_LIBRARY.md's own
 * accessibility notes per component. Setting the durations to
 * near-zero here (rather than disabling `transition` entirely) keeps
 * `transitionend`-dependent JS behavior (see behaviors.js) working
 * without a visible animation.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --senviq-duration-fast: 0.01ms;
    --senviq-duration-base: 0.01ms;
    --senviq-duration-slow: 0.01ms;
  }
}

/**
 * Dark mode is explicitly NOT implemented in Prompt 43 (per its own
 * instruction) — but token NAMES are semantic (--senviq-bg, not
 * --senviq-white-f5f7fb), so a future dark theme can redefine these
 * same custom properties under a [data-theme="dark"] selector without
 * any component needing to change. This comment is the "architecture
 * must not prevent future dark mode" requirement's concrete answer.
 */