/*
  LEELA & CO. — DESIGN SYSTEM
  Extracted from index.html so future pages (About, Services, Technology, etc.)
  reuse the same tokens and components instead of re-deriving the ledger-grid world.

  World: ledger-grid precision fused with fintech-dashboard confidence. Full rationale
  and the direction contract live in DESIGN.md at the project root — read that first
  for WHY these choices exist; this file is the HOW.

  Structure of this file:
    1. Tokens        — colors, type, spacing primitives
    2. Reset / base  — html/body defaults, utilities
    3. Components    — one block per reusable pattern, each with a usage comment
    4. Motion        — reveal-on-scroll utility
    5. Responsive    — breakpoints, grouped by component

  Every component below is used 3+ times across the current page, or is site-wide
  chrome (nav/footer) that every future page will need. Nothing here is a one-off —
  page-specific layout (hero grid, contact grid) can stay local to the page that uses it.
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* Ground */
  --ink-950: #0B0E14;   /* primary dark ground */
  --ink-900: #12161F;   /* lifted panel / card surface on dark */
  --ink-850: #171C27;

  /* Text on dark */
  --paper-100: #F2EDE3; /* primary text on dark — never use as a page ground (parchment-cliché trap) */
  --paper-70: rgba(242, 237, 227, 0.7);  /* secondary body text on dark, ~8.4:1 on --ink-950 */
  --paper-45: rgba(242, 237, 227, 0.62); /* tertiary/meta text on dark (labels, footer, tags). Name is historical — shipped at 0.62 alpha, not 0.45, because 0.45 measured ~3.8:1 (fails the 4.5:1 text floor); raised until it cleared it (~6.5:1). Do not lower this without re-checking contrast. */

  /* Accent — brass/ochre. Committed color strategy: this carries 30–60% of the
     surface at page scale (the whole "future" section ground), not as a sprinkle.
     --brass-500 is the FILL value (button/section backgrounds) and stays identical
     in both themes — it's always paired with the correct ink text for its ground.
     --brass-fg is the FOREGROUND value (text/border/icon-stroke uses of the accent)
     and is theme-aware: brass-500 itself fails text contrast on a light ground
     (~2.4:1), so light mode swaps in a darkened bronze that clears 4.5:1. Use
     --brass-500 for fills, --brass-fg for anything the accent color is drawn AS. */
  --brass-500: #C99A4B;
  --brass-600: #A97F38; /* pressed/hover, fill only */
  --brass-fg: var(--brass-500);

  /* Text on brass ground — the .future section ground stays brass-500 in both
     themes (it already contrasts strongly against either a dark or light page
     ground), so ink-on-brass values are theme-independent. */
  --brass-ink: #241B0C;      /* primary text on brass (headings), ~6.6:1 */
  --brass-ink-soft: #3E3012; /* secondary/meta text on brass. MUST be a solid color, not an
                                 alpha-blended --brass-ink: blending dark text toward a LIGHT
                                 background raises its effective luminance and destroys contrast
                                 (measured ~1.8:1 the first time this was tried). A darker solid
                                 clears 4.5:1 (~4.7:1) where a faded version of the same color cannot. */

  /* Hairlines — the ledger-rule motif */
  --line-hairline: rgba(242, 237, 227, 0.14);         /* on dark ground */
  --line-hairline-inverse: rgba(11, 14, 20, 0.18);    /* on brass ground, theme-independent */

  /* Nav scrim — sticky nav translucent backdrop, theme-aware */
  --nav-scrim: rgba(11, 14, 20, 0.86);

  /* Type */
  --font-display: "General Sans", "Neue Montreal", "Inter Tight", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif; /* workhorse body/data face — tabular-nums for ledger figures, not used as display */
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; /* small tracked labels + ledger-style figures only — never a dominant broadsheet device */

  /* Layout primitives */
  --container: 1180px;
  --edge: clamp(24px, 5vw, 72px);

  color-scheme: dark; /* native form controls / scrollbar follow the theme */
}

/* Light theme — opt-in via [data-theme="light"] on <html>, toggled by the nav
   control (see index.html script). Dark stays the default scene (no attribute).
   Same ledger-grid world, same brass accent identity — only the ground/text
   pairing flips. Deliberately NOT a warm cream/parchment ground (that's the
   explicit anti-pattern this brand refuses, see DESIGN.md) — cool near-white
   instead, so it still reads as precision/software rather than book paper.
   Every override below was contrast-checked against its actual pairing;
   see the dark-theme token comments above for the same discipline. */
:root[data-theme="light"] {
  --ink-950: #F3F4F1;  /* page ground — cool near-white, not cream */
  --ink-900: #FFFFFF;  /* lifted panel — pure white pops against the toned-down ground,
                           mirroring how --ink-900 is LIGHTER than --ink-950 in dark mode */

  --paper-100: #14181F; /* primary text — near-ink, solid (not an alpha fade of the ground) */
  --paper-70: #4A5160;  /* secondary body text, ~8.9:1 on --ink-950 */
  --paper-45: #5B6273;  /* tertiary/meta text, ~5.7:1 — solid, not faded: alpha-blending a dark
                            color toward a LIGHT ground raises its luminance and kills contrast,
                            same lesson as --brass-ink-soft above, mirrored for the opposite ground. */

  --brass-fg: #8A6526;  /* darkened bronze — plain --brass-500 measures ~2.4:1 on this ground,
                            under the 4.5:1 floor; darkened until it cleared it (~4.9:1). */

  --line-hairline: rgba(11, 14, 20, 0.12);
  --nav-scrim: rgba(243, 244, 241, 0.86);
  color-scheme: light; /* native form controls / scrollbar follow the theme */
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink-950);
  color: var(--paper-100);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

/* Usage: wrap every section's inner content in .container for consistent max-width + edge padding. */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--edge);
}

/* Usage: apply to any element showing numeric/ledger figures (amounts, indices, dates). */
.tabular { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none; }
}

/* ============================================================
   3. COMPONENTS
   ============================================================ */

/* --- Eyebrow -------------------------------------------------
   Tracked uppercase mono kicker. RESERVE for labels that carry real information
   (a category/location tag, or a staging marker like "Live today" / "Where this
   is going"). Do not add one over every section head as decoration — the first
   build did that and it was stripped back on review; an eyebrow on every section
   is grammar you didn't choose, not a system. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-fg);
}
.future .eyebrow { color: var(--brass-ink-soft); }

/* --- Button ----------------------------------------------------
   .btn is the base; pair with a variant. --primary = brass fill (the one
   saturated-accent CTA per view). --ghost = hairline outline, secondary action. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 3px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.btn--primary {
  background: var(--brass-500);
  color: var(--brass-ink);
}
.btn--primary:hover, .btn--primary:focus-visible { background: #DBAE63; transform: translateY(-1px); }
.btn--ghost {
  border: 1px solid var(--line-hairline);
  color: var(--paper-100);
}
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--paper-45); }

/* --- Nav ---------------------------------------------------------
   Site-wide chrome. Sticky, wordmark left, links center, CTA right.
   .wordmark__mark follows the mark's own lockup spec (Leela & Co logomark
   exploration, claude.ai/design project a1fdd32d-...): clear space between
   mark and wordmark is 1x, where x = 24% of the mark's rendered height;
   wordmark cap-height should match mark height. At nav scale that pushes the
   mark under the spec's own stated 16px legibility floor ("below 16px the
   mark's counter closes up"), so 16px height wins over exact cap-height
   parity here — gap follows from that: round(16 × 0.24) = 4px. Mark is drawn
   currentColor (never the brass accent — the source spec explicitly bans
   color/mid-grey fills), so it themes for free with the wordmark text. Full
   asset at assets/leela-mark.svg (0 0 100 100 viewBox); the inline nav copy
   uses the lockup's cropped viewBox (18 12 68 76) to remove the mark's
   internal padding for tight optical alignment next to the text. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-scrim);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-hairline);
}
.nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.nav__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--paper-100);
  flex-shrink: 0;
  white-space: nowrap;
}
.wordmark__mark {
  height: 16px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.nav__links {
  display: flex;
  gap: 40px;
  align-items: center;
}
.nav__links a {
  font-size: 14px;
  color: var(--paper-70);
  transition: color 0.2s ease;
}
.nav__links a:hover, .nav__links a:focus-visible { color: var(--paper-100); }
.nav__cta {
  border: 1px solid var(--brass-fg);
  color: var(--paper-100);
  padding: 9px 18px;
  border-radius: 3px;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav__cta:hover, .nav__cta:focus-visible { background: var(--brass-500); color: var(--brass-ink); }

/* --- Theme toggle --------------------------------------------------
   A real switch — hairline track + sliding knob — not a text button. Ledger
   register, not iOS chrome: square-cornered track (matches every other
   rectilinear element on the page), line-weight only, brass knob when on.
   role="switch" + aria-checked carry the state; [aria-checked] drives the
   knob position and track fill via CSS, no JS style manipulation needed.
   Toggles [data-theme] on <html>; see index.html's inline script for the
   flash-of-wrong-theme guard and the click handler. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
}
.theme-toggle__track {
  position: relative;
  width: 40px;
  height: 22px;
  border: 1px solid var(--line-hairline);
  border-radius: 2px;
  background: var(--ink-900);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.theme-toggle[aria-checked="true"] .theme-toggle__track {
  border-color: var(--brass-fg);
}
.theme-toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 1px;
  background: var(--paper-45);
  transition: transform 0.2s ease, background 0.2s ease;
}
.theme-toggle[aria-checked="true"] .theme-toggle__knob {
  transform: translateX(18px);
  background: var(--brass-fg);
}
.theme-toggle:hover .theme-toggle__track,
.theme-toggle:focus-visible .theme-toggle__track { border-color: var(--paper-45); }
.theme-toggle:focus-visible { outline: 2px solid var(--brass-fg); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle__track, .theme-toggle__knob { transition: none; }
}

/* --- Section head --------------------------------------------------
   Two-column head used to open every content section: heading (+ optional
   .eyebrow) on the left, one supporting sentence on the right. Stacks to
   one column under 900px. */
section { position: relative; }
.section-pad { padding-block: clamp(72px, 10vw, 128px); }
.rule-top { border-top: 1px solid var(--line-hairline); }

.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: clamp(48px, 6vw, 72px);
  align-items: end;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin-top: 10px;
}
.section-head p {
  color: var(--paper-70);
  font-size: 15.5px;
  max-width: 42ch;
  line-height: 1.6;
}
.future .section-head p { color: var(--brass-ink-soft); }

/* --- Ledger row / list -----------------------------------------------
   The core motif: a hairline-divided row list, ledger-register grammar.
   Two variants ship today:
     .service-row  — idx + name (+ cadence/status tag) + description, 3-column.
                     Use for any enumerable offering (services, roadmap phases).
                     Add .future to an ancestor to get the brass-ground inversion.
     .why-row      — stamp icon + heading + description, 2-column. Use for
                     reasoning/trust content that has no inherent sequence
                     (no idx number — nothing here claims a meaningful order).
   Both sit inside a .service-list / .why-list wrapper for the shared top rule. */
.service-list, .why-list { border-top: 1px solid var(--line-hairline); }

.service-row {
  display: grid;
  grid-template-columns: 64px 1fr 1.3fr;
  gap: 28px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line-hairline);
  align-items: start;
}
.service-row__idx {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--brass-fg);
  padding-top: 4px;
}
.service-row__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.005em;
}
.service-row__desc {
  color: var(--paper-70);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 52ch;
}
.service-row__cadence {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-45);
}
/* status tag: same slot as cadence, used on the roadmap ("Planned" / "In development") */
.service-row__status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line-hairline);
  padding: 3px 9px;
  border-radius: 2px;
  display: inline-block;
  margin-top: 12px;
}

.why-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-hairline);
  align-items: start;
}
.why-row h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 8px;
}
.why-row p {
  font-size: 14px;
  color: var(--paper-70);
  line-height: 1.6;
  max-width: 56ch;
}

/* .future inversion — brass ground, applied to an ancestor section.
   All text inside switches to solid ink colors (see token comments on WHY
   these are solid, not faded, above). */
.future {
  background: var(--brass-500);
  color: var(--brass-ink);
}
.future .service-list, .future .why-list,
.future .service-row, .future .why-row { border-color: var(--line-hairline-inverse); }
.future .service-row__idx { color: var(--brass-ink-soft); }
.future .service-row__name { color: var(--brass-ink); }
.future .service-row__desc { color: var(--brass-ink-soft); }
.future .service-row__cadence { color: var(--brass-ink-soft); }
.future .service-row__status { border-color: var(--line-hairline-inverse); }

/* --- Stamp mark --------------------------------------------------
   The trust motif: a geometric circle-in-square, line-weight only (no
   gradient/glow — see DESIGN.md's explicit ban on that AI-default cluster).
   Pairs with .why-row. Replaces testimonial-carousel / handshake-photo clichés. */
.stamp {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--brass-fg);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.stamp::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--brass-fg);
  border-radius: 50%;
}

/* --- Process strip -------------------------------------------------
   A bordered strip of equal steps with internal dividers (table/ledger grammar,
   not a card grid — no per-item shadow/border-box). Use when a workflow's
   step ORDER is itself information the reader needs (unlike .why-row, numbering
   here is earned). */
.process-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line-hairline);
  border-radius: 6px;
  overflow: hidden;
}
.process-step {
  padding: 26px 20px;
  border-right: 1px solid var(--line-hairline);
  background: var(--ink-900);
}
.process-step:last-child { border-right: none; }
.process-step__idx {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--brass-fg);
  margin-bottom: 14px;
}
.process-step__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 6px;
}
.process-step__desc {
  font-size: 12.5px;
  color: var(--paper-45);
  line-height: 1.5;
}

/* --- Ledger demo widget --------------------------------------------
   Illustrative "live data" panel (used in the hero). Always mark the data
   as a sample in visible copy — never let it read as real client data. */
.ledger-demo {
  background: var(--ink-900);
  border: 1px solid var(--line-hairline);
  border-radius: 6px;
  overflow: hidden;
}
.ledger-demo__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-hairline);
}
.ledger-demo__head-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--paper-45);
  text-transform: uppercase;
}
.dot-row { display: flex; gap: 6px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-hairline); }
.dot--live { background: var(--brass-500); }

.ledger-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line-hairline);
  font-size: 13.5px;
}
.ledger-row:last-child { border-bottom: none; }
.ledger-row__idx { font-family: var(--font-mono); color: var(--paper-45); font-size: 12px; }
.ledger-row__label { color: var(--paper-100); }
.ledger-row__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass-fg);
  background: rgba(201, 154, 75, 0.12);
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap;
}
.ledger-row__amt {
  font-family: var(--font-mono);
  color: var(--paper-70);
  font-size: 13px;
  white-space: nowrap;
}
.ledger-demo__foot {
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--paper-45);
  text-transform: uppercase;
}

/* --- Form ------------------------------------------------------------
   .field wraps a label + input/textarea. Dark inset fields inside a
   lifted (--ink-900) panel. Brass focus ring, no browser default outline. */
.form {
  background: var(--ink-900);
  border: 1px solid var(--line-hairline);
  border-radius: 6px;
  padding: clamp(24px, 3vw, 36px);
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-45);
  margin-bottom: 9px;
}
.field input, .field textarea {
  width: 100%;
  background: var(--ink-950);
  border: 1px solid var(--line-hairline);
  border-radius: 4px;
  padding: 12px 14px;
  color: var(--paper-100);
  font-family: var(--font-body);
  font-size: 14px;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brass-fg);
}
.field textarea { resize: vertical; min-height: 96px; }
.form .btn--primary { width: 100%; justify-content: center; margin-top: 4px; }
.form-note {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--paper-45);
  text-align: center;
}

/* --- Contact detail links ---------------------------------------------
   Underlined mono links (mailto/tel), used outside the form as the
   low-friction contact path. */
.contact-detail {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-detail a {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--paper-100);
  border-bottom: 1px solid var(--line-hairline);
  padding-bottom: 2px;
  width: fit-content;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.contact-detail a:hover, .contact-detail a:focus-visible { color: var(--brass-fg); border-color: var(--brass-fg); }

/* --- Footer ------------------------------------------------------------
   Site-wide chrome. Three-up row: copyright, links, location — collapses
   to wrapped flex on narrow screens. */
.footer {
  border-top: 1px solid var(--line-hairline);
  padding-block: 40px;
}
.footer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer__meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--paper-45);
  letter-spacing: 0.02em;
}
.footer__links { display: flex; gap: 24px; }
.footer__links a { font-size: 13px; color: var(--paper-70); }
.footer__links a:hover, .footer__links a:focus-visible { color: var(--paper-100); }

/* ============================================================
   4. MOTION
   ============================================================ */
/* Usage: add .reveal to an element, toggle .is-visible via IntersectionObserver
   (see index.html's script). One authored entrance, applied consistently —
   not scattered per-element effects. */
.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; }
}

/* ============================================================
   5. RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .section-head { grid-template-columns: 1fr; gap: 16px; }
  .service-row { grid-template-columns: 40px 1fr; }
  .service-row__desc { grid-column: 2 / -1; }
  .process-strip { grid-template-columns: repeat(2, 1fr); }
  .process-step:nth-child(2) { border-right: none; }
  .why-row { grid-template-columns: 40px 1fr; gap: 16px; }
}

@media (max-width: 560px) {
  .process-strip { grid-template-columns: 1fr; }
  .process-step { border-right: none; border-bottom: 1px solid var(--line-hairline); }
  .process-step:last-child { border-bottom: none; }

  .ledger-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    grid-template-areas:
      "idx   label label"
      ".     tag   amt";
    row-gap: 8px;
    column-gap: 10px;
    align-items: center;
    padding-block: 16px;
  }
  .ledger-row__idx { grid-area: idx; }
  .ledger-row__label { grid-area: label; }
  .ledger-row__tag { grid-area: tag; justify-self: start; }
  .ledger-row__amt { grid-area: amt; justify-self: end; }
}