/* ============================================================
   LOMA — Design tokens (single source of truth)
   One green accent · Adaptive Dune neutrals · two surfaces
   ============================================================ */

:root {
  /* — Accent (Luminous Green) — */
  --accent: #10B981;
  --accent-deep: #047857;
  --accent-bright: #6EE7B7;
  --accent-soft: rgba(16, 185, 129, 0.14);
  --accent-muted: rgba(16, 185, 129, 0.22);
  --accent-glow: rgba(16, 185, 129, 0.08);
  --accent-ring: rgba(16, 185, 129, 0.3);
  --accent-tint: #F0FDF8;
  --accent-tint-warm: rgba(16, 185, 129, 0.06);

  /* Deprecated aliases — migrate callers to --accent* */
  --lum: var(--accent);
  --lum-soft: var(--accent-muted);
  --lum-glow: var(--accent-glow);
  --luminous: var(--accent);
  --terracotta: var(--accent);
  --terracotta-deep: var(--accent-deep);
  --emerald: var(--accent-deep);

  /* — Adaptive Dune — */
  --dune-50: #F5EFE8;
  --dune-100: #E8DDD0;
  --dune-200: #D4C5B9;
  --dune-300: #B8A593;
  --dune-ink: #2A2520;

  /* — Graphite surfaces — */
  --graphite-900: #0E1012;
  --graphite-800: #14171A;
  --graphite-700: #1A1D20;
  --graphite-600: #222428;
  --graphite: #1A1D20;
  --graphite-soft: #2C2F33;
  --surface-dark: var(--graphite-800);
  --surface-dark-deep: var(--graphite-900);
  --surface-phone: #0A0C0E;

  /* — Light surfaces — */
  --paper: #FFFFFF;
  --paper-warm: #FAFAF8;
  --sand: #F5F2EC;
  --surface-light: var(--paper);
  --surface-light-warm: #FAF9F7;
  --surface-light-muted: #F4F2EE;
  --surface-raised: var(--paper-warm);
  --app-canvas: var(--dune-50);

  /* — Borders & hairlines — */
  --hairline: #ECEAE6;
  --hairline-dark: #DDDAD3;
  --app-border: var(--hairline);
  --border-light: color-mix(in srgb, var(--dune-300) 24%, transparent);
  --border-dark: rgba(255, 255, 255, 0.06);
  --border-accent: rgba(16, 185, 129, 0.28);

  /* — Text (Dune on light, Dune on dark) — */
  --dune-body: #6E6459;
  --ink: var(--dune-ink);
  --text-on-light: var(--dune-ink);
  --text-on-light-body: var(--dune-body);
  --text-on-light-muted: var(--dune-300);
  --text-on-dark: var(--dune-100);
  --text-on-dark-muted: var(--dune-300);
  --brand-on-dark: var(--dune-100);
  --brand-muted-on-dark: var(--dune-200);
  --text-on-dark-strong: var(--dune-100);
  --text-on-dark-soft: color-mix(in srgb, var(--dune-200) 88%, transparent);
  --text-on-dark-faint: color-mix(in srgb, var(--dune-300) 72%, transparent);
  --slate: var(--dune-body);
  --slate-dim: var(--dune-300);

  /* — Legacy compare UI (desaturated, intentional) — */
  --legacy-surface: #F8FAFC;
  --legacy-surface-deep: #EEF2F6;
  --legacy-panel: #F1F5F9;
  --legacy-text: #64748B;
  --legacy-text-dim: #94A3B8;
  --legacy-ink: #475569;
  --legacy-stroke: #334155;

  /* — Typography — */
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: var(--font-sans);
  --mono: var(--font-mono);

  /* — Motion & layout — */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --w: 1200px;
}

/* — Light surfaces: same Dune family as dark sections — */
body {
  color: var(--text-on-light-body);
}

section.feature:not(.feature--dark),
.scene-section.feature:not(.feature--dark) {
  background: var(--sand);
  color: var(--text-on-light-body);
}

section.feature:not(.feature--dark) .f-head h2,
.scene-section.feature:not(.feature--dark) .f-head h2 {
  color: var(--text-on-light);
}

section.feature:not(.feature--dark) .log-point h3,
section.feature:not(.feature--dark) .t-card h3,
.scene-section.feature:not(.feature--dark) .log-point h3 {
  color: var(--text-on-light);
}

section.feature:not(.feature--dark) .f-head h2 .alt,
.scene-section.feature:not(.feature--dark) .f-head h2 .alt {
  color: var(--text-on-light-muted);
}

.mast.scrolled {
  background: var(--graphite);
}

.mast .wordmark { color: var(--dune-100); }
.mast .nav-links a { color: var(--dune-300); }
.mast .nav-links a:hover { color: var(--dune-100); }

.mast.scrolled .wordmark { color: var(--dune-100); }
.mast.scrolled .nav-links a { color: var(--dune-300); }
.mast.scrolled .nav-links a:hover { color: var(--dune-100); }