/* Strata design tokens.
 *
 * Three layers: primitive (raw values, never used directly in components) ->
 * semantic (what a thing MEANS) -> component. Only semantic tokens appear in
 * markup, so a palette change is one file.
 *
 * Dark-first: the consoles are operator tools that live on a screen all day.
 * The light theme is a full peer, not an afterthought.
 */

:root {
  /* ---- primitive: brand ---------------------------------------------- */
  --strata-basalt:      #1B1D21;
  --strata-basalt-2:    #24272C;
  --strata-basalt-3:    #2E3238;
  --strata-slate:       #3F4A57;
  --strata-slate-2:     #5A6879;
  --strata-sandstone:   #D9C3A3;
  --strata-sandstone-2: #EFE4D2;
  --strata-ochre:       #C8863C;
  --strata-ochre-2:     #E0A25C;
  --strata-sage:        #8FB3A6;
  --strata-verdigris:   #2E7D7A;
  --strata-verdigris-2: #5FA79F;
  --strata-bone:        #F7F4EF;

  /* ---- primitive: status ---------------------------------------------
   * Held deliberately OFF the brand ramp. A degraded pool must never be
   * confusable with the hot-tier ochre, so status hues avoid 25-45deg.
   */
  --status-healthy:   #3E9C6B;
  --status-degraded:  #D4A017;   /* yellow, not ochre */
  --status-critical:  #C4453C;
  --status-stale:     #8A7CC4;   /* distinct hue: "we don't know" != "bad" */
  --status-draining:  #4A8CB5;
  --status-idle:      #6B7280;

  /* ---- primitive: tier ramp (hot -> archive) -------------------------- */
  --tier-hot:     var(--strata-ochre);
  --tier-warm:    var(--strata-sandstone);
  --tier-cool:    var(--strata-sage);
  --tier-cold:    var(--strata-verdigris-2);
  --tier-archive: var(--strata-verdigris);

  /* ---- type ----------------------------------------------------------- */
  --font-sans: 'Inter Tight', 'Inter', -apple-system, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem;

  --tracking-wordmark: 0.28em;   /* the lockup's letterspacing, for HTML fallbacks */
  --tracking-label:    0.06em;

  /* ---- space / form ---------------------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.28);
  --shadow-2: 0 4px 14px rgb(0 0 0 / 0.30);

  /* ---- semantic: LIGHT (bare :root is the light palette) --------------- */
  --bg:            var(--strata-bone);
  --bg-raised:     #FFFFFF;
  --bg-sunken:     #EDE8E0;
  --bg-inset:      #E3DCD1;
  --border:        #D7CEC1;
  --border-strong: #B9AE9C;
  --fg:            var(--strata-basalt);
  --fg-muted:      #5C6470;
  --fg-subtle:     #858D99;
  --accent:        var(--strata-ochre);
  --accent-fg:     #FFFFFF;
  --accent-quiet:  #F3E4D0;
  --link:          #A0662A;
  --focus-ring:    var(--strata-verdigris);
}

/* ---- semantic: DARK -------------------------------------------------
 * Defined for BOTH the explicit toggle and the system default, so a page
 * renders correctly whether or not the viewer has chosen a theme.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg:            var(--strata-basalt);
    --bg-raised:     var(--strata-basalt-2);
    --bg-sunken:     #141619;
    --bg-inset:      #101215;
    --border:        var(--strata-basalt-3);
    --border-strong: var(--strata-slate);
    --fg:            var(--strata-bone);
    --fg-muted:      #9AA4B0;
    --fg-subtle:     #6B7480;
    --accent:        var(--strata-ochre-2);
    --accent-fg:     var(--strata-basalt);
    --accent-quiet:  #33291D;
    --link:          var(--strata-ochre-2);
    --focus-ring:    var(--strata-verdigris-2);
  }
}

:root[data-theme='dark'] {
  --bg:            var(--strata-basalt);
  --bg-raised:     var(--strata-basalt-2);
  --bg-sunken:     #141619;
  --bg-inset:      #101215;
  --border:        var(--strata-basalt-3);
  --border-strong: var(--strata-slate);
  --fg:            var(--strata-bone);
  --fg-muted:      #9AA4B0;
  --fg-subtle:     #6B7480;
  --accent:        var(--strata-ochre-2);
  --accent-fg:     var(--strata-basalt);
  --accent-quiet:  #33291D;
  --link:          var(--strata-ochre-2);
  --focus-ring:    var(--strata-verdigris-2);
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
}