/* ============================================================
   LC2026 — Colours & Type tokens
   Dark-by-default. One tangerine accent. Near-black neutrals.
   ============================================================ */

/* Fonts — loaded from Google Fonts (substituted; see README §Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- NEUTRALS — Bone (light) → Pitch (dark) ---------- */
  --bone-50:   #F7F6F3;   /* softest off-white, page bg in light mode */
  --bone-100:  #EEEDE9;
  --bone-200:  #DDDCD6;
  --ash-200:   #BFBFB9;   /* warm cool-grey */
  --pitch-300: #9A9A95;   /* muted fg on dark */
  --pitch-500: #5C5C58;   /* mid neutral, disabled, captions */
  --pitch-700: #1F1F1D;   /* border on dark */
  --pitch-800: #141413;   /* surface-2 on dark */
  --pitch-850: #0C0C0B;   /* surface on dark */
  --pitch-900: #050505;   /* page bg on dark — NEVER pure #000 */

  /* ---------- ACCENT — Tangerine (one accent only) ---------- */
  --tangerine-50:  #FFE9D6;   /* accent-light for badges / halos */
  --tangerine-400: #FF8A4D;   /* hover on dark */
  --tangerine-500: #FF6A1A;   /* primary — the ONE accent */
  --tangerine-600: #E45200;   /* pressed / hover on light */

  /* ---------- SEMANTIC ---------- */
  --success: #6A8F5E;   /* moss */
  --warning: #C9A24A;   /* dijon */
  --danger:  #B4513A;   /* brick */
  --info:    #5A7D9A;   /* slate blue */

  --success-light: rgba(106,143,94,.15);
  --warning-light: rgba(201,162,74,.15);
  --danger-light:  rgba(180,81,58,.15);
  --info-light:    rgba(90,125,154,.15);
  --accent-light:  rgba(255,106,26,.10);

  /* ---------- RADII ---------- */
  --r-sm:   6px;    /* tight chips, tooltips */
  --r-md:  10px;    /* buttons, inputs */
  --r-lg:  14px;    /* cards, panels */
  --r-xl:  20px;    /* modals, marquee surfaces */
  --r-pill: 999px;  /* pills, avatars */

  /* ---------- SPACING (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10:40px;
  --s-12:48px;
  --s-16:64px;

  /* ---------- TYPE SCALE ---------- */
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base:15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 44px;
  --text-5xl: 60px;

  /* ---------- SHADOWS — used sparingly; borders do the work ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.18);
  --shadow-md: 0 2px 10px rgba(0,0,0,.25);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.45);

  /* ---------- MOTION ---------- */
  --ease:      cubic-bezier(.2,.8,.2,1);
  --dur-fast:  120ms;
  --dur:       200ms;
  --dur-slow:  320ms;

  /* ---------- FONTS ---------- */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ============================================================
     SEMANTIC ALIASES — consumed by components.
     Dark is the default. Use [data-theme="light"] to override.
     ============================================================ */
  --bg:          var(--pitch-900);
  --surface:     var(--pitch-850);
  --surface-2:   var(--pitch-800);
  --border:      var(--pitch-700);
  --text:        #EDEBE3;          /* warm off-white, not bone-50 */
  --text-muted:  var(--pitch-300);
  --accent:      var(--tangerine-500);
  --accent-hover:var(--tangerine-400);
  --accent-dark: var(--tangerine-600);

  /* Chart series — ordered priority */
  --chart-1: var(--tangerine-500);
  --chart-2: var(--pitch-300);
  --chart-3: var(--info);
  --chart-4: var(--tangerine-400);
  --chart-5: var(--ash-200);
  --chart-positive: var(--success);
  --chart-negative: var(--danger);
  --chart-neutral:  var(--pitch-500);
  --chart-grid:  rgba(255,255,255,.06);
  --chart-axis:  var(--pitch-500);
  --chart-tooltip-bg:     var(--pitch-800);
  --chart-tooltip-border: var(--pitch-700);
}

[data-theme="light"] {
  --bg:          var(--bone-50);
  --surface:     #FFFFFF;
  --surface-2:   var(--bone-100);
  --border:      var(--bone-200);
  --text:        var(--pitch-900);
  --text-muted:  var(--pitch-500);
  --accent:      var(--tangerine-500);
  --accent-hover:var(--tangerine-600);
  --accent-dark: var(--tangerine-600);
  --chart-grid:  rgba(0,0,0,.08);
}

/* ============================================================
   MOTION KEYFRAMES — page-level animation primitives
   See SKILL.md §Visual Language §Motion for rules.
   ============================================================ */
@keyframes lc-enter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lc-enter { animation: lc-enter 400ms var(--ease) both; }

.lc-stagger > *:nth-child(1) { animation-delay: 0ms; }
.lc-stagger > *:nth-child(2) { animation-delay: 80ms; }
.lc-stagger > *:nth-child(3) { animation-delay: 160ms; }
.lc-stagger > *:nth-child(4) { animation-delay: 240ms; }
.lc-stagger > *:nth-child(5) { animation-delay: 320ms; }
.lc-stagger > *:nth-child(6) { animation-delay: 400ms; }

@keyframes lc-reveal-bar {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.lc-reveal-bar { transform-origin: bottom; animation: lc-reveal-bar 600ms var(--ease) both; }

.lc-transition { transition: opacity 250ms var(--ease); }

/* Photography grade — matte, warm, desaturated */
.lc-photo {
  filter: saturate(0.82) contrast(1.05) brightness(0.97);
  border-radius: var(--r-lg);
}

/* ============================================================
   BASE TYPE — apply to body or scope in .lc2026-prose
   ============================================================ */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Display — Fraunces.  Weight restraint: 400 default, 500 max. */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--text-5xl); line-height: 1.05; }
h2 { font-size: var(--text-3xl); line-height: 1.15; }
h3 { font-size: var(--text-xl);  line-height: 1.3; font-weight: 500; }
h4 { font-size: var(--text-lg);  line-height: 1.3; font-weight: 500; }

/* Body copy */
p { margin: 0; line-height: 1.6; text-wrap: pretty; }

/* Inline text roles */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--accent-hover); }

small, .text-sm  { font-size: var(--text-sm); }
.text-xs         { font-size: var(--text-xs); }
.text-lg         { font-size: var(--text-lg); }
.text-muted      { color: var(--text-muted); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-muted);
  font-weight: 500;
}

/* Code */
code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: .92em;
}
code:not(pre code) {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}

/* Blockquote — left rule in tangerine */
blockquote {
  border-left: 3px solid var(--accent);
  padding-left: var(--s-5);
  margin: var(--s-6) 0;
  font-style: italic;
  color: var(--text-muted);
}

/* Selection — tangerine, not browser default */
::selection { background: rgba(255,106,26,.35); color: var(--text); }

/* Focus ring — tangerine halo */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,106,26,.3);
  border-radius: var(--r-sm);
}

/* Reduced motion — no exceptions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}