/* ============================================================
   K.O. — Colors & Type
   Murdered out. Monochromatic. Blueprint × ops dashboard.
   Zero accent color. The system speaks in greys.
   ============================================================ */

/* ---- Fonts (Google) ----------------------------------------
   Three families. All free, all Google Fonts, all ubiquitous —
   findable in any modern design system handoff.

   · Bebas Neue   — display. Condensed all-caps, BLVCK Paris energy.
                    Single weight (400). Use at large sizes only, tracked tight.
   · Inter        — sans / UI / body / paragraph headings. 300–800.
   · JetBrains Mono — mono / spec annotations / code. 400–700.
   ------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  /* ---- SURFACE SCALE — pure black up through hairline greys --- */
  --ko-bg-void:        #000000;   /* outermost shell, always pure black */
  --ko-bg-base:        #050505;   /* the canvas */
  --ko-bg-panel:       #0A0A0A;   /* page sections, sidebars */
  --ko-bg-card:        #111111;   /* cards, chips, pills */
  --ko-bg-elevated:    #181818;   /* hover state on cards */
  --ko-bg-overlay:     #1F1F1F;   /* modal / menu surface */

  /* ---- BORDER SCALE — hairline greys ----------------------- */
  --ko-line-hairline:  #1A1A1A;   /* default border */
  --ko-line-rule:      #222222;   /* rules, dividers */
  --ko-line-strong:    #2A2A2A;   /* strong border, focus ring base */
  --ko-line-accent:    #3A3A3A;   /* edge hover */

  /* ---- FOREGROUND SCALE — grey through bone white ---------- */
  --ko-fg-floor:       #2A2A2A;   /* deepest mute (axis labels, ghost) */
  --ko-fg-mute-3:      #444444;   /* very muted text */
  --ko-fg-mute-2:      #666666;   /* placeholder */
  --ko-fg-mute-1:      #888888;   /* secondary metadata */
  --ko-fg-body:        #B3B3B3;   /* body copy */
  --ko-fg-strong:      #E8E8E8;   /* emphasized body */
  --ko-fg-bone:        #F4F4F2;   /* warm white, headings option */
  --ko-fg-white:       #FFFFFF;   /* pure white, top-level type */

  /* ---- INVERTED (for rare light callouts: ticket stubs, etc) --- */
  --ko-inv-bg:         #FFFFFF;
  --ko-inv-fg:         #000000;
  --ko-inv-mute:       #6B6B6B;

  /* ---- SEMANTIC ALIASES ------------------------------------ */
  --ko-color-bg:       var(--ko-bg-void);
  --ko-color-fg:       var(--ko-fg-white);
  --ko-color-fg-muted: var(--ko-fg-mute-1);
  --ko-color-border:   var(--ko-line-hairline);
  --ko-color-rule:     var(--ko-line-rule);

  /* Status — NOT colored. Monochrome semantic by shade only.
     If absolutely required, use these — but prefer iconography + caps labels. */
  --ko-status-active:  var(--ko-fg-white);
  --ko-status-pending: var(--ko-fg-mute-1);
  --ko-status-done:    var(--ko-fg-mute-3);
  --ko-status-error:   var(--ko-fg-white);   /* paired with bg-card box, "ERROR" caps */

  /* ---- TYPE — families ------------------------------------- */
  --ko-font-sans: "Inter", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --ko-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Menlo", monospace;
  --ko-font-display: "Bebas Neue", "Inter", "Helvetica Neue Condensed", "Arial Narrow", sans-serif;

  /* ---- TYPE — base sizes (rem) ----------------------------- */
  --ko-text-2xs:   10px;
  --ko-text-xs:    11px;
  --ko-text-sm:    13px;
  --ko-text-base:  15px;
  --ko-text-md:    17px;
  --ko-text-lg:    20px;
  --ko-text-xl:    24px;
  --ko-text-2xl:   32px;
  --ko-text-3xl:   44px;
  --ko-text-4xl:   60px;
  --ko-text-5xl:   84px;
  --ko-text-6xl:   120px;

  /* ---- TYPE — weights -------------------------------------- */
  --ko-weight-light:    300;
  --ko-weight-regular:  400;
  --ko-weight-medium:   500;
  --ko-weight-semibold: 600;
  --ko-weight-bold:     700;
  --ko-weight-black:    800;

  /* ---- TYPE — leading / tracking --------------------------- */
  --ko-leading-tight: 1.05;
  --ko-leading-snug:  1.2;
  --ko-leading-base:  1.5;
  --ko-leading-loose: 1.7;

  --ko-track-mega:    -0.04em;   /* big display, tight */
  --ko-track-tight:  -0.02em;
  --ko-track-normal:  0;
  --ko-track-wide:    0.05em;
  --ko-track-caps:    0.12em;    /* all-caps eyebrows / labels */
  --ko-track-spec:    0.20em;    /* blueprint annotation labels */

  /* ---- RADIUS — small, technical, never pillowy ------------ */
  --ko-radius-none: 0;
  --ko-radius-xs:   2px;
  --ko-radius-sm:   4px;
  --ko-radius-md:   6px;
  --ko-radius-lg:   10px;
  --ko-radius-pill: 999px;

  /* ---- SPACING — 4px grid ---------------------------------- */
  --ko-space-1:  4px;
  --ko-space-2:  8px;
  --ko-space-3:  12px;
  --ko-space-4:  16px;
  --ko-space-5:  20px;
  --ko-space-6:  24px;
  --ko-space-8:  32px;
  --ko-space-10: 40px;
  --ko-space-12: 48px;
  --ko-space-16: 64px;
  --ko-space-20: 80px;
  --ko-space-24: 96px;

  /* ---- ELEVATION — inset hairlines, no soft shadows -------- */
  --ko-elev-0:  none;
  --ko-elev-1:  inset 0 0 0 1px var(--ko-line-hairline);
  --ko-elev-2:  inset 0 0 0 1px var(--ko-line-rule);
  --ko-elev-3:  inset 0 1px 0 rgba(255,255,255,0.04), inset 0 0 0 1px var(--ko-line-rule);
  --ko-elev-modal: 0 24px 60px rgba(0,0,0,0.7), 0 0 0 1px var(--ko-line-strong);
  --ko-elev-glow:  0 0 0 1px var(--ko-fg-white);   /* used on press only */

  /* ---- MOTION — flat, mechanical --------------------------- */
  --ko-ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ko-ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ko-ease-flat: linear;
  --ko-dur-fast:    120ms;
  --ko-dur-base:    180ms;
  --ko-dur-slow:    280ms;

  /* ---- GRID / BLUEPRINT motif vars ------------------------- */
  --ko-grid-unit:    8px;
  --ko-grid-color:   rgba(255,255,255,0.025);
  --ko-tick-color:   rgba(255,255,255,0.07);
}

/* ============================================================
   SEMANTIC TYPE — element-level styles
   ============================================================ */

html, body {
  background: var(--ko-color-bg);
  color: var(--ko-color-fg);
  font-family: var(--ko-font-sans);
  font-size: var(--ko-text-base);
  font-weight: var(--ko-weight-regular);
  line-height: var(--ko-leading-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display — Bebas Neue. Single weight (400) but reads heavy by design.
   Always all-caps. Tight tracking. Used for hero headlines, the wordmark feel. */
.ko-display,
h1.ko-h1 {
  font-family: var(--ko-font-display);
  font-weight: 400;
  font-size: var(--ko-text-5xl);
  line-height: var(--ko-leading-tight);
  letter-spacing: var(--ko-track-mega);
  color: var(--ko-fg-white);
  text-transform: uppercase;
}

h1, .ko-h1 {
  font-family: var(--ko-font-sans);
  font-size: var(--ko-text-4xl);
  font-weight: var(--ko-weight-bold);
  line-height: var(--ko-leading-tight);
  letter-spacing: var(--ko-track-tight);
  color: var(--ko-fg-white);
}

h2, .ko-h2 {
  font-family: var(--ko-font-sans);
  font-size: var(--ko-text-3xl);
  font-weight: var(--ko-weight-bold);
  line-height: var(--ko-leading-tight);
  letter-spacing: var(--ko-track-tight);
  color: var(--ko-fg-white);
}

h3, .ko-h3 {
  font-family: var(--ko-font-sans);
  font-size: var(--ko-text-2xl);
  font-weight: var(--ko-weight-semibold);
  line-height: var(--ko-leading-snug);
  letter-spacing: var(--ko-track-tight);
  color: var(--ko-fg-white);
}

h4, .ko-h4 {
  font-family: var(--ko-font-sans);
  font-size: var(--ko-text-xl);
  font-weight: var(--ko-weight-semibold);
  line-height: var(--ko-leading-snug);
  letter-spacing: var(--ko-track-tight);
  color: var(--ko-fg-white);
}

h5, .ko-h5 {
  font-family: var(--ko-font-sans);
  font-size: var(--ko-text-lg);
  font-weight: var(--ko-weight-semibold);
  line-height: var(--ko-leading-snug);
  color: var(--ko-fg-white);
}

p, .ko-p {
  font-family: var(--ko-font-sans);
  font-size: var(--ko-text-base);
  font-weight: var(--ko-weight-regular);
  line-height: var(--ko-leading-base);
  color: var(--ko-fg-body);
  text-wrap: pretty;
}

.ko-lede {
  font-family: var(--ko-font-sans);
  font-size: var(--ko-text-md);
  font-weight: var(--ko-weight-regular);
  line-height: var(--ko-leading-base);
  color: var(--ko-fg-strong);
  text-wrap: pretty;
}

.ko-small {
  font-size: var(--ko-text-sm);
  color: var(--ko-fg-mute-1);
}

/* Eyebrow — the all-caps tracked label. The system's signature voice. */
.ko-eyebrow {
  font-family: var(--ko-font-sans);
  font-size: var(--ko-text-xs);
  font-weight: var(--ko-weight-semibold);
  letter-spacing: var(--ko-track-caps);
  text-transform: uppercase;
  color: var(--ko-fg-mute-1);
}

/* Spec — mono blueprint annotation. Used for IDs, coordinates, status flags. */
.ko-spec {
  font-family: var(--ko-font-mono);
  font-size: var(--ko-text-xs);
  font-weight: var(--ko-weight-medium);
  letter-spacing: var(--ko-track-spec);
  text-transform: uppercase;
  color: var(--ko-fg-mute-2);
}

.ko-spec-strong {
  font-family: var(--ko-font-mono);
  font-size: var(--ko-text-xs);
  font-weight: var(--ko-weight-semibold);
  letter-spacing: var(--ko-track-spec);
  text-transform: uppercase;
  color: var(--ko-fg-white);
}

code, .ko-code, kbd {
  font-family: var(--ko-font-mono);
  font-size: 0.92em;
  font-weight: var(--ko-weight-medium);
  color: var(--ko-fg-strong);
  background: var(--ko-bg-card);
  border: 1px solid var(--ko-line-hairline);
  padding: 2px 6px;
  border-radius: var(--ko-radius-xs);
}

pre {
  font-family: var(--ko-font-mono);
  font-size: var(--ko-text-sm);
  background: var(--ko-bg-panel);
  border: 1px solid var(--ko-line-hairline);
  border-radius: var(--ko-radius-sm);
  padding: var(--ko-space-4);
  color: var(--ko-fg-strong);
  overflow-x: auto;
}

a.ko-link {
  color: var(--ko-fg-white);
  text-decoration: none;
  border-bottom: 1px solid var(--ko-line-strong);
  padding-bottom: 1px;
  transition: border-color var(--ko-dur-fast) var(--ko-ease-out);
}
a.ko-link:hover { border-bottom-color: var(--ko-fg-white); }

hr.ko-rule {
  border: 0;
  border-top: 1px solid var(--ko-line-rule);
  margin: var(--ko-space-6) 0;
}

::selection {
  background: var(--ko-fg-white);
  color: var(--ko-bg-void);
}

/* ============================================================
   UTILITY — blueprint motifs
   ============================================================ */

.ko-grid-bg {
  background-image:
    linear-gradient(to right, var(--ko-grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ko-grid-color) 1px, transparent 1px);
  background-size: var(--ko-grid-unit) var(--ko-grid-unit);
}

.ko-grid-bg-lg {
  background-image:
    linear-gradient(to right, var(--ko-tick-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ko-tick-color) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* Corner ticks — for framing key surfaces like a blueprint */
.ko-corners {
  position: relative;
}
.ko-corners::before,
.ko-corners::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--ko-fg-white);
  border-style: solid;
  pointer-events: none;
}
.ko-corners::before {
  top: 0; left: 0;
  border-width: 1px 0 0 1px;
}
.ko-corners::after {
  bottom: 0; right: 0;
  border-width: 0 1px 1px 0;
}

/* ============================================================
   RESPONSIVE OPTIMIZATIONS — mobile & small screens
   ============================================================ */

@media (max-width: 576px) {
  /* Stack focus list items vertically on narrow mobile viewports */
  .ko-focus-row {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 24px 12px !important;
  }
  .ko-focus-row > span:first-of-type {
    min-width: auto !important;
    font-size: 3.5rem !important;
  }
  .ko-focus-row > div {
    padding-top: 0 !important;
  }
  .ko-focus-row > span.ko-spec {
    display: none !important; /* Hide technical arrows on narrow mobile to keep screen clean */
  }

  /* Stack project schematic cards in a single-column layout */
  .ko-project-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}