/* =============================================================
   WeaveScope — Colors & Type
   DARK-FIRST. Default :root is dark; `.light` flips to light theme.

   Palette: "Midnight Prussian & Bone"
   ----------------------------------
   Blue-forward, Pantone-y. The CANVAS itself is deep Prussian
   blue — not gray — paired with a vivid Egyptian Blue primary
   and a warm Bone cream accent. The blue+cream pairing is a
   classic print-magazine pairing rarely seen in dev tools, where
   it's almost always cool-gray + cool-blue.

   ============================================================= */

/* Font files are self-hosted in assets/fonts and loaded by screen.css. */

/* ============================================================
   ROOT = DARK (default)
   ============================================================ */
:root {
  /* ===== Brand ===== */
  --brand-prussian:        236 100% 68%; /* @kind color */  /* #5C66FF — electric indigo-violet, blue-family but distinctly violet-leaning */
  --brand-prussian-hover:  236 100% 75%; /* @kind color */  /* #7A82FF */
  --brand-prussian-soft:   236 60% 20%; /* @kind color */   /* #1C2052 — tinted dark surface */
  --brand-prussian-deep:   238 95% 44%; /* @kind color */   /* #1A2EDB — for light backgrounds */

  --brand-bone:            38 35% 86%; /* @kind color */    /* #E5DBC5 — secondary, warm magazine-print cream */
  --brand-bone-soft:       38 18% 18%; /* @kind color */    /* tinted dark for ghost surfaces */
  --brand-bone-deep:       38 30% 50%; /* @kind color */

  --brand-glacier:         192 75% 78%; /* @kind color */   /* #A4DDED — tertiary, soft ice-blue */
  --brand-glacier-soft:    192 50% 16%; /* @kind color */

  --brand-ink:             215 80% 3%; /* @kind color */    /* deepest prussian, near black */

  /* Legacy aliases (system originally used amber/cobalt/verdigris/sangria/
     teal/magma — every existing component keeps working unchanged.) */
  --brand-amber:           var(--brand-prussian); /* @kind color */
  --brand-amber-hover:     var(--brand-prussian-hover); /* @kind color */
  --brand-amber-soft:      var(--brand-prussian-soft); /* @kind color */
  --brand-cobalt:          var(--brand-prussian); /* @kind color */
  --brand-cobalt-hover:    var(--brand-prussian-hover); /* @kind color */
  --brand-cobalt-soft:     var(--brand-prussian-soft); /* @kind color */
  --brand-cobalt-deep:     var(--brand-prussian-deep); /* @kind color */
  --brand-verdigris:       var(--brand-prussian); /* @kind color */
  --brand-verdigris-hover: var(--brand-prussian-hover); /* @kind color */
  --brand-verdigris-soft:  var(--brand-prussian-soft); /* @kind color */
  --brand-verdigris-deep:  var(--brand-prussian-deep); /* @kind color */
  --brand-sangria:         var(--brand-prussian); /* @kind color */
  --brand-sangria-hover:   var(--brand-prussian-hover); /* @kind color */
  --brand-sangria-soft:    var(--brand-prussian-soft); /* @kind color */
  --brand-sangria-deep:    var(--brand-prussian-deep); /* @kind color */
  --brand-magma:           var(--brand-bone); /* @kind color */
  --brand-magma-hover:     var(--brand-bone); /* @kind color */
  --brand-magma-soft:      var(--brand-bone-soft); /* @kind color */
  --brand-magma-deep:      var(--brand-bone-deep); /* @kind color */
  --brand-buttercup:       var(--brand-bone); /* @kind color */
  --brand-buttercup-hover: var(--brand-bone); /* @kind color */
  --brand-buttercup-soft:  var(--brand-bone-soft); /* @kind color */
  --brand-buttercup-deep:  var(--brand-bone-deep); /* @kind color */
  --brand-ember:           var(--brand-bone); /* @kind color */
  --brand-ember-soft:      var(--brand-bone-soft); /* @kind color */
  --brand-teal:            var(--brand-glacier); /* @kind color */
  --brand-teal-soft:       var(--brand-glacier-soft); /* @kind color */
  --brand-cerulean:        var(--brand-glacier); /* @kind color */
  --brand-cerulean-soft:   var(--brand-glacier-soft); /* @kind color */

  /* ===== Surface — deep Prussian Blue ===== */
  --background:         215 60% 7%; /* @kind color */       /* #07111D — page, distinctly BLUE */
  --foreground:         215 20% 94%; /* @kind color */
  --header:             215 50% 10%; /* @kind color */      /* #0E1A28 */
  --card:               215 45% 12%; /* @kind color */      /* #111E2D */
  --card-foreground:    215 20% 94%; /* @kind color */
  --popover:            215 40% 14%; /* @kind color */
  --popover-foreground: 215 20% 94%; /* @kind color */
  --sidebar:            215 75% 4%; /* @kind color */       /* #03080F — deeper than bg */
  --sidebar-foreground: 215 14% 80%; /* @kind color */

  /* Hierarchy — cool cream text */
  --fg-1:               215 22% 94%; /* @kind color */
  --fg-2:               215 14% 62%; /* @kind color */
  --fg-3:               215 10% 42%; /* @kind color */
  --fg-inverse:         215 60% 7%; /* @kind color */

  /* ===== Neutrals ===== */
  --muted:              215 30% 16%; /* @kind color */       /* #1B2839 */
  --muted-foreground:   215 14% 62%; /* @kind color */
  --accent:             215 30% 19%; /* @kind color */       /* #1F2E43 */
  --accent-foreground:  215 22% 94%; /* @kind color */
  --secondary:          215 30% 16%; /* @kind color */
  --secondary-foreground: 215 22% 94%; /* @kind color */
  --tertiary:           215 25% 24%; /* @kind color */
  --tertiary-foreground: 215 22% 94%; /* @kind color */
  --border:             215 28% 22%; /* @kind color */       /* #2A3A52 */
  --input:              215 28% 24%; /* @kind color */
  --ring:               236 100% 68%; /* @kind color */

  /* ===== Primary ===== */
  --primary:            var(--brand-prussian); /* @kind color */
  --primary-foreground: 0 0% 100%; /* @kind color */          /* white — high contrast on bright iris */

  /* ===== Semantic state (kept neutral so nothing else clashes with blue) ===== */
  --success-fg:         150 60% 65%; /* @kind color */
  --success-bg:         150 35% 12%; /* @kind color */
  --error-fg:           0   75% 70%; /* @kind color */       /* desaturated coral */
  --error-bg:           0   40% 14%; /* @kind color */
  --warning-fg:         42 85% 65%; /* @kind color */
  --warning-bg:         42 35% 14%; /* @kind color */
  --info-fg:            192 75% 78%; /* @kind color */       /* glacier */
  --info-bg:            192 50% 14%; /* @kind color */

  /* ===== Trace status ===== */
  --status-ok:          150 60% 55%; /* @kind color */
  --status-error:       0   75% 65%; /* @kind color */
  --status-warn:        42 85% 60%; /* @kind color */
  --status-running:     236 100% 72%; /* @kind color */       /* primary electric indigo-violet */
  --status-cached:      258 60% 72%; /* @kind color */       /* soft lilac */
  --status-tool:        var(--brand-glacier); /* @kind color */
  --status-llm:         var(--brand-prussian); /* @kind color */

  /* ===== Chart palette — mostly tonal blue + neutrals ===== */
  --chart-1: 236 100% 68%; /* @kind color */  /* electric indigo-violet */
  --chart-2: 192 75% 70%; /* @kind color */   /* glacier */
  --chart-3: 38 35% 80%; /* @kind color */    /* bone */
  --chart-4: 258 65% 75%; /* @kind color */   /* lilac */
  --chart-5: 150 55% 60%; /* @kind color */   /* mint */
  --chart-6: 215 14% 55%; /* @kind color */   /* steel */
  --chart-7: 42 75% 65%; /* @kind color */    /* honey */
  --chart-8: 215 25% 35%; /* @kind color */   /* deep slate */
  --chart-grid: 215 28% 22%; /* @kind color */

  /* ===== Radius ===== */
  --radius-xs: 0.25rem; /* @kind radius */
  --radius-sm: 0.375rem; /* @kind radius */
  --radius-md: 0.5rem; /* @kind radius */
  --radius-lg: 0.75rem; /* @kind radius */
  --radius-xl: 1rem; /* @kind radius */
  --radius:    var(--radius-md); /* @kind radius */

  /* ===== Spacing ===== */
  --space-1: 0.25rem; /* @kind spacing */
  --space-2: 0.5rem; /* @kind spacing */
  --space-3: 0.75rem; /* @kind spacing */
  --space-4: 1rem; /* @kind spacing */
  --space-5: 1.5rem; /* @kind spacing */
  --space-6: 2rem; /* @kind spacing */
  --space-8: 3rem; /* @kind spacing */
  --space-10: 4rem; /* @kind spacing */

  /* ===== Shadows ===== */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4); /* @kind shadow */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.45), 0 1px 1px -1px rgb(0 0 0 / 0.4); /* @kind shadow */
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.6), 0 2px 4px -2px rgb(0 0 0 / 0.45); /* @kind shadow */
  --shadow-lg: 0 16px 32px -6px rgb(0 0 0 / 0.7), 0 4px 8px -4px rgb(0 0 0 / 0.45); /* @kind shadow */

  /* ===== Fonts ===== */
  --font-sans:    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* @kind font */
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* @kind font */
  --font-display: "IBM Plex Sans", var(--font-sans); /* @kind font */

  /* ===== Type scale ===== */
  --text-2xs:    0.6875rem; /* @kind font */
  --text-xs:     0.75rem; /* @kind font */
  --text-sm:     0.8125rem; /* @kind font */
  --text-base:   0.9rem; /* @kind font */
  --text-md:     1rem; /* @kind font */
  --text-lg:     1.125rem; /* @kind font */
  --text-xl:     1.25rem; /* @kind font */
  --text-2xl:    1.5rem; /* @kind font */
  --text-3xl:    1.875rem; /* @kind font */
  --text-4xl:    2.25rem; /* @kind font */
  --text-5xl:    3rem; /* @kind font */
  --text-6xl:    3.75rem; /* @kind font */

  --leading-tight:  1.15; /* @kind other */
  --leading-snug:   1.3; /* @kind other */
  --leading-normal: 1.5; /* @kind other */
  --leading-relaxed: 1.65; /* @kind other */

  --tracking-tight:   -0.02em; /* @kind other */
  --tracking-normal:   0; /* @kind other */
  --tracking-wide:     0.02em; /* @kind other */
  --tracking-caps:     0.06em; /* @kind other */
}

/* ============================================================
   LIGHT THEME (opt-in)
   Uses the deep verdigris / deep magma as primaries on white.
   ============================================================ */
.light, [data-theme="light"] {
  --brand-prussian:       238 95% 50%; /* @kind color */
  --brand-prussian-hover: 238 95% 42%; /* @kind color */
  --brand-prussian-soft:  236 95% 95%; /* @kind color */
  --brand-bone:           38 35% 86%; /* @kind color */
  --brand-bone-soft:      38 50% 96%; /* @kind color */
  --brand-glacier:        192 70% 50%; /* @kind color */
  --brand-ink:            215 75% 4%; /* @kind color */

  --background:         215 25% 99%; /* @kind color */
  --foreground:         215 35% 10%; /* @kind color */
  --header:             215 25% 96%; /* @kind color */
  --card:               0 0% 100%; /* @kind color */
  --card-foreground:    215 35% 10%; /* @kind color */
  --popover:            0 0% 100%; /* @kind color */
  --popover-foreground: 215 35% 10%; /* @kind color */
  --sidebar:            215 25% 97%; /* @kind color */
  --sidebar-foreground: 215 20% 30%; /* @kind color */

  --fg-1:               215 35% 12%; /* @kind color */
  --fg-2:               215 15% 45%; /* @kind color */
  --fg-3:               215 12% 62%; /* @kind color */
  --fg-inverse:         215 25% 99%; /* @kind color */

  --muted:              215 20% 95%; /* @kind color */
  --muted-foreground:   215 15% 45%; /* @kind color */
  --accent:             215 20% 93%; /* @kind color */
  --accent-foreground:  215 35% 12%; /* @kind color */
  --secondary:          215 20% 95%; /* @kind color */
  --secondary-foreground: 215 35% 12%; /* @kind color */
  --tertiary:           215 18% 88%; /* @kind color */
  --tertiary-foreground: 215 35% 12%; /* @kind color */
  --border:             215 22% 88%; /* @kind color */
  --input:              215 22% 88%; /* @kind color */
  --ring:               238 95% 50%; /* @kind color */

  --primary-foreground: 215 25% 99%; /* @kind color */

  --success-fg: 152 76% 24%; /* @kind color */
  --success-bg: 141 70% 92%; /* @kind color */
  --error-fg:   0 72% 45%; /* @kind color */
  --error-bg:   0 80% 95%; /* @kind color */
  --warning-fg: 32 95% 35%; /* @kind color */
  --warning-bg: 42 90% 92%; /* @kind color */
  --info-fg:    192 90% 35%; /* @kind color */
  --info-bg:    192 80% 93%; /* @kind color */

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04); /* @kind shadow */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 1px -1px rgb(0 0 0 / 0.06); /* @kind shadow */
  --shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04); /* @kind shadow */
  --shadow-lg: 0 10px 20px -4px rgb(0 0 0 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.04); /* @kind shadow */
}

/* =============================================================
   Base type rules
   ============================================================= */
html, body {
  font-family: var(--font-sans);
  font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
  font-size: 16px;
  line-height: var(--leading-normal);
  color: hsl(var(--fg-1));
  background: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.display-lg, h1.display {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
}
.display-md {
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
}
.display-sm {
  font-size: var(--text-4xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
}

h1, .h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: 600; }
h2, .h2 { font-size: var(--text-2xl); line-height: var(--leading-snug);  letter-spacing: var(--tracking-tight); font-weight: 600; }
h3, .h3 { font-size: var(--text-xl);  line-height: var(--leading-snug);  font-weight: 600; }
h4, .h4 { font-size: var(--text-lg);  font-weight: 600; }
h5, .h5 { font-size: var(--text-base); font-weight: 600; }

p, .body { font-size: var(--text-base); line-height: var(--leading-normal); color: hsl(var(--fg-1)); }
.body-sm { font-size: var(--text-sm); line-height: var(--leading-normal); }
.body-xs { font-size: var(--text-xs); line-height: var(--leading-snug); }

.eyebrow, .overline {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: hsl(var(--fg-2));
}

.caption { font-size: var(--text-xs); color: hsl(var(--fg-2)); }

code, .code, .mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-feature-settings: "calt" 0, "liga" 0, "zero" 1;
}
pre, .codeblock {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  color: hsl(var(--fg-1));
}

a { color: hsl(var(--brand-glacier)); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

.tabular-nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }