/* Ludofax Design System v1 — "Oxide & Walnut" tokens
   Source of truth: company/brand/ludofax/ludofax-system-v1.md
   Paper mode = default. Add data-mode="panel" to any subtree for panel mode.
   Radius is 0 everywhere. Shadows are hard offsets: never blur, never spread. */

:root {
  /* palette — fixed roles, see ludofax-system-v1.md §1 */
  --lf-paper: #F4ECE0;
  --lf-well: #ECE2D2;
  --lf-walnut: #33211A;
  --lf-teak: #5A3D2D;
  --lf-ivory: #F0E2C8;
  --lf-oxide: #C4471F;
  --lf-oxide-light: #E8724C; /* small text on walnut only */
  --lf-brass: #C9A24A;
  --lf-patina: #7D9B8A;
  --lf-shade-dark: #1C110D;
  --lf-deep-well: #241612;
  --lf-plate: #3D2820;

  /* ── AA additions (not in v1 §1; see §"Contrast" note in the system doc) ──
     The v1 muted label and oxide values fall below WCAG AA 4.5:1 on paper.
     These are darkened siblings for SMALL TEXT ONLY — never fills, never
     borders. Paper-mode fills and rules still use the v1 values above. */
  --lf-ink-muted-aa: #736354;  /* 4.86:1 on paper — small mono labels */
  --lf-oxide-ink: #A83A18;     /* 5.38:1 on paper — small oxide text */

  /* semantic — paper mode */
  --lf-ground: var(--lf-paper);
  --lf-surface: var(--lf-paper);
  --lf-inset: var(--lf-well);
  --lf-ink: var(--lf-walnut);
  --lf-ink-secondary: var(--lf-teak);
  --lf-ink-muted: var(--lf-ink-muted-aa);
  --lf-hairline: #B8A795;
  --lf-border-strong: var(--lf-walnut);
  --lf-shade: var(--lf-walnut);
  --lf-action: var(--lf-oxide);
  --lf-action-text: var(--lf-oxide-ink);
  --lf-on-action: var(--lf-paper);
  --lf-index: var(--lf-brass);
  --lf-ok: #4F6B5B;

  /* type */
  --lf-font-display: Archivo, sans-serif;
  --lf-font-body: 'Zen Kaku Gothic New', sans-serif;
  --lf-font-mono: 'IBM Plex Mono', monospace;

  /* elevation */
  --lf-radius: 0;
  --lf-elev-1: 3px 3px 0 0 var(--lf-brass);
  --lf-elev-2: 6px 6px 0 0 var(--lf-shade);
  --lf-elev-3: 10px 10px 0 0 var(--lf-shade), 10px 10px 0 1px var(--lf-brass);
  --lf-scrim: rgba(51, 33, 26, .78);

  /* motion */
  --lf-motion-detent: 140ms steps(3);
  --lf-motion-cut: 90ms linear;
}

[data-mode="panel"] {
  --lf-ground: var(--lf-walnut);
  --lf-surface: var(--lf-plate);
  --lf-inset: var(--lf-deep-well);
  --lf-ink: var(--lf-ivory);
  --lf-ink-secondary: #C0A894;
  --lf-ink-muted: #B19A86;      /* 5.70:1 on walnut — v1 value is fine here */
  --lf-hairline: var(--lf-teak);
  --lf-border-strong: var(--lf-brass);
  --lf-shade: var(--lf-shade-dark);
  --lf-on-action: var(--lf-ivory);
  --lf-action-text: var(--lf-oxide-light);
  --lf-ok: var(--lf-patina);
  --lf-elev-1: 3px 3px 0 0 var(--lf-shade-dark);
  --lf-elev-2: 6px 6px 0 0 var(--lf-shade-dark);
  /* v1 §3 specifies L3 panel = offset PLUS a 1px brass border. The border can't
     live in box-shadow without a second layer, so it is spelled out here. */
  --lf-elev-3: 10px 10px 0 0 var(--lf-shade-dark), 0 0 0 1px var(--lf-brass);
}

/* ── type steps ── */
.lf-display { font-family: var(--lf-font-display); font-variation-settings: 'wdth' 120, 'wght' 800; font-size: 54px; line-height: .92; letter-spacing: -.015em; color: var(--lf-ink); }
.lf-title   { font-family: var(--lf-font-display); font-variation-settings: 'wdth' 84, 'wght' 700; font-size: 30px; line-height: 1.1; color: var(--lf-ink); }
.lf-section { font-family: var(--lf-font-display); font-variation-settings: 'wdth' 88, 'wght' 700; font-size: 19px; line-height: 1.15; color: var(--lf-ink); }
.lf-body    { font-family: var(--lf-font-body); font-size: 13px; line-height: 1.8; color: var(--lf-ink-secondary); text-wrap: pretty; }
.lf-label   { font-family: var(--lf-font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--lf-ink-muted); }
.lf-eyebrow { font-family: var(--lf-font-mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--lf-action-text); }
.lf-numeral { font-family: var(--lf-font-display); font-variation-settings: 'wdth' 100, 'wght' 700; font-size: 22px; line-height: 1; color: var(--lf-brass); }
.lf-jp      { font-family: var(--lf-font-body); font-weight: 500; letter-spacing: .12em; }

/* ── controls ── */
.lf-btn {
  font-family: var(--lf-font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  padding: 10px 18px; border-radius: 0; border: 0; cursor: pointer;
  background: var(--lf-action); color: var(--lf-on-action);
  box-shadow: 3px 3px 0 0 var(--lf-shade);
  transition: transform var(--lf-motion-detent), box-shadow var(--lf-motion-detent);
}
.lf-btn:active { transform: translate(3px, 3px); box-shadow: none; }

.lf-btn--secondary {
  background: var(--lf-surface); color: var(--lf-ink);
  border: 1px solid var(--lf-border-strong); box-shadow: var(--lf-elev-1);
}
.lf-btn--tertiary {
  background: none; color: var(--lf-ink-secondary); box-shadow: none;
  padding: 10px 4px; border-bottom: 1px solid var(--lf-brass);
}

.lf-input {
  font-family: var(--lf-font-mono); font-size: 11px; padding: 11px 13px; border-radius: 0;
  background: var(--lf-inset); color: var(--lf-ink); border: 1px solid var(--lf-border-strong);
  caret-color: var(--lf-action);
}

.lf-card { background: var(--lf-surface); border: 1px solid var(--lf-border-strong); box-shadow: var(--lf-elev-1); }
.lf-card--active { border-left: 4px solid var(--lf-brass); }
.lf-dialog { background: var(--lf-surface); border: 1px solid var(--lf-border-strong); box-shadow: var(--lf-elev-3); animation: lf-cut var(--lf-motion-cut) both; }
.lf-scrim { background: var(--lf-scrim); }
@keyframes lf-cut { from { opacity: 0 } to { opacity: 1 } }

.lf-rule { border: 0; border-top: 3px solid var(--lf-brass); }
.lf-hairline { border: 0; border-top: 1px solid var(--lf-hairline); }

.lf-chip { font-family: var(--lf-font-mono); font-size: 10px; letter-spacing: .16em; padding: 6px 11px; border: 1px solid var(--lf-hairline); color: var(--lf-ink-muted); }
.lf-chip--ok { border-color: var(--lf-patina); color: var(--lf-ok); }
.lf-chip--alert { border-color: var(--lf-oxide); color: var(--lf-action-text); }

/* grid whose gaps read as brass rules */
.lf-grid { display: grid; gap: 1px; background: var(--lf-brass); border: 1px solid var(--lf-border-strong); }
.lf-grid > * { background: var(--lf-surface); }

@media (prefers-reduced-motion: reduce) {
  .lf-btn, .lf-dialog { transition: none; animation: none; }
}