/* =====================================================================
   Vreko Design System — Colors + Type
   ---------------------------------------------------------------------
   Vreko is a CLI-first developer intelligence platform by Marcelle Labs.
   Aesthetic: terminal. Not dashboard. Calm authority, watchful, precise.
   Canvas is pure off-black (#0A0A0A) — no slate hues anywhere.
   The eye of the gecko leads. Green is structural, never decorative.
   ===================================================================== */

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

:root {
  /* ---------------- Brand palette (canonical, from tokens.json) ---- */
  --vk-green:      #4ADE80; /* primary · the gecko · single CTA · glyph    */
  --vk-green-2:    #22C55E; /* hover · pressed · emphasis on green         */
  --vk-green-3:    #6EE7A7; /* subtle highlights, secondary indicators     */
  --vk-bg:         #0A0A0A; /* canvas — pure off-black, the default        */
  --vk-bg-raised:  #111111; /* surface — cards, sidebars                   */
  --vk-bg-elev:    #1A1A1A; /* elevated — inputs, hovered surfaces, modal  */
  --vk-border:     #27272A; /* the only border color on dark               */
  --vk-white:      #FAFAFA; /* primary text on dark, wordmark               */
  --vk-gray:       #A1A1AA; /* secondary text · taglines                    */

  /* Observation cue. REINFORCEMENT ONLY, governed by the GTM-48 semantic
     rule. Observation is carried mechanically by a dotted stroke and a
     hollow ring; this token only repeats that reading.
     Legal:   dark surfaces only, alongside the dotted/hollow form.
     Illegal: as the sole observation channel; as an encoding of proof
              class; inside a proof-class badge; as a state-pip fill;
              inside an evidence classification; on any light surface
              (1.94:1 on white, below the 3:1 non-text floor).
     Measured: greyscale byte 184, identical to --vk-green, which is why
     form is load-bearing and this token is redundant by design.        */
  --vk-observation-cue: #CBACF9;

  /* Subtle green wash. Felt, not seen. Never above 10%. */
  --vk-glow:       rgba(74, 222, 128, 0.10);
  --vk-glow-hair:  rgba(74, 222, 128, 0.30);

  /* ---------------- Surface ramp (off-black, neutral zinc) -------- */
  --bg-0:          #050505;  /* deepest — page chrome, scrollbar lane    */
  --bg-1:          #0A0A0A;  /* canvas — body background                 */
  --bg-2:          #111111;  /* surface — cards, sidebar                 */
  --bg-3:          #1A1A1A;  /* elevated — inputs, hover, modal sheet    */
  --border-1:      #27272A;  /* default hairlines                        */
  --border-2:      #3F3F46;  /* hover, active hairlines                  */

  /* ---------------- Foreground ramp (on dark, neutral zinc) ------- */
  --fg-1:          #FAFAFA;  /* primary text, headings                   */
  --fg-2:          #A1A1AA;  /* secondary text, subtext                  */
  --fg-3:          #71717A;  /* tertiary, metadata, timestamps           */
  --fg-4:          #52525B;  /* placeholder, disabled                    */

  /* ---------------- Semantic tokens ------------------------------- */
  --color-surface:        var(--bg-1);
  --color-surface-raised: var(--bg-2);
  --color-surface-elev:   var(--bg-3);
  --color-surface-sunk:   var(--bg-0);
  --color-text:           var(--fg-1);
  --color-text-muted:     var(--fg-2);
  --color-text-subtle:    var(--fg-3);
  --color-text-faint:     var(--fg-4);
  --color-accent:         var(--vk-green);
  --color-accent-2:       var(--vk-green-2);
  --color-border:         var(--border-1);
  --color-border-strong:  var(--border-2);

  /* Status indicators (BRAND.md §2.5). Used in state UI only, never decoration. */
  --color-success: #34D399;  /* positive state, non-brand contexts        */
  --color-warn:    #FF6B35;  /* degraded · fragility > 0.3                */
  --color-danger:  #EF4444;  /* disconnected · fragility > 0.7 · error    */
  --color-info:    #3B82F6;  /* neutral information, tooltips             */

  /* ---------------- Type families --------------------------------- */
  --font-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* OpenType features for Geist */
  --font-features: "ss01", "ss02", "cv11";

  /* ---------------- Type scale (BRAND.md §3) ---------------------- */
  /* Display 64 / 600 / -0.025em / 1.05  — hero, presentation titles */
  --t-display-size:  64px;
  --t-display-w:     600; /* @kind font */
  --t-display-track: -0.025em; /* @kind font */
  --t-display-lh:    1.05; /* @kind font */

  /* H1 48 / 600 / -0.02em / 1.1  — page titles, section titles */
  --t-h1-size:  48px;
  --t-h1-w:     600; /* @kind font */
  --t-h1-track: -0.02em; /* @kind font */
  --t-h1-lh:    1.1; /* @kind font */

  /* H2 36 / 600 / -0.015em / 1.15 — subsection titles */
  --t-h2-size:  36px;
  --t-h2-w:     600; /* @kind font */
  --t-h2-track: -0.015em; /* @kind font */
  --t-h2-lh:    1.15; /* @kind font */

  /* H3 28 / 500 / -0.01em / 1.25 — card titles, panel headers */
  --t-h3-size:  28px;
  --t-h3-w:     500; /* @kind font */
  --t-h3-track: -0.01em; /* @kind font */
  --t-h3-lh:    1.25; /* @kind font */

  /* Body Large 18 / 400 / 1.55 — primary body copy */
  --t-body-lg-size: 18px;
  --t-body-lg-lh:   1.55; /* @kind font */

  /* Body 16 / 400 / 1.55 — standard body */
  --t-body-size:  16px;
  --t-body-w:     400; /* @kind font */
  --t-body-lh:    1.55; /* @kind font */

  /* Small 14 / 400 — metadata, captions, timestamps */
  --t-small-size: 14px;
  --t-small-lh:   1.5; /* @kind font */

  /* Micro 12 / 400 — labels, badges */
  --t-micro-size: 12px;
  --t-micro-lh:   1.4; /* @kind font */

  /* Mono 14 / 500 / 0.02em — terminal output, code, chrome */
  --t-mono-size:  14px;
  --t-mono-w:     500; /* @kind font */
  --t-mono-track: 0.02em; /* @kind font */

  /* Eyebrow 11 / 500 / 0.08em uppercase — section labels */
  --t-eyebrow-size:  11px;
  --t-eyebrow-w:     500; /* @kind font */
  --t-eyebrow-track: 0.08em; /* @kind font */

  /* ---------------- Presentation scale (1920×1080, BRAND.md §3) --- */
  --t-slide-title:    64px;
  --t-slide-subtitle: 44px;
  --t-slide-body:     34px;
  --t-slide-small:    28px;

  /* ---------------- Spacing (4px base) ---------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------------- Radii ----------------------------------------- */
  --r-1: 4px;   /* chips, micro-buttons */
  --r-2: 6px;   /* buttons, inputs */
  --r-3: 8px;   /* email CTA, small surfaces */
  --r-4: 10px;  /* cards (the standard) */
  --r-5: 14px;  /* large modules */
  --r-6: 18px;  /* hero panels */
  --r-pill: 999px;

  /* ---------------- Shadows + glow -------------------------------- */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.02), 0 0 0 1px var(--border-1);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.40), 0 0 0 1px var(--border-1);
  --shadow-3: 0 12px 40px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-glow: 0 0 0 3px rgba(74, 222, 128, 0.10);

  /* ---------------- Motion ---------------------------------------- */
  --ease-std: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-1:    120ms; /* @kind other */
  --dur-2:    200ms; /* @kind other */
  --dur-3:    320ms; /* @kind other */
}

/* ---------------- Light theme (BRAND.md §2.3 — secondary) ---------- */
[data-theme="light"] {
  /* Neutral zinc, not slate. The dark-theme rule "no slate anywhere" holds here too. */
  --bg-0:     #F4F4F5;
  --bg-1:     #FFFFFF;
  --bg-2:     #FAFAFA;
  --bg-3:     #F4F4F5;
  --border-1: #E4E4E7;
  --border-2: #D4D4D8;
  --fg-1:     #0A0A0A;
  --fg-2:     #52525B;
  --fg-3:     #71717A;
  --fg-4:     #A1A1AA;
  --shadow-2: 0 4px 14px rgba(10,10,10,0.06), 0 0 0 1px var(--border-1);
  --shadow-3: 0 12px 40px rgba(10,10,10,0.10), 0 0 0 1px rgba(10,10,10,0.04);
}

/* ---------------- Base elements ------------------------------------ */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  font-feature-settings: var(--font-features);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------- Semantic type — drop-in classes ------------------ */
.t-display { font-size: var(--t-display-size); font-weight: var(--t-display-w); letter-spacing: var(--t-display-track); line-height: var(--t-display-lh); }
.t-display em { font-style: normal; color: var(--fg-3); }

.t-h1 { font-size: var(--t-h1-size); font-weight: var(--t-h1-w); letter-spacing: var(--t-h1-track); line-height: var(--t-h1-lh); }
.t-h2 { font-size: var(--t-h2-size); font-weight: var(--t-h2-w); letter-spacing: var(--t-h2-track); line-height: var(--t-h2-lh); }
.t-h3 { font-size: var(--t-h3-size); font-weight: var(--t-h3-w); letter-spacing: var(--t-h3-track); line-height: var(--t-h3-lh); }

.t-body-lg { font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); color: var(--fg-1); }
.t-body    { font-size: var(--t-body-size);    line-height: var(--t-body-lh);    color: var(--fg-1); }
.t-small   { font-size: var(--t-small-size);   line-height: var(--t-small-lh);   color: var(--fg-2); }
.t-micro   { font-size: var(--t-micro-size);   line-height: var(--t-micro-lh);   color: var(--fg-3); }

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono-size);
  font-weight: var(--t-mono-w);
  letter-spacing: var(--t-mono-track);
  color: var(--fg-2);
}
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow-size);
  font-weight: var(--t-eyebrow-w);
  letter-spacing: var(--t-eyebrow-track);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* The brand wordmark is ALWAYS lowercase. Don't text-transform "vreko". */
.t-brand { color: var(--vk-green); font-weight: 500; }

/* ---------------- The gecko glyph ▰●▸ ------------------------------ */
/* The terminal-native brand mark. Watching · present · ready.
   Appears in CLI ceremony, status bars, email accents, pull quotes.
   Three characters, never separated, never reordered. */
.vk-glyph {
  font-family: var(--font-mono);
  color: var(--vk-green);
  letter-spacing: 0.05em;
  white-space: nowrap;
  font-variant-ligatures: none;
}

/* ---------------- Status pip (the green dot) ----------------------- */
.vk-pip {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--vk-green);
  box-shadow: var(--shadow-glow);
  vertical-align: 1px;
}
.vk-pip[data-state="warn"]    { background: var(--color-warn); }
.vk-pip[data-state="danger"]  { background: var(--color-danger); }
.vk-pip[data-state="idle"]    { background: var(--fg-3); box-shadow: none; }

/* ---------------- Selection ---------------------------------------- */
::selection { background: rgba(74, 222, 128, 0.25); color: var(--fg-1); }