/* ─────────────────────────────────────────────────────────────────
   MERKAVA DESIGN SYSTEM — GraphiteDawn
   Foundational tokens: color + type
   Dark mode native. Light mode documented but deprioritized.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── COLOR: Surfaces (graphite) ───────────────────────────────── */
  --mk-bg:            #0F1418;  /* primary background */
  --mk-bg-elevated:   #1A2030;  /* cards, panels, modals */
  --mk-bg-sunken:     #0A0E12;  /* inset wells, code blocks */
  --mk-bg-hover:      #202738;  /* row hover, subtle elevation */

  /* ── COLOR: Lines ─────────────────────────────────────────────── */
  --mk-border:        #2A3340;  /* 1px hairlines */
  --mk-border-strong: #3A4455;  /* emphasized dividers */
  --mk-border-subtle: #1F2630;  /* barely-there separators */

  /* ── COLOR: Text ──────────────────────────────────────────────── */
  --mk-fg:            #E8ECF0;  /* primary — soft white, never #FFF */
  --mk-fg-muted:      #8A9098;  /* secondary — metadata, labels */
  --mk-fg-subtle:     #5C6370;  /* tertiary — disabled, placeholders */
  --mk-fg-inverse:    #0F1418;  /* text on light / on-accent */

  /* ── COLOR: Brand ─────────────────────────────────────────────── */
  --mk-accent:        #4A7FB8;  /* steel blue — primary brand */
  --mk-accent-hover:  #5A8FC8;  /* CTA hover */
  --mk-accent-press:  #3A6FA8;  /* CTA active/press */
  --mk-accent-soft:   rgba(74,127,184,0.12);  /* tinted backgrounds */
  --mk-accent-ring:   rgba(74,127,184,0.40);  /* focus rings */

  --mk-indigo:        #6B7FD6;  /* indigo glow — sparing secondary */
  --mk-indigo-soft:   rgba(107,127,214,0.12);

  /* ── COLOR: Signal (muted, never saturated) ───────────────────── */
  --mk-positive:      #4ADE80;
  --mk-positive-soft: rgba(74,222,128,0.12);
  --mk-attention:     #F59E0B;
  --mk-attention-soft:rgba(245,158,11,0.12);
  --mk-critical:      #EF4444;
  --mk-critical-soft: rgba(239,68,68,0.12);

  /* ── TYPE: Families ───────────────────────────────────────────── */
  --mk-font-sans: "Inter", "Inter Placeholder", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mk-font-mono: "JetBrains Mono", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── TYPE: Scale (px / line-height) ───────────────────────────── */
  --mk-text-display-lg: 56px;   --mk-lh-display-lg: 1.05;   /* hero */
  --mk-text-display:    40px;   --mk-lh-display:    1.1;    /* section hero */
  --mk-text-h1:         32px;   --mk-lh-h1:         1.15;
  --mk-text-h2:         24px;   --mk-lh-h2:         1.2;
  --mk-text-h3:         18px;   --mk-lh-h3:         1.3;
  --mk-text-body:       14px;   --mk-lh-body:       1.5;
  --mk-text-body-lg:    16px;   --mk-lh-body-lg:    1.55;
  --mk-text-sm:         13px;   --mk-lh-sm:         1.45;
  --mk-text-xs:         12px;   --mk-lh-xs:         1.4;
  --mk-text-label:      11px;   --mk-lh-label:      1.3;    /* all caps */
  --mk-text-code:       13px;   --mk-lh-code:       1.55;

  /* ── TYPE: Weights ────────────────────────────────────────────── */
  --mk-weight-regular: 400;
  --mk-weight-medium:  500;
  --mk-weight-semi:    600;
  --mk-weight-bold:    700;
  --mk-weight-black:   800;

  /* ── TYPE: Tracking ───────────────────────────────────────────── */
  --mk-track-display: -0.02em;  /* tight for wordmark/display */
  --mk-track-tight:   -0.01em;
  --mk-track-normal:  0;
  --mk-track-label:   0.08em;   /* labels, caps */
  --mk-track-tagline: 0.20em;   /* taglines, wide-caps */

  /* ── SPACING (4px grid) ───────────────────────────────────────── */
  --mk-space-0:  0;
  --mk-space-1:  4px;
  --mk-space-2:  8px;
  --mk-space-3:  12px;
  --mk-space-4:  16px;
  --mk-space-5:  20px;
  --mk-space-6:  24px;
  --mk-space-8:  32px;
  --mk-space-10: 40px;
  --mk-space-12: 48px;
  --mk-space-16: 64px;
  --mk-space-20: 80px;
  --mk-space-24: 96px;

  /* ── RADII ────────────────────────────────────────────────────── */
  --mk-radius-none: 0;
  --mk-radius-sm:   3px;   /* tags, pills, inputs */
  --mk-radius-md:   6px;   /* buttons, small cards */
  --mk-radius-lg:   10px;  /* cards, panels */
  --mk-radius-xl:   14px;  /* modals, hero surfaces */
  --mk-radius-pill: 999px;

  /* ── SHADOWS (engineered, not diffuse) ────────────────────────── */
  --mk-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --mk-shadow-md: 0 4px 12px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.4);
  --mk-shadow-lg: 0 12px 32px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.35);
  --mk-shadow-glow: 0 0 0 1px var(--mk-accent-ring), 0 0 24px rgba(74,127,184,0.25);

  /* ── ELEVATION (subtle gradient overlays) ─────────────────────── */
  --mk-elev-gradient: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 40%);

  /* ── MOTION ───────────────────────────────────────────────────── */
  --mk-ease:       cubic-bezier(0.2, 0, 0, 1);
  --mk-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --mk-duration-fast: 120ms;
  --mk-duration:      180ms;
  --mk-duration-slow: 320ms;
}

/* ─────────────────────────────────────────────────────────────────
   SEMANTIC ELEMENT STYLES — opinionated defaults
   ───────────────────────────────────────────────────────────────── */

.mk-root, body.mk-root {
  background: var(--mk-bg);
  color: var(--mk-fg);
  font-family: var(--mk-font-sans);
  font-size: var(--mk-text-body);
  line-height: var(--mk-lh-body);
  font-weight: var(--mk-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.mk-display-lg { font-size: var(--mk-text-display-lg); line-height: var(--mk-lh-display-lg); font-weight: var(--mk-weight-bold); letter-spacing: var(--mk-track-display); }
.mk-display    { font-size: var(--mk-text-display);    line-height: var(--mk-lh-display);    font-weight: var(--mk-weight-bold); letter-spacing: var(--mk-track-display); }
.mk-h1         { font-size: var(--mk-text-h1);         line-height: var(--mk-lh-h1);         font-weight: var(--mk-weight-semi); letter-spacing: var(--mk-track-tight); }
.mk-h2         { font-size: var(--mk-text-h2);         line-height: var(--mk-lh-h2);         font-weight: var(--mk-weight-semi); letter-spacing: var(--mk-track-tight); }
.mk-h3         { font-size: var(--mk-text-h3);         line-height: var(--mk-lh-h3);         font-weight: var(--mk-weight-semi); letter-spacing: 0; }
.mk-body       { font-size: var(--mk-text-body);       line-height: var(--mk-lh-body);       font-weight: var(--mk-weight-regular); }
.mk-body-lg    { font-size: var(--mk-text-body-lg);    line-height: var(--mk-lh-body-lg);    font-weight: var(--mk-weight-regular); }
.mk-sm         { font-size: var(--mk-text-sm);         line-height: var(--mk-lh-sm); color: var(--mk-fg-muted); }
.mk-xs         { font-size: var(--mk-text-xs);         line-height: var(--mk-lh-xs); color: var(--mk-fg-muted); }

.mk-label {
  font-family: var(--mk-font-mono);
  font-size: var(--mk-text-label);
  line-height: var(--mk-lh-label);
  font-weight: var(--mk-weight-medium);
  letter-spacing: var(--mk-track-label);
  text-transform: uppercase;
  color: var(--mk-fg-muted);
}

.mk-tagline {
  font-family: var(--mk-font-mono);
  font-size: var(--mk-text-xs);
  letter-spacing: var(--mk-track-tagline);
  text-transform: uppercase;
  color: var(--mk-fg-muted);
  font-weight: var(--mk-weight-regular);
}

.mk-code, code, pre {
  font-family: var(--mk-font-mono);
  font-size: var(--mk-text-code);
  line-height: var(--mk-lh-code);
}