/* ATO design system — canonical token layer.
   Source of truth: ato-hq/playbook 03-react-frontend/design-system.md
   VERBATIM. Do not edit values here to suit a page; if Beacon needs a token
   the system doesn't have, add it to the Beacon alias layer in
   styles/ds-alias.css and raise it upstream.

   Light mode only. No dark variants, no prefers-color-scheme. */

:root {
  /* Brand palette (verbatim from brand guidelines) */
  --ato-blue-charcoal:  #171F21;
  --ato-teal:           #007E84;
  --ato-dark-turquoise: #2DC0C4;
  --ato-mint-green:     #6CD8CB;
  --ato-light-cyan:     #E4F0F2;

  /* Teal ramp */
  --ds-teal-900: #00373A;  --ds-teal-800: #005358;  --ds-teal-700: #006B70;
  --ds-teal-600: #007E84;  --ds-teal-500: #12989E;  --ds-teal-400: #2DC0C4;
  --ds-teal-300: #6CD8CB;  --ds-teal-200: #A5E7DF;  --ds-teal-100: #CBF1EC;
  --ds-teal-50:  #E4F0F2;

  /* Charcoal ramp */
  --ds-charcoal-900: #0D1213;  --ds-charcoal-800: #171F21;  --ds-charcoal-700: #263133;
  --ds-charcoal-600: #3A484B;  --ds-charcoal-500: #4A585B;  --ds-charcoal-400: #6E7F82;
  --ds-charcoal-300: #93A4A7;  --ds-charcoal-200: #B9D3D7;  --ds-charcoal-100: #D3E3E6;
  --ds-charcoal-50:  #EFF5F6;

  /* Surfaces — porcelain, no #FFFFFF */
  --ds-canvas:          #F7F7F4;   /* page background */
  --ds-surface:         #FEFEFC;   /* cards, panels, menus */
  --ds-surface-sunken:  #EFEFEA;   /* wells, table headers, code blocks */
  --ds-surface-raised:  #FEFEFD;   /* modals, popovers — the lightest we go */
  --ds-surface-inverse: #171F21;   /* dark bands, footers */
  --ds-overlay:         rgba(23, 31, 33, 0.48);

  /* Borders — quiet greige */
  --ds-border:         #E4E4DD;
  --ds-border-strong:  #CFCFC6;
  --ds-border-subtle:  #EFEFEA;
  --ds-border-inverse: #2E3A3C;

  /* Text — three hierarchy tiers, all AA on every system surface.
     text-disabled is NOT a hierarchy step: disabled controls only. */
  --ds-text:           #171F21;
  --ds-text-muted:     #4A585B;
  --ds-text-subtle:    #596A6D;
  --ds-text-disabled:  #93A4A7;
  --ds-text-on-brand:  #FDFDFB;
  --ds-text-inverse:   #E4F0F2;
  --ds-text-link:      #015F66;
  --ds-text-link-hover:#00373A;

  /* Brand intent — deep lagoon teal for actions */
  --ds-primary:             #015F66;
  --ds-primary-hover:       #014E54;
  --ds-primary-active:      #003F44;
  --ds-primary-subtle:      #E4F0F2;
  --ds-primary-subtle-hover:#CBF1EC;
  --ds-primary-border:      #A5E7DF;
  --ds-accent:              #2DC0C4;
  --ds-accent-soft:         #6CD8CB;

  /* Status (added — the brand kit defines none) */
  --ds-success: #0F7A4D;  --ds-success-subtle: #E3F4EC;  --ds-success-border: #A8D8C1;
  --ds-warning: #A15C00;  --ds-warning-subtle: #FBEEDC;  --ds-warning-border: #E8C894;
  --ds-danger:  #B3261E;  --ds-danger-subtle:  #FBE9E7;  --ds-danger-border:  #EDBAB5;
  --ds-info:    #006B70;  --ds-info-subtle:    #E4F0F2;  --ds-info-border:    #A5E7DF;

  /* Categorical accents — identity, never status. For distinguishing two
     non-status, non-sequential things (data sources, client tiers).
     Never use these to imply good/bad. */
  --ds-cat-blue:          #365A9E;  --ds-cat-blue-subtle:   #E9EEF8;
  --ds-cat-purple:        #6F4497;  --ds-cat-purple-subtle: #F1EAF8;

  /* Score bands — 0-100 health semantics (standing state, not events).
     Thresholds: <60 At risk, 60-79 Watch, 80+ Healthy. */
  --ds-band-high: #007E84;  --ds-band-high-subtle: #E4F0F2;   /* brand Teal — fills only */
  --ds-band-mid:  #A15C00;  --ds-band-mid-subtle:  #FBEEDC;
  --ds-band-low:  #B3261E;  --ds-band-low-subtle:  #FBE9E7;
  --ds-band-none: #93A4A7;

  /* Typography */
  --ds-font-sans: 'Poppins', 'Century Gothic', 'Futura', 'Avenir Next', system-ui, sans-serif;
  --ds-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --ds-weight-regular: 400;  --ds-weight-medium: 500;  --ds-weight-bold: 700;
  --ds-size-display: 3rem;      --ds-size-h1: 2.25rem;   --ds-size-h2: 1.75rem;
  --ds-size-h3: 1.375rem;       --ds-size-h4: 1.125rem;  --ds-size-body-lg: 1.0625rem;
  --ds-size-body: 0.9375rem;    --ds-size-body-sm: 0.8125rem;
  --ds-size-caption: 0.75rem;   --ds-size-overline: 0.6875rem;
  --ds-leading-display: 1.16;   --ds-leading-heading: 1.25;
  --ds-leading-body: 1.6;       --ds-leading-tight: 1.4;
  --ds-tracking-display: -0.02em; --ds-tracking-heading: -0.01em; --ds-tracking-overline: 0.10em;

  /* Spacing — 4px base */
  --ds-space-1: 0.125rem;  --ds-space-2: 0.25rem;  --ds-space-3: 0.5rem;
  --ds-space-4: 0.75rem;   --ds-space-5: 1rem;     --ds-space-6: 1.25rem;
  --ds-space-7: 1.5rem;    --ds-space-8: 2rem;     --ds-space-9: 2.5rem;
  --ds-space-10: 3rem;     --ds-space-11: 4rem;    --ds-space-12: 5rem;  --ds-space-13: 6rem;

  /* Radius — echoes the soft rhombi of the mark */
  --ds-radius-xs: 4px;   --ds-radius-sm: 6px;   --ds-radius-md: 10px;
  --ds-radius-lg: 16px;  --ds-radius-xl: 20px;  --ds-radius-2xl: 28px;
  --ds-radius-pill: 999px;
  --ds-radius-control: var(--ds-radius-pill);   /* controls are pills */

  /* Elevation — charcoal-tinted, never black */
  --ds-shadow-xs: 0 1px 2px rgba(23,31,33,0.05);
  --ds-shadow-sm: 0 1px 2px rgba(23,31,33,0.04), 0 2px 6px rgba(23,31,33,0.04);
  --ds-shadow-md: 0 2px 6px rgba(23,31,33,0.04), 0 10px 24px rgba(23,31,33,0.06);
  --ds-shadow-lg: 0 2px 6px rgba(23,31,33,0.04), 0 12px 28px rgba(23,31,33,0.08);
  --ds-shadow-xl: 0 8px 16px rgba(23,31,33,0.06), 0 24px 48px rgba(23,31,33,0.14);
  --ds-shadow-focus: 0 0 0 3px var(--ds-primary);  /* solid — 6.91:1, clears SC 1.4.11's 3:1 */
  --ds-shadow-inner: inset 0 1px 2px rgba(23,31,33,0.06);
  --ds-shadow-primary: 0 3px 10px rgba(1,95,102,0.20);  /* primary button rest */

  /* Motion */
  --ds-duration-instant: 80ms;  --ds-duration-fast: 140ms;
  --ds-duration-base: 220ms;    --ds-duration-slow: 360ms;
  --ds-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ds-ease-entrance: cubic-bezier(0, 0, 0, 1);
  --ds-ease-exit:     cubic-bezier(0.3, 0, 1, 1);

  /* Layout */
  --ds-container-sm: 640px;  --ds-container-md: 840px;
  --ds-container-lg: 1080px; --ds-container-xl: 1320px;
  --ds-control-height-sm: 32px; --ds-control-height-md: 40px; --ds-control-height-lg: 48px;
  --ds-focus-ring: 0 0 0 2px var(--ds-canvas), 0 0 0 4px var(--ds-primary);  /* deep teal, 6.91:1 */

  /* Z-index */
  --ds-z-sticky: 100; --ds-z-dropdown: 200; --ds-z-overlay: 300;
  --ds-z-modal: 400;  --ds-z-toast: 500;    --ds-z-tooltip: 600;
}

/* Accessibility floor — spec §Accessibility. Applies system-wide. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}