/* ==========================================================================
   AIM CONSUMER — base.css
   Generated from: pipeline/shared/design-tokens.json (design-tokens-v1)
   Codegen target: tokens.css (emitted by engine-tools/render-design-tokens.py)
   Authority: AIM-FE-CONFORMANCE-NOTE.md §1 / fe-consumer-bridge.md Rule 1

   This file references CSS custom properties emitted by the engine token
   codegen (tokens.css). It DOES NOT copy or fork the shared commons
   primitives at asym-intel-commons:static/monitors/shared/.
   The engine's renderer.js / nav.js / chart JS / base primitives are
   consumed from that shared path — never re-authored here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts
   Inter loaded via CDN; fallback stack in --font-sans token.
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* --------------------------------------------------------------------------
   1. CSS custom-property bridge
   Aliases that normalise the generated token names (tokens.css emits
   --<group>-<key> format, e.g. --palette-bg → remapped here as --bg etc.)
   When the engine codegen ships, replace these declarations with a single
   @import "tokens.css"; and delete the :root block below.
   -------------------------------------------------------------------------- */
:root {
  /* Palette */
  --bg:           #faf8f3;
  --surface:      #f0ede4;
  --card:         #ffffff;
  --card-hover:   #f5f2ea;
  --line:         #d4cfc4;
  --line-subtle:  #e8e4da;
  --text:         #1a1814;
  --text-muted:   #6b6559;
  --text-faint:   #a09789;
  --acc:          #1d3b5e;    /* accent — named --acc to match mockup convention */
  --accent-dim:   #2a5285;
  --gold:         #9a7b3f;    /* accent2 in token schema */
  --green:        #2d6a3f;
  --amber:        #9a7b3f;
  --red:          #8b2b2b;
  /* --------------------------------------------------------------------------
     Semantic severity tokens — designer warm-editorial palette
     Added: AIM colour+contrast uplift sprint.
     Token names do NOT collide with dark_overrides above (dark overrides use
     --red / --green / --amber; these tokens use --crit / --high / --mod / --ok).
     Dark-mode values are NOT in scope this pass (light only).
     --------------------------------------------------------------------------

     WCAG DECISION TABLE (verified against --bg #faf8f3, rel. lum. 0.9458):

     --crit  #b5462e  contrast 5.10 on --bg  → AA PASS  → safe for small text
     --high  #c08a2e  contrast 2.86 on --bg  → AA FAIL  → FILLS / borders /
                      left-edge accents ONLY; small text → --high-text #7d5f20 (5.61 AA)
     --mod   #9a7b3f  contrast 3.75 on --bg  → AA FAIL  → FILLS / borders /
                      accents ONLY; same hex as --gold; text uses --text-muted (5.45 AA)
     --ok    #3a7d54  contrast 4.66 on --bg  → AA PASS  → safe for small text on --bg
                      (chip text uses --green #2d6a3f: 6.10 AA on tint background)

     Tag chip text on tint bg (chip font 10.5px bold, design-token-verified):
       .tag.crit  → text var(--red)      #8b2b2b on --crit-b  → 7.98 AA ✓
       .tag.high  → text var(--high-text) #7d5f20 on --high-b  → 5.61 AA ✓
       .tag.mod   → text var(--text-muted) #6b6559 on --mod-b  → 5.45 AA ✓
       .tag.ok    → text var(--green)     #2d6a3f on --ok-b    → 6.10 AA ✓
     -------------------------------------------------------------------------- */

  /* Severity scale — fills, bars, borders, dot indicators */
  --crit:        #b5462e;   /* Extreme / ELEVATED — AA on --bg (5.10) */
  --high:        #c08a2e;   /* High — FILL/border ONLY (2.86 < 4.5) */
  --mod:         #9a7b3f;   /* Moderate — FILL/border ONLY (3.75 < 4.5) = --gold */
  --ok:          #3a7d54;   /* Low / stable / dispersing — AA on --bg (4.66) */

  /* Safe text-only alias where --high would fail as small text */
  --high-text:   #7d5f20;   /* darkened --high for text use: 5.61 AA on --bg */

  /* Severity tints — chip backgrounds, KPI card washes, row highlights */
  --crit-b:  rgba(181,  70, 46, 0.12);
  --high-b:  rgba(192, 138, 46, 0.14);
  --mod-b:   rgba(154, 123, 63, 0.12);
  --ok-b:    rgba( 58, 125, 84, 0.13);


  /* Typography */
  --font-sans:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      1.25rem;
  --text-2xl:     1.5rem;
  --text-3xl:     1.875rem;
  --text-4xl:     2.25rem;
  --text-h1:      2.5rem;
  --text-h2:      2rem;
  --text-h3:      1.5rem;
  --text-h4:      1.25rem;

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

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Spacing */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 9999px;

  /* Elevation */
  --elev-0: none;
  --elev-1: 0 1px 2px 0 rgba(26,24,20,0.06);
  --elev-2: 0 2px 8px 0 rgba(26,24,20,0.10);
  --elev-3: 0 4px 16px 0 rgba(26,24,20,0.14);

  /* Motion */
  --motion-fast:   100ms;
  --motion-base:   200ms;
  --motion-slow:   400ms;
  --motion-easing: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Layout */
  --container-max:  1280px;
  --gutter:         24px;
  --grid-cols:      12;
  --grid-gap:       24px;
}

/* Dark theme token overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0f1117;
    --surface:     #161a23;
    --card:        #1c2230;
    --card-hover:  #222b3a;
    --line:        #2e3a4e;
    --line-subtle: #232d3d;
    --text:        #e8e4dc;
    --text-muted:  #9ba5b4;
    --text-faint:  #5a6478;
    --acc:         #5b8dbf;
    --accent-dim:  #3d6a96;
    --gold:        #c9a356;
    --green:       #4a9e65;
    --amber:       #c9a356;
    --red:         #c05050;

    --elev-1: 0 1px 2px 0 rgba(0,0,0,0.30);
    --elev-2: 0 2px 8px 0 rgba(0,0,0,0.40);
    --elev-3: 0 4px 16px 0 rgba(0,0,0,0.50);
  }
}

/* Explicit dark class override (for user-toggled themes) */
[data-theme="dark"] {
  --bg:          #0f1117;
  --surface:     #161a23;
  --card:        #1c2230;
  --card-hover:  #222b3a;
  --line:        #2e3a4e;
  --line-subtle: #232d3d;
  --text:        #e8e4dc;
  --text-muted:  #9ba5b4;
  --text-faint:  #5a6478;
  --acc:         #5b8dbf;
  --accent-dim:  #3d6a96;
  --gold:        #c9a356;
  --green:       #4a9e65;
  --amber:       #c9a356;
  --red:         #c05050;

  --elev-1: 0 1px 2px 0 rgba(0,0,0,0.30);
  --elev-2: 0 2px 8px 0 rgba(0,0,0,0.40);
  --elev-3: 0 4px 16px 0 rgba(0,0,0,0.50);
}

/* --------------------------------------------------------------------------
   2. Reset / box model
   Minimal reset — engine's renderer.js/base.css may apply a broader reset
   when loaded from the fleet primitives path. This block only handles
   what is genuinely consumer-specific.
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   3. Base document
   -------------------------------------------------------------------------- */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--font-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   4. Typography hierarchy
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4) 0;
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--text);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-xl);  font-weight: var(--font-medium); }
h6 { font-size: var(--text-lg);  font-weight: var(--font-medium); }

p {
  margin: 0 0 var(--space-4) 0;
  line-height: var(--leading-relaxed);
}

a {
  color: var(--acc);
  text-decoration: none;
  transition: color var(--motion-fast) var(--motion-easing);
}

a:hover,
a:focus-visible {
  color: var(--accent-dim);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

strong, b   { font-weight: var(--font-semibold); }
em, i       { font-style: italic; }
small       { font-size: var(--text-sm); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

code {
  background-color: var(--surface);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.3em;
}

pre {
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  overflow-x: auto;
}

/* Numeric data — lining figures for tables and metrics */
.num,
[data-numeral],
td.num {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum", "lnum";
}

/* --------------------------------------------------------------------------
   5. Layout primitives
   -------------------------------------------------------------------------- */

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: 800px;
}

/* 12-column grid */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
}

/* Responsive column helpers */
.col-1  { grid-column: span 1;  }
.col-2  { grid-column: span 2;  }
.col-3  { grid-column: span 3;  }
.col-4  { grid-column: span 4;  }
.col-5  { grid-column: span 5;  }
.col-6  { grid-column: span 6;  }
.col-7  { grid-column: span 7;  }
.col-8  { grid-column: span 8;  }
.col-9  { grid-column: span 9;  }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media (max-width: 768px) {
  .grid { grid-template-columns: 1fr; }
  [class^="col-"] { grid-column: span 1; }
}

/* Flex utilities */
.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }

/* Stack */
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-8); }

/* Page sections */
.section {
  padding-block: var(--space-12);
}

.section--sm {
  padding-block: var(--space-8);
}

/* --------------------------------------------------------------------------
   6. Dividers / lines
   -------------------------------------------------------------------------- */
hr {
  border: none;
  border-top: 1px solid var(--line);
  margin-block: var(--space-6);
}

.divider-subtle {
  border-top-color: var(--line-subtle);
}

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

/* --------------------------------------------------------------------------
   8. Reduced-motion blanket
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}