/* Nova AI — shared foundation
   Tokens and primitives used by BOTH the pricing landing page and the usage
   dashboard, so the two read as one system. Page-specific components live in
   landing.css / dashboard.css.

   Chart series colours come from a validated categorical palette
   (adjacent-pair CVD ΔE ≥ 8, every step ≥ 3:1 on --surface-1). */

:root {
  color-scheme: dark;

  /* surfaces & ink */
  --page:            #0A0E17;
  --surface-1:       #121826;
  --surface-2:       #171F30;
  --surface-3:       #1E2739;
  --border:          rgba(255, 255, 255, .09);
  --border-strong:   rgba(255, 255, 255, .16);
  --text-primary:    #F1F5F9;
  --text-secondary:  #A8B3C4;
  --text-muted:      #8B96A8;

  /* categorical series (dark steps) */
  --series-1: #3987e5;  /* blue   — spend / brand accent */
  --series-2: #199e70;  /* aqua   — tokens               */
  --series-3: #d95926;  /* orange                        */
  --series-4: #c98500;  /* yellow                        */
  --series-5: #d55181;  /* magenta                       */

  /* status — reserved, never reused as a series */
  --good:     #0ca30c;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;

  --grid:     rgba(255, 255, 255, .07);
  --axis:     rgba(255, 255, 255, .14);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
  --ring: 0 0 0 2px var(--page), 0 0 0 4px var(--series-1);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .45), 0 24px 60px -28px rgba(0, 0, 0, .85);

  --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --dur: 180ms;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

/* Author `display` on .signin / .alert / .loading would otherwise beat the UA
   rule for [hidden]. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 12% -12%, rgba(57, 135, 229, .13), transparent 62%),
    radial-gradient(900px 460px at 92% -6%, rgba(25, 158, 112, .09), transparent 60%),
    var(--page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

.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;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

/* ── brand ─────────────────────────────────────────────────────────── */

.brand {
  display: flex; align-items: center; gap: var(--sp-2);
  min-width: 0; text-decoration: none;
}
.brand__mark { width: 26px; height: 26px; flex: none; }
.brand__mark rect { fill: var(--surface-3); }
.brand__mark path { fill: none; stroke: var(--series-1); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.brand__name { font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.brand__divider { width: 1px; height: 16px; background: var(--border-strong); }
.brand__page { color: var(--text-secondary); font-size: 14px; }
.brand--lg { justify-content: center; margin-bottom: var(--sp-5); }
.brand--lg .brand__mark { width: 34px; height: 34px; }
.brand--lg .brand__name { font-size: 19px; }

/* ── buttons ───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-4);
  border: 1px solid transparent; border-radius: var(--r-md);
  font: inherit; font-weight: 550; font-size: 14px;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.btn--primary { background: var(--series-1); color: #fff; }
.btn--primary:hover:not([disabled]) { background: #4b94ea; }

.btn--ghost {
  background: var(--surface-2); border-color: var(--border);
  color: var(--text-secondary);
}
.btn--ghost:hover:not([disabled]) { background: var(--surface-3); color: var(--text-primary); border-color: var(--border-strong); }

.btn--quiet { background: transparent; border-color: var(--border-strong); color: var(--text-primary); }
.btn--quiet:hover:not([disabled]) { background: var(--surface-2); }

.btn--block { width: 100%; }
.btn--icon { width: 44px; min-width: 44px; padding: 0; font-size: 17px; }
.btn--sm { min-height: 44px; padding: 0 var(--sp-3); font-size: 13px; }
.btn--lg { min-height: 50px; padding: 0 var(--sp-5); font-size: 15px; }

.btn.is-busy .btn__label { opacity: .6; }

/* ── tag / badge ───────────────────────────────────────────────────── */

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  font-size: 12px; font-weight: 550; color: var(--text-secondary);
}
.tag .icon { font-size: 13px; }
.tag--good     { color: var(--good);     border-color: rgba(12, 163, 12, .4);  background: rgba(12, 163, 12, .1); }
.tag--warning  { color: var(--warning);  border-color: rgba(250, 178, 25, .4); background: rgba(250, 178, 25, .1); }
.tag--critical { color: var(--critical); border-color: rgba(208, 59, 59, .45); background: rgba(208, 59, 59, .12); }
.tag--accent   { color: #9dc4f2;         border-color: rgba(57, 135, 229, .45); background: rgba(57, 135, 229, .14); }

/* ── card ──────────────────────────────────────────────────────────── */

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  min-width: 0;
}

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