/* Vividish design tokens */
:root {
  /* Vividish — terracotta & navy, white everywhere */
  --bg: #FFFFFF;
  --paper: #FFFFFF;         /* same as bg — true white */
  --paper-2: #F6F1E7;        /* subtle cream used only for inline chips/thumbnails */
  --surface-strong: #17224A;
  --ink: #17224A;           /* deep navy (not black) */
  --ink-2: #2A3A6B;
  --muted: #737A94;
  --muted-2: #B5BBCC;
  --line: #E6E3DB;
  --line-2: #D2CCBC;
  --accent: #C7552D;         /* terracotta — primary */
  --accent-fill: #C7552D;
  --accent-fill-hover: #B94D27;
  --accent-ink: #A3421F;
  --accent-soft: #F7D9CA;
  --accent-wash: #FBEDE4;
  --accent-2: #1B2C5C;        /* navy blue — secondary */
  --accent-2-soft: #D6DCEA;
  --accent-2-wash: #EAEEF6;
  --accent-3: #E8B14B;        /* soft ochre highlight */
  --accent-3-soft: #F7E3B4;
  --accent-3-wash: #FCF3DC;
  --accent-4: #1B2C5C;        /* navy — AI */
  --accent-4-soft: #D6DCEA;
  --accent-4-wash: #EAEEF6;
  --accent-5: #C7552D;
  /* Fixed tokens — stay the same color in BOTH themes (for CTAs/heroes that must read consistently) */
  --ink-fixed: #17224A;        /* always deep navy */
  --ink-fixed-on: #FFFFFF;     /* always white (text on ink-fixed) */
  --ok: #2F7A55;
  --warn: #D08A1A;
  --danger: #B83030;
  --shadow-sm: 0 1px 2px rgba(14,14,13,0.04), 0 1px 1px rgba(14,14,13,0.03);
  --shadow-md: 0 4px 14px rgba(14,14,13,0.06), 0 1px 3px rgba(14,14,13,0.04);
  --shadow-lg: 0 20px 50px rgba(14,14,13,0.10), 0 4px 12px rgba(14,14,13,0.05);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
}
.dark, [data-theme="dark"] {
  /* Background stack — darker base, lighter cards, so elevation reads */
  --bg: #070B1C;            /* almost-black navy — the canvas */
  --paper: #131936;          /* cards lift clearly off the canvas */
  --paper-2: #1C2348;        /* chips, nested surfaces */
  --surface-strong: #1C2348;
  /* Text — bright whites for hierarchy, not dusty cream */
  --ink: #FFFFFF;            /* pure white — primary text and numbers pop */
  --ink-2: #E7EAF5;
  --muted: #8892B4;
  --muted-2: #4C547A;
  /* Lines — visible enough to define cards without looking crispy */
  --line: #252C54;
  --line-2: #323A68;
  /* Terracotta — luminous, not muddy. Real accent that sings on dark. */
  --accent: #FF7A4D;
  --accent-fill: #FF6A3A;
  --accent-fill-hover: #FF8558;
  --accent-ink: #FFB594;
  --accent-soft: #4A1D10;
  --accent-wash: #2D1108;
  /* Secondary accents — readable, not washed out */
  --accent-2: #9FB4F0;
  --accent-2-soft: #1F2A55;
  --accent-2-wash: #151C3B;
  --accent-3: #FFD27A;
  --accent-3-soft: #4A3512;
  --accent-3-wash: #2C1F08;
  --accent-4: #9FB4F0;
  --accent-4-soft: #1F2A55;
  --accent-4-wash: #151C3B;
  --accent-5: #FF7A4D;
  /* Fixed tokens — in dark mode, lift to paper-2 navy so CTAs still read as a dark block with white text */
  --ink-fixed: #1C2348;
  --ink-fixed-on: #FFFFFF;
  /* Status — brighter so they register at a glance */
  --ok: #5FD99C;
  --warn: #FFC66B;
  --danger: #FF7B7B;
  /* Shadows + glow — a terracotta-tinted aura on lifted/accent surfaces */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.02);
  --shadow-lg: 0 28px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
  --glow-accent: 0 0 0 1px rgba(255,122,77,0.25), 0 8px 32px rgba(255,122,77,0.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.serif { font-family: 'Bricolage Grotesque', 'Geist', sans-serif; font-weight: 800 !important; letter-spacing: -0.035em; font-variation-settings: 'opsz' 72, 'wdth' 100; }
.serif em, .italic { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400 !important; letter-spacing: 0; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

button, select { color: inherit; }
button { font-family: inherit; }
a { color: inherit; }
::selection { background: var(--accent); color: white; }

/* Reusable primitives */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font-weight: 500; font-size: 14px;
  cursor: pointer; transition: all .15s ease;
}
.btn:hover { border-color: var(--ink-2); }
.btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-primary:hover { filter: brightness(1.1); }
.dark .btn-primary { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
.dark .btn-primary:hover { background: var(--paper-2); filter: none; }
.btn-brand { background: var(--ink); color: white; border: 0; }
.btn-brand:hover { filter: brightness(1.08); }
.btn-accent { background: var(--accent-fill); color: white; border-color: var(--accent-fill); }
.btn-accent:hover { filter: brightness(.95); }
.dark .btn-accent {
  background: var(--accent-fill); border-color: var(--accent-fill);
  box-shadow: 0 6px 20px rgba(255,122,77,0.28);
}
.dark .btn-accent:hover {
  background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); filter: none;
  box-shadow: 0 8px 26px rgba(255,122,77,0.38);
}
.btn-ai { background: var(--accent-4-soft); color: var(--accent-4); border-color: transparent; }
.btn-ai:hover { filter: brightness(1.03); }
.dark .btn-ai { background: color-mix(in oklch, var(--accent-4-soft), white 8%); color: var(--ink); border-color: color-mix(in oklch, var(--accent-4), transparent 72%); }
.dark .btn-ai:hover { background: color-mix(in oklch, var(--accent-4-soft), white 14%); border-color: color-mix(in oklch, var(--accent-4), transparent 62%); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--paper); }

.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); }
.card-paper { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); }
/* In dark mode: cards lift off the darker canvas using --paper, not --bg */
.dark .card { background: var(--paper); border-color: var(--line); }
.dark .card-paper { background: var(--paper-2); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); }
.chip-accent { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.chip-ok { background: color-mix(in oklch, var(--ok), white 80%); color: var(--ok); border-color: transparent; }
.dark .chip-ok { background: color-mix(in oklch, var(--ok), black 70%); }

.dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); display: inline-block; }

input, textarea, select {
  font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; outline: none; transition: border .15s ease;
}
input:focus, textarea:focus, select:focus { border-color: var(--ink); }

.scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
.scrollbar::-webkit-scrollbar-track { background: transparent; }

/* Logo mark */
.vv-mark { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -0.02em; }
.vv-mark .glyph { width: 22px; height: 22px; border-radius: 7px; background: var(--accent); position: relative; display: grid; place-items: center; }
.vv-mark .glyph::before { content: ''; width: 8px; height: 8px; background: var(--bg); border-radius: 2px; transform: rotate(45deg); }
.vv-mark .glyph::after { content: ''; position: absolute; inset: 0; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }

/* Common layout helpers */
.stack { display: flex; flex-direction: column; }
.row { display: flex; }
.grow { flex: 1; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; }
.center { display: flex; align-items: center; justify-content: center; }

/* Focus ring */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* Utility text */
.t-eyebrow { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.t-muted { color: var(--muted); }
.t-tabular { font-variant-numeric: tabular-nums; }

/* Active navigation — light mode keeps the paper wash, dark mode lights up */
.nav-active { background: var(--paper); }
.dark .nav-active {
  background: color-mix(in oklch, var(--accent-fill) 18%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
  border-radius: 8px;
}

/* Sidebar — stays white in light mode (unchanged), deepens in dark mode for separation */
.dark .app-sidebar { background: #040814; }

/* Spinner keyframe for inline loaders (e.g. card processing) */
@keyframes vv-spin { to { transform: rotate(360deg); } }