/*
 * oddly brand stylesheet. Single source of truth for colour, typography,
 * and primitive components across every public and authenticated surface.
 * Pages link to this file with <link rel="stylesheet" href="/shared/oddly-brand.css">.
 *
 * The system: a small set of CSS custom properties drives the look,
 * primitive utility classes (.btn, .card, .container) carry the components,
 * and dark mode flips a handful of variables when @media (prefers-color-scheme: dark).
 *
 * Constraints from the brand guide:
 *   - "oddly" is always lowercase.
 *   - Inter from Google Fonts.
 *   - Violet primary (#7c3aed); accent (#a78bfa). Off-white background.
 *   - Data colours (green positive, red negative) are NOT brand and stay
 *     stable across light/dark.
 */

/* ---------- Tokens ---------- */
:root {
  /* Brand colours */
  --brand:           #7c3aed;
  --brand-hover:     #6d28d9;
  --accent:          #a78bfa;
  --accent-soft:     #ede9fe;

  /* Surface */
  --bg:              #fafaf9;
  --surface:         #ffffff;
  --surface-2:       #f4f4f5;
  --border:          #e4e4e7;
  --border-strong:   #d4d4d8;

  /* Text */
  --ink:             #18181b;
  --ink-soft:        #3f3f46;
  --ink-mute:        #71717a;
  --ink-on-brand:    #ffffff;

  /* Data colours (semantic, not brand) */
  --pos:             #16a34a;
  --pos-soft:        #dcfce7;
  --neg:             #dc2626;
  --neg-soft:        #fee2e2;
  --warn:            #d97706;
  --warn-soft:       #fef3c7;

  /* Type */
  --font-sans:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-12:           12px;
  --fs-13:           13px;
  --fs-14:           14px;
  --fs-15:           15px;
  --fs-16:           16px;
  --fs-18:           18px;
  --fs-20:           20px;
  --fs-24:           24px;
  --fs-28:           28px;
  --fs-32:           32px;
  --fs-40:           40px;
  --fs-48:           48px;
  --fs-60:           60px;
  --lh-tight:        1.15;
  --lh-snug:         1.4;
  --lh-normal:       1.55;
  --lh-loose:        1.7;
  --tracking-tight:  -0.02em;
  --tracking-tighter:-0.04em;

  /* Space */
  --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;

  /* Radius + shadow */
  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill: 999px;
  --shadow-sm:  0 1px 2px rgba(24,24,27,0.04);
  --shadow:     0 1px 2px rgba(24,24,27,0.04), 0 6px 18px rgba(24,24,27,0.05);
  --shadow-lg:  0 4px 14px rgba(24,24,27,0.06), 0 12px 30px rgba(24,24,27,0.08);
  --shadow-brand: 0 8px 30px rgba(124,58,237,0.18);

  /* Layout */
  --container-max: 1080px;
  --container-pad: 22px;
}

/* Dark mode: invert surfaces, keep brand violet, swap text. */
@media (prefers-color-scheme: dark) {
  :root.theme-system, :root:not(.theme-light) {
    --bg:              #0e0e10;
    --surface:         #17171b;
    --surface-2:       #202024;
    --border:          #2a2a30;
    --border-strong:   #36363e;
    --ink:             #fafaf9;
    --ink-soft:        #d4d4d8;
    --ink-mute:        #a1a1aa;
    --accent-soft:     rgba(167,139,250,0.16);
    --shadow:          0 1px 2px rgba(0,0,0,0.4), 0 6px 18px rgba(0,0,0,0.35);
    --shadow-lg:       0 4px 14px rgba(0,0,0,0.4), 0 12px 30px rgba(0,0,0,0.5);
  }
}
:root.theme-dark {
  --bg:              #0e0e10;
  --surface:         #17171b;
  --surface-2:       #202024;
  --border:          #2a2a30;
  --border-strong:   #36363e;
  --ink:             #fafaf9;
  --ink-soft:        #d4d4d8;
  --ink-mute:        #a1a1aa;
  --accent-soft:     rgba(167,139,250,0.16);
}

/* ---------- Reset + base ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01", "cv11";
}
img, svg { max-width: 100%; display: block; }
a {
  color: var(--brand);
  text-decoration: none;
  transition: color 120ms ease;
}
a:hover { color: var(--brand-hover); text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--ink); }
h1 { font-size: clamp(36px, 6vw, var(--fs-60)); font-weight: 800; letter-spacing: var(--tracking-tighter); }
h2 { font-size: clamp(26px, 4vw, var(--fs-40)); font-weight: 700; }
h3 { font-size: var(--fs-18); font-weight: 600; }
p  { margin: 0; }

.muted   { color: var(--ink-mute); }
.subline { font-size: var(--fs-13); color: var(--ink-mute); }

/* ---------- Layout ---------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.section {
  padding: var(--sp-20) 0;
}
@media (min-width: 768px) { .section { padding: var(--sp-24) 0; } }

.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 880px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack    > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-8); }

/* ---------- Logo / wordmark ---------- */
.oddly-mark {
  font-weight: 600;
  font-size: 22px;
  letter-spacing: var(--tracking-tighter);
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  text-decoration: none;
}
.oddly-mark .o { color: var(--brand); }
.oddly-mark:hover { text-decoration: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 11px 18px;
  font-family: inherit;
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-lg { padding: 13px 22px; font-size: var(--fs-15); }
.btn-sm { padding: 8px 14px; font-size: var(--fs-13); }

.btn-primary {
  background: var(--brand);
  color: var(--ink-on-brand);
  border-color: var(--brand);
}
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--ink-on-brand); }

.btn-secondary {
  background: var(--surface);
  color: var(--brand);
  border-color: var(--brand);
}
.btn-secondary:hover { background: var(--accent-soft); color: var(--brand-hover); border-color: var(--brand-hover); }

.btn-ghost {
  background: transparent;
  color: var(--brand);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--accent-soft); color: var(--brand-hover); }

.btn-ink {
  background: var(--ink);
  color: var(--ink-on-brand);
  border-color: var(--ink);
}
.btn-ink:hover { background: var(--ink-soft); border-color: var(--ink-soft); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.card-elev { box-shadow: var(--shadow); }
.card-feature {
  border: 2px solid var(--brand);
  box-shadow: var(--shadow-brand);
}

/* ---------- Forms ---------- */
.field {
  display: block;
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: var(--sp-2);
}
.input, .textarea, .select {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: var(--fs-14);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input:focus, .textarea:focus, .select:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---------- Tags / badges ---------- */
.tag {
  display: inline-block;
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--brand);
}
.tag-pos  { background: var(--pos-soft);  color: var(--pos); }
.tag-neg  { background: var(--neg-soft);  color: var(--neg); }
.tag-warn { background: var(--warn-soft); color: var(--warn); }

/* ---------- Top nav (sticky, glassy) ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px var(--container-pad);
  max-width: var(--container-max);
  margin: 0 auto;
}
.nav-links {
  display: none;
  gap: var(--sp-6);
  align-items: center;
  font-size: var(--fs-14);
  font-weight: 500;
}
.nav-links a { color: var(--ink-soft); }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
@media (min-width: 768px) { .nav-links { display: flex; } }

/* Authenticated topbar (dashboard, portal). Dense, no glass effect. */
.topbar {
  background: var(--ink);
  color: var(--ink-on-brand);
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.topbar h1 { color: var(--ink-on-brand); margin: 0; font-size: var(--fs-16); font-weight: 700; letter-spacing: var(--tracking-tight); display: inline-flex; align-items: baseline; gap: 2px; }
.topbar h1 .o { color: var(--accent); }
.topbar h1 .sub { color: rgba(255,255,255,0.55); margin-left: 8px; font-weight: 500; font-size: var(--fs-13); }
.topbar .brand { font-size: var(--fs-12); color: rgba(255,255,255,0.55); margin-top: 2px; font-weight: 500; }

.tabs {
  display: flex;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 6px;
  overflow-x: auto;
}
.tabs a {
  padding: 12px 14px;
  text-decoration: none;
  color: var(--ink-mute);
  font-size: var(--fs-14);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tabs a:hover { color: var(--ink); }
.tabs a.active {
  color: var(--ink);
  border-bottom-color: var(--brand);
}

/* ---------- Misc ---------- */
.eyebrow {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--surface);
}
.kicker {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--brand);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.divider { height: 1px; background: var(--border); margin: var(--sp-8) 0; }
.empty {
  padding: 30px 16px;
  text-align: center;
  color: var(--ink-mute);
  font-size: var(--fs-14);
}
.error {
  padding: 14px 16px;
  background: var(--neg-soft);
  color: var(--neg);
  border-radius: var(--radius);
  font-size: var(--fs-14);
}

/* Subtle violet glow that hero blocks can lean on. Apply with .glow-bg. */
.glow-bg {
  position: relative;
  isolation: isolate;
}
.glow-bg::before {
  content: "";
  position: absolute;
  inset: -10% -20% auto -20%;
  height: 70%;
  background: radial-gradient(60% 60% at 50% 30%, rgba(167,139,250,0.32), rgba(167,139,250,0) 70%);
  z-index: -1;
  pointer-events: none;
}

/* Reveal-on-scroll hook (consumers add the .reveal class and an IO observer). */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}