/* =============================================================
   Kobold Completions — Colors & Type
   Design system foundations. Import this everywhere.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand */
  --kobold-red:         #B81F24;
  --kobold-red-bright:  #D91F26;
  --kobold-red-deep:    #8A1519;
  --kobold-red-tint:    #F6E2E3;

  /* Steel */
  --steel-000: #FFFFFF;
  --steel-025: #FAFAFB;
  --steel-050: #F4F4F6;
  --steel-100: #E8E9EC;
  --steel-150: #DADCE0;
  --steel-200: #C5C7CC;
  --steel-300: #A6A8AF;
  --steel-400: #8D8B95;
  --steel-500: #6D6E75;
  --steel-600: #4E4F56;
  --steel-700: #34353B;
  --steel-800: #1F2025;
  --steel-900: #121317;

  /* Semantic foundations */
  --bg:             var(--steel-000);
  --bg-alt:         var(--steel-050);
  --bg-inverse:     var(--steel-900);
  --surface:        var(--steel-000);
  --surface-raised: var(--steel-000);
  --surface-sunken: var(--steel-050);
  --fg:             var(--steel-900);
  --fg-muted:       var(--steel-600);
  --fg-subtle:      var(--steel-500);
  --fg-inverse:     var(--steel-000);
  --fg-accent:      var(--kobold-red);
  --border:         var(--steel-150);
  --border-strong:  var(--steel-300);
  --border-subtle:  var(--steel-100);
  --accent:         var(--kobold-red);
  --accent-bright:  var(--kobold-red-bright);
  --accent-hover:   var(--kobold-red-deep);

  /* Status — muted engineering tones */
  --status-ok:        #2F7D4F;
  --status-ok-tint:   #E6F1EB;
  --status-warn:      #B8791F;
  --status-warn-tint: #F5EBDA;
  --status-danger:    var(--kobold-red);
  --status-danger-tint: var(--kobold-red-tint);
  --status-info:      #245E8A;
  --status-info-tint: #DCE7F0;

  /* Type */
  --font-display: 'Aptos Display', 'Aptos', 'Calibri', 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --font-sans:    'Aptos', 'Calibri', 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', Consolas, ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-display-xxl: 96px;
  --fs-display-xl:  72px;
  --fs-display-lg:  56px;
  --fs-display-md:  40px;
  --fs-display-sm:  32px;
  --fs-h1:          32px;
  --fs-h2:          24px;
  --fs-h3:          20px;
  --fs-h4:          18px;
  --fs-body-lg:     18px;
  --fs-body:        16px;
  --fs-body-sm:     14px;
  --fs-caption:     12px;
  --fs-micro:       11px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --ls-display: -0.02em;
  --ls-label:   0.08em;
  --ls-eyebrow: 0.14em;

  /* 8pt grid */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* Radii */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 1px rgba(18,19,23,0.04);
  --shadow-sm: 0 1px 2px rgba(18,19,23,0.06), 0 0 0 1px rgba(18,19,23,0.03);
  --shadow-md: 0 4px 8px -2px rgba(18,19,23,0.08), 0 2px 4px -1px rgba(18,19,23,0.04);
  --shadow-accent: 0 0 0 3px rgba(184,31,36,0.18);

  --rule-weight: 1px;
}

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

/* Type utilities */
.k-display-xxl, .k-display-xl, .k-display-lg, .k-display-md, .k-display-sm {
  font-family: var(--font-display); font-weight: 700;
  line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--fg);
}
.k-display-xxl { font-size: var(--fs-display-xxl); }
.k-display-xl  { font-size: var(--fs-display-xl); }
.k-display-lg  { font-size: var(--fs-display-lg); }
.k-display-md  { font-size: var(--fs-display-md); }
.k-display-sm  { font-size: var(--fs-display-sm); font-weight: 600; }

.k-h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-snug); }
.k-h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-snug); }
.k-h3 { font-family: var(--font-sans);    font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); }
.k-h4 { font-family: var(--font-sans);    font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); }

.k-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.k-body    { font-size: var(--fs-body);    line-height: var(--lh-normal); }
.k-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.k-caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-muted); }
.k-micro   { font-size: var(--fs-micro);   line-height: var(--lh-normal); color: var(--fg-subtle); }

.k-eyebrow {
  font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--kobold-red);
}
.k-label {
  font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-muted);
}
.k-mono {
  font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.01em;
}

.k-rule-accent {
  display: block; width: 48px; height: 3px; background: var(--kobold-red);
}