/* =============================================================================
   ArgusBoard Design System — main.css
   CSS Custom Properties + Reset + Base Styles
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Design Tokens — TypeSafe Aesthetic (Light Canvas Default)
   Source of truth: argusboard.com / docs/design-reference.md
   Dark palette lives in themes.css under body.dark
   --------------------------------------------------------------------------- */
:root {
  /* Canvas + surfaces — content sits directly on a muted colored canvas.
     Panels are a barely-there tint with hairline rules, never shadowed cards. */
  --color-bg-primary:    #c4bba8;                    /* beige canvas (dashboard default) */
  --color-bg-secondary:  rgba(254, 254, 254, 0.55);  /* panel surface over canvas */
  --color-bg-tertiary:   rgba(30, 30, 30, 0.06);     /* table stripes, section headers */
  --color-bg-elevated:   #fefefe;                    /* dropdowns, modals (must be opaque) */

  /* Accent — teal is the single primary accent */
  --color-accent:        #1fb8a6;
  --color-accent-hover:  #199b8c;
  --color-accent-dim:    rgba(31, 184, 166, 0.12);
  --color-accent-alt:    #0e9488;
  /* Teal as TEXT needs to be much darker than teal as a fill.
     #0a544e clears 4.07:1 as a heading on the darkest canvas (pink) and
     6.32:1 as small text on the lightest panel. */
  --color-accent-ink:    #0a544e;

  /* Legacy alias — templates referenced --color-primary but it was never
     defined, so those rules silently did nothing. Map to the accent. */
  --color-primary:       var(--color-accent);
  --color-primary-bg:    var(--color-accent-dim);

  /* Button fills — separate from --color-accent so that link/active text keeps
     the lighter teal while filled buttons still reach 4.5:1 with their label.
     white on #0f766e = 5.47:1 (AA). */
  --color-btn-primary-bg:   #0f766e;
  --color-btn-primary-hover:#0d5f59;
  --color-on-accent:        #ffffff;

  /* Label colour for filled status/accent buttons.
     White passes AA on all light-theme fills (success/warning/danger/violet). */
  --color-on-fill:          #ffffff;

  /* Text — near-black at 86%, never solid.
     Muted tiers verified >=4.5:1 on EVERY canvas tint (0.76 => min 4.73:1
     on the pink canvas, which is the darkest of the five). */
  --color-text-primary:   rgba(30, 30, 30, 0.86);
  --color-text-secondary: rgba(30, 30, 30, 0.76);
  --color-text-muted:     rgba(30, 30, 30, 0.76);
  --color-text-link:      #0f766e;

  /* Status — semantic colour kept at deliberate contrast.
     Colour is semantic, not decorative — do not mute these into the canvas. */
  /* Status inks — darkened so pill text clears 4.5:1 on its own 10-14% tint
     over the beige canvas. Filled buttons keep the brighter --color-* values
     above (white label passes there). */
  /* Status — success */
  --color-success-ink:    #0b3d1c;
  --color-warning-ink:    #5a2807;
  --color-danger-ink:     #5c230d;
  --color-critical-ink:   #6b1616;
  --color-info-ink:       #172f6e;
  --color-violet-ink:     #4c1d95;
  --color-neutral-ink:    #1f2937;

  /* Status — success */
  --color-success:        #15803d;
  --color-success-bg:     rgba(21, 128, 61, 0.14);
  --color-success-border: rgba(21, 128, 61, 0.30);

  /* Status — warning */
  --color-warning:        #b45309;
  --color-warning-bg:     rgba(180, 83, 9, 0.14);
  --color-warning-border: rgba(180, 83, 9, 0.30);

  /* Status — danger */
  --color-danger:         #c2410c;
  --color-danger-bg:      rgba(194, 65, 12, 0.14);
  --color-danger-border:  rgba(194, 65, 12, 0.30);

  /* Status — critical */
  --color-critical:       #991b1b;
  --color-critical-bg:    rgba(153, 27, 27, 0.14);
  --color-critical-border:rgba(153, 27, 27, 0.32);

  /* Status — info */
  --color-info:           #1d4ed8;
  --color-info-bg:        rgba(29, 78, 216, 0.14);
  --color-info-border:    rgba(29, 78, 216, 0.30);

  /* Status — neutral/gray */
  --color-neutral:        #6b7280;
  --color-neutral-bg:     rgba(30, 30, 30, 0.06);
  --color-neutral-border: rgba(30, 30, 30, 0.18);

  /* Status — violet (analysis / VPP accents) */
  --color-violet:        #7c3aed;
  --color-violet-bg:     rgba(124, 58, 237, 0.14);
  --color-violet-border: rgba(124, 58, 237, 0.30);
  --color-violet-hover:  #6d28d9;

  /* Borders — hairline rules */
  --color-border:         rgba(30, 30, 30, 0.1);
  --color-border-light:   rgba(30, 30, 30, 0.06);

  /* Report row status (light) */
  --color-report-green-bg:      #c8e6c8;
  --color-report-green-border:  #15803d;
  --color-report-yellow-bg:     #fff3c0;
  --color-report-yellow-border: #b45309;
  --color-report-red-bg:        #f4a0a0;
  --color-report-red-border:    #c2410c;
  --color-report-unknown-bg:    #dddddd;
  --color-report-unknown-border:#6b7280;

  /* Spacing scale */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Roboto Mono', 'Courier New', monospace;

  --font-size-xs:   0.7rem;
  --font-size-sm:   0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-lg:   1.0625rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:  1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed:1.75;

  /* Radii — sharp corners only. --radius-full stays round for genuine circles
     (status dots, avatars); sharpen pills/tags explicitly if needed. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-full: 9999px;

  /* Shadows — none. Flat, rule-based minimalism. */
  --shadow-sm:  none;
  --shadow-md:  none;
  --shadow-lg:  none;
  --shadow-xl:  none;

  /* Transitions */
  --transition-fast:   100ms ease;
  --transition-base:   180ms ease;
  --transition-slow:   300ms ease;

  /* Layout */
  --navbar-height:       60px;
  --content-max-width:   1400px;
  --content-padding:     var(--space-8);
}

/* ---------------------------------------------------------------------------
   2. CSS Reset
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Global keyboard focus indicator */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Respect users who prefer reduced motion */
@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;
  }
}

ul, ol {
  list-style: none;
}

/* ---------------------------------------------------------------------------
   3. Typography utilities
   --------------------------------------------------------------------------- */
.text-xs      { font-size: var(--font-size-xs); }
.text-sm      { font-size: var(--font-size-sm); }
.text-base    { font-size: var(--font-size-base); }
.text-lg      { font-size: var(--font-size-lg); }
.text-xl      { font-size: var(--font-size-xl); }
.text-2xl     { font-size: var(--font-size-2xl); }
.text-3xl     { font-size: var(--font-size-3xl); }

.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-accent    { color: var(--color-accent-ink); }
.text-success   { color: var(--color-success-ink); }
.text-warning   { color: var(--color-warning-ink); }
.text-danger    { color: var(--color-danger-ink); }

.font-mono   { font-family: var(--font-mono); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold{ font-weight: var(--font-weight-semibold); }
.font-bold   { font-weight: var(--font-weight-bold); }

/* ---------------------------------------------------------------------------
   4. Per-page canvas tints
   Each surface gets its own muted canvas, mirroring the marketing site.
   Only --color-bg-primary is overridden; panels are translucent and composite
   over whichever canvas is active. All ink/muted tokens verified >=4.5:1 on
   each of these five canvases (see docs/UI_TYPESAFE_PLAN.md).
   --------------------------------------------------------------------------- */
body.page-mdm       { --color-bg-primary: #a5b8d4; }  /* dusty blue */
body.page-reporting { --color-bg-primary: #b5c9a5; }  /* warm sage  */
body.page-sage      { --color-bg-primary: #abbab9; }  /* cool sage  */
body.page-pink      { --color-bg-primary: #d4a5a5; }  /* dusty pink */

/* ---------------------------------------------------------------------------
   5. Layout utilities
   --------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--content-padding);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}