/* Lockd — light theme, TEAL + ORANGE variant (cream base). v1, Oct 2026
   Drop-in replacement for theme-light.css (same token names kept as aliases, so existing markup works).
   Contrast (WCAG 2.x) per token: AA = 4.5:1 normal text, 3:1 large text / UI parts.
   Rules: teal = brand + wins/positive. Orange = CTAs, highlights, LIVE only (never used for results).
          Crimson = losses only. Slate = pending. Every status also carries an icon + word (colorblind-safe). */
:root {
  /* Surfaces (unchanged) */
  --lk-bg:            #FAF6EE; /* page cream */
  --lk-surface:       #FFFFFF; /* cards */
  --lk-surface-2:     #F3EDE1; /* subtle panels, table stripes */
  --lk-border:        #E6DFD2;
  --lk-border-strong: #D4CBBB;

  /* Text (unchanged) */
  --lk-ink:     #14181F; /* 16.5:1 cream, 17.8:1 white */
  --lk-ink-2:   #4A5260; /* 7.3:1 cream */
  --lk-muted:   #5F6673; /* 5.4:1 cream, 5.8:1 white */

  /* Brand — Teal (primary) */
  --lk-teal:        #0E7C86; /* fills, icons, chart lines, big numerals: 4.95:1 white, 4.59:1 cream (AA even as text) */
  --lk-teal-ink:    #0B6670; /* teal TEXT, links, secondary buttons: 6.67:1 white, 6.19:1 cream, 5.72:1 on surface-2; white on it 6.67:1 */
  --lk-teal-hover:  #08535B; /* 8.75:1 white */
  --lk-teal-tint:   #E3F2F3; /* win badge bg (teal-ink on it 5.80:1) */
  --lk-teal-neon:   #3FD0D9; /* teal for dark/ink backgrounds only (9.5:1 on #14181F) */

  /* Brand — Orange (accent: CTAs, highlights, live) */
  --lk-orange:       #E4572E; /* fills, dots, underlines, decorative only: 3.68:1 white, 3.42:1 cream (UI/large only) */
  --lk-orange-btn:   #C2471F; /* CTA button bg: white text on it 4.98:1 */
  --lk-orange-hover: #A83B17; /* hover: white on it 6.4:1 */
  --lk-orange-ink:   #B23F1A; /* orange TEXT (live label, small highlights): 5.80:1 white, 5.38:1 cream */
  --lk-orange-tint:  #FDEEE8; /* live/highlight badge bg (orange-ink on it 5.13:1) */

  /* Status — each paired with icon + label in markup/CSS */
  --lk-win:          var(--lk-teal-ink);   /* ✓ WIN  — 6.67:1 white */
  --lk-win-tint:     var(--lk-teal-tint);
  --lk-loss:         #B3261E;              /* ✕ LOSS — crimson, 6.54:1 white, 6.06:1 cream, 5.58:1 on its tint */
  --lk-loss-tint:    #FBE9E7;
  --lk-pending:      #4A5568;              /* ◷ PENDING — slate, 7.53:1 white, 6.98:1 cream, 6.59:1 on its tint */
  --lk-pending-fill: #8A94A6;
  --lk-pending-tint: #EEF0F3;
  --lk-live:         var(--lk-orange-ink); /* ● LIVE — text 5.80:1; dot uses --lk-orange */

  /* Back-compat aliases so markup written for theme-light.css picks up the new palette */
  --lk-green:       var(--lk-teal);
  --lk-green-ink:   var(--lk-teal-ink);
  --lk-green-hover: var(--lk-teal-hover);
  --lk-green-tint:  var(--lk-teal-tint);
  --lk-green-neon:  var(--lk-teal-neon);

  /* Type */
  --lk-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --lk-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lk-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --lk-fs-xs: 12px; --lk-fs-sm: 14px; --lk-fs-md: 16px; --lk-fs-lg: 20px;
  --lk-fs-xl: 28px; --lk-fs-2xl: 40px; --lk-fs-3xl: 56px;
  --lk-lh-tight: 1.15; --lk-lh-body: 1.55;
  --lk-tabular: tabular-nums;

  /* Spacing (4px grid) */
  --lk-s1: 4px; --lk-s2: 8px; --lk-s3: 12px; --lk-s4: 16px; --lk-s5: 24px;
  --lk-s6: 32px; --lk-s7: 48px; --lk-s8: 64px; --lk-s9: 96px;
  --lk-maxw: 1200px;

  /* Shape & depth */
  --lk-r-sm: 6px; --lk-r-md: 10px; --lk-r-lg: 16px; --lk-r-pill: 999px;
  --lk-shadow-1: 0 1px 2px rgba(20,24,31,.06), 0 1px 1px rgba(20,24,31,.04);
  --lk-shadow-2: 0 6px 24px rgba(20,24,31,.08), 0 2px 6px rgba(20,24,31,.05);
  --lk-ring: 0 0 0 3px rgba(14,124,134,.35);

  /* Ticker */
  --lk-ticker-h: 64px;
  --lk-ticker-bg: var(--lk-surface);
  --lk-ticker-fg: var(--lk-ink);
  --lk-ticker-border: var(--lk-border);
  --lk-ticker-accent: var(--lk-teal-ink);
}

/* Base */
html { background: var(--lk-bg); color: var(--lk-ink); }
body { margin: 0; font: var(--lk-fs-md)/var(--lk-lh-body) var(--lk-font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--lk-font-display); line-height: var(--lk-lh-tight); letter-spacing: -0.02em; }
.lk-num { font-family: var(--lk-font-mono); font-variant-numeric: tabular-nums; }
a { color: var(--lk-teal-ink); }
a:hover { color: var(--lk-teal-hover); }
:focus-visible { outline: none; box-shadow: var(--lk-ring); border-radius: var(--lk-r-sm); }

/* Components */
.lk-card { background: var(--lk-surface); border: 1px solid var(--lk-border); border-radius: var(--lk-r-lg); box-shadow: var(--lk-shadow-1); }
.lk-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius: var(--lk-r-pill); border:0; font-weight:600; cursor:pointer;
  background: var(--lk-orange-btn); color:#fff; font-family: var(--lk-font-body); font-size: var(--lk-fs-sm); text-decoration:none; }   /* primary CTA = orange */
.lk-btn:hover { background: var(--lk-orange-hover); color:#fff; }
.lk-btn--teal { background: var(--lk-teal-ink); color:#fff; }                     /* secondary solid = teal */
.lk-btn--teal:hover { background: var(--lk-teal-hover); }
.lk-btn--ghost { background: transparent; color: var(--lk-ink); border:1px solid var(--lk-border-strong); }
.lk-btn--ghost:hover { background: var(--lk-surface); color: var(--lk-teal-ink); border-color: var(--lk-teal); }

/* Status badges: color + icon + word, so they never rely on hue alone */
.lk-badge { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius: var(--lk-r-pill); font-size: var(--lk-fs-xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase; border:1px solid transparent; }
.lk-badge--win     { background: var(--lk-win-tint);     color: var(--lk-win); }
.lk-badge--loss    { background: var(--lk-loss-tint);    color: var(--lk-loss); }
.lk-badge--pending { background: var(--lk-pending-tint); color: var(--lk-pending); border-style: dashed; border-color: var(--lk-pending-fill); }
.lk-badge--live    { background: var(--lk-orange-tint);  color: var(--lk-orange-ink); }
.lk-badge--win::before     { content: "✓"; font-weight: 800; }
.lk-badge--loss::before    { content: "✕"; font-weight: 800; }
.lk-badge--pending::before { content: "◷"; font-weight: 700; }
.lk-badge--live::before    { content: ""; width:6px; height:6px; border-radius:50%; background: var(--lk-orange); animation: lk-pulse 1.4s infinite; }
@keyframes lk-pulse { 50% { opacity: .25; } }

/* Numbers: sign always shown (+/−) so meaning survives without color */
.lk-pos { color: var(--lk-win); } .lk-neg { color: var(--lk-loss); }
.lk-hl  { background: linear-gradient(transparent 62%, rgba(228,87,46,.28) 62%); }   /* orange marker highlight */
.lk-example { background: var(--lk-pending-tint); color: var(--lk-pending); border:1px dashed var(--lk-pending-fill); }

/* Optional dark ticker variant (ink strip over cream page) */
.lk-ticker--dark { --lk-ticker-bg: var(--lk-ink); --lk-ticker-fg: #F4F1EA; --lk-ticker-border: #262C36; --lk-ticker-accent: var(--lk-teal-neon); }
@media (prefers-reduced-motion: reduce) { .lk-badge--live::before { animation: none; } }