/* ============================================================
   Viktoo Alpha — Design Tokens
   Source of truth: /home/claude/viktoo-mvp/DESIGN_SYSTEM.md v1.0
   (frozen alongside Core Engine v1.2.0)

   This file translates the locked color/typography tokens into
   real CSS variables for the standalone app. The Visualizer
   snapshots (tests/snapshots/*.html) used var(--color-*) names
   provided by the chat host — here we DEFINE those names with
   the actual hex values from DESIGN_SYSTEM.md §1.

   Alpha is LIGHT MODE ONLY (dark mode deferred — not part of
   the 24h alpha test scope).
   ============================================================ */

:root {
  /* ---- Brand tokens (DESIGN_SYSTEM.md §1 Color Tokens table) ---- */
  --viktoo-primary: #0D1B2A;       /* Trust, technology, seriousness — main UI ink */
  --viktoo-accent: #F7931A;        /* Energy, exploration, CTAs (dog-glasses orange) */
  --viktoo-success: #22C55E;       /* Rule passed, survivor, "what Viktoo knows" */
  --viktoo-borderline: #F59E0B;    /* Warning — Threshold + Value borderline */
  --viktoo-elimination: #EF4444;   /* Product eliminated, required deal breaker failed */
  --viktoo-paper: #F5F1E8;         /* Decision Preview / editorial screens page bg */

  /* ---- Text colors ---- */
  --color-text-primary: var(--viktoo-primary);
  --color-text-secondary: #4B5A6B;   /* derived: primary at ~70% for body/secondary text */
  --color-text-tertiary: #8A96A3;    /* derived: primary at ~45% for hints/eyebrows */
  --color-text-success: #15803D;     /* darker than --viktoo-success for AA contrast on light bg */
  --color-text-warning: #B45309;     /* darker than --viktoo-borderline for AA contrast */
  --color-text-danger: #B91C1C;      /* darker than --viktoo-elimination for AA contrast */
  --color-text-info: #1D4ED8;        /* Mode C / framework blue, AA on light bg */

  /* ---- Background colors ---- */
  --color-background-primary: #FFFFFF;     /* cards */
  --color-background-secondary: #EDE9DF;   /* track fills, secondary surfaces (derived from paper) */
  --color-background-tertiary: var(--viktoo-paper); /* page background */
  --color-background-success: #DCFCE7;
  --color-background-warning: #FEF3C7;
  --color-background-danger: #FEE2E2;
  --color-background-info: #DBEAFE;

  /* ---- Border colors ---- */
  --color-border-tertiary: rgba(13, 27, 42, 0.12);
  --color-border-secondary: rgba(13, 27, 42, 0.24);
  --color-border-primary: rgba(13, 27, 42, 0.32);
  --color-border-info: #93C5FD;
  --color-border-danger: #FCA5A5;
  --color-border-success: #86EFAC;
  --color-border-warning: #FCD34D;

  /* ---- Typography (DESIGN_SYSTEM.md: serif for editorial, mono for labels/data) ---- */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
  --font-sans: -apple-system, "Segoe UI", Roboto, sans-serif; /* fallback for UI chrome only */

  /* ---- Layout ---- */
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-serif);
  background: var(--color-background-tertiary);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

@media (min-width: 720px) {
  #app {
    padding: 40px 24px 80px;
  }
}

button {
  font-family: inherit;
}

/* ---- Shared component classes used across screens ---- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 8px;
}

.card {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 24px;
}

.card-list {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  padding: 4px 1.25rem;
  margin-bottom: 24px;
}

.card-list .row {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}

.card-list .row:last-child {
  border-bottom: none;
}

.pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--border-radius-md);
}

.btn-primary {
  width: 100%;
  padding: 14px;
  border-radius: var(--border-radius-md);
  border: none;
  background: var(--color-text-primary);
  color: #FFFFFF;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.btn-primary:hover {
  background: #16283D;
}

.btn-secondary {
  width: 100%;
  padding: 12px;
  border-radius: var(--border-radius-md);
  border: 0.5px solid var(--color-border-tertiary);
  background: var(--color-background-primary);
  color: var(--color-text-secondary);
  font-family: var(--font-serif);
  font-size: 13px;
  cursor: pointer;
  margin-top: 10px;
}

.btn-secondary:hover {
  background: var(--color-background-secondary);
}

.btn-path {
  padding: 14px;
  border-radius: var(--border-radius-md);
  border: 2px solid var(--color-border-info);
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.btn-path:hover {
  background: var(--color-background-info);
}

.weight-bar-track {
  flex: 1;
  height: 6px;
  background: var(--color-background-secondary);
  border-radius: 3px;
  overflow: hidden;
}

.weight-bar-fill {
  height: 100%;
  background: var(--color-text-info);
  border-radius: 3px;
}

.confidence-bar-track {
  position: relative;
  height: 8px;
  background: var(--color-background-secondary);
  border-radius: 4px;
  margin-bottom: 8px;
}

.confidence-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--color-text-success);
  border-radius: 4px;
}

.warning-banner {
  background: var(--color-background-warning);
  border-radius: var(--border-radius-md) var(--border-radius-md) var(--border-radius-md) 0;
  padding: 12px 16px;
  margin-bottom: 24px;
  border-left: 3px solid var(--color-text-warning);
}

table.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

table.compare th,
table.compare td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}

table.compare th {
  font-weight: 500;
}

/* ---- Progress / step indicator (alpha-only navigation aid, not in
   DESIGN_SYSTEM.md — added for the 24h test so users can see where
   they are in the flow; flag this in feedback if it feels intrusive) ---- */
.alpha-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
}

.alpha-progress .step {
  flex: 1;
  height: 3px;
  background: var(--color-border-tertiary);
  border-radius: 2px;
}

.alpha-progress .step.done {
  background: var(--color-text-info);
}

.alpha-progress .step.active {
  background: var(--viktoo-accent);
}

/* ---- Alpha feedback widget (persistent corner button) ---- */
#alpha-feedback-btn {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 100;
  background: var(--viktoo-accent);
  color: #FFFFFF;
  border: none;
  border-radius: var(--border-radius-lg);
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(13, 27, 42, 0.2);
}

#alpha-banner {
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  padding: 6px 12px;
  background: var(--viktoo-primary);
  color: #FFFFFF;
  letter-spacing: 0.05em;
}