/* ============================================================
   VE Design Tokens — light-first
   Drop-in for any agent-built page. Import BEFORE your own CSS.

   Rule: components read var(--token). Never hardcode a hex
   outside this file. If a value is missing, add a token here —
   do not inline it at the call site.
   ============================================================ */

:root {
  /* ---- Surfaces (light-first; never dark by default) ---- */
  --surface-page:    #f7f4ef;  /* page background — warm paper */
  --surface-panel:   #fffdf9;  /* cards, panels, raised areas */
  --surface-sunken:  #efeae1;  /* wells, code blocks, insets */
  --surface-nav:     #0f2c30;  /* deep header band (text on it is light) */

  /* ---- Ink (text) ---- */
  --ink:        #1a2332;  /* body + headings */
  --ink-soft:   #3d4a5c;  /* secondary text */
  --ink-muted:  #5c6b7a;  /* captions, meta, timestamps */
  --ink-on-dark:#f7f4ef;  /* text placed on --surface-nav */

  /* ---- Lines ---- */
  --line:        #d8d0c4;  /* default borders, dividers */
  --line-strong: #b9ae9d;  /* emphasis borders, table rules */

  /* ---- Brand accent ------------------------------------------------
     Deep teal. Measured against the surfaces below (WCAG 2.1):
       --accent on --surface-panel ....... 5.95:1  (AA body text)
       --accent on --surface-page ........ 5.51:1  (AA body text)
       --accent-ink on --accent .......... 6.05:1  (AA button labels)
       --accent-hover on --surface-panel . 8.22:1
       --ink on --accent-soft ............ 13.74:1
     Deliberately not darker: #084f4f scores 9.22:1 but reads as near-black
     and loses brand character. Neutral enough to use on client properties
     without reading as VE Lab branding.
     ------------------------------------------------------------------ */
  --accent:       #0d6e6e;  /* links, focus rings, active nav, heading bars */
  --accent-hover: #0a5757;  /* hover / pressed */
  --accent-soft:  #e4f2f2;  /* callout + highlight panel background */
  --accent-ink:   #ffffff;  /* text ON --accent (filled buttons) */

  /* ---- Semantic status (fixed; do not rebrand these) ---- */
  --ok:        #1f6b45;
  --ok-soft:   #e6f3eb;
  --warn:      #8a5a12;
  --warn-soft: #f5ecdb;
  --danger:      #a32020;
  --danger-soft: #f8e6e6;

  /* ---- Type ---- */
  --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* Type scale — 1.200 minor third, 16px base */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.35rem;
  --text-2xl:  1.62rem;
  --text-3xl:  1.95rem;
  --leading-tight: 1.25;
  --leading-body:  1.6;

  /* ---- Spacing — 4px base ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* ---- Shape & depth ---- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(26, 35, 50, 0.06);
  --shadow:    0 2px 8px rgba(26, 35, 50, 0.08);

  /* ---- Layout ---- */
  --measure: 68ch;      /* max line length for readable prose */
  --container: 920px;
}

/* ============================================================
   Dark: OPT-IN ONLY.
   Deliberately NOT wired to prefers-color-scheme — reports and
   dashboards must stay light regardless of OS setting.
   Use ONLY for products whose art direction is dark by design,
   by putting data-theme="dark" on a root element. Ask first.
   ============================================================ */
[data-theme="dark"] {
  --surface-page:   #0f1216;
  --surface-panel:  #161a20;
  --surface-sunken: #1e232b;
  --ink:            #eceff3;
  --ink-soft:       #c2c9d2;
  --ink-muted:      #8d97a3;
  --line:           #2a3038;
  --line-strong:    #3d4650;
}

/* ============================================================
   Baseline — the four things agents forget every time
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  color: var(--ink);
}

p, li { max-width: var(--measure); }

/* 1. Visible keyboard focus — non-negotiable, never remove */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 2. Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 3. Media never overflows its container */
img, svg, video, canvas { max-width: 100%; height: auto; }

/* 4. Wide content scrolls itself; the page body never scrolls sideways */
.scroll-x { overflow-x: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  :root { --text-3xl: 1.6rem; --text-2xl: 1.4rem; --space-12: 2rem; }
}