/* LOSTFALL — design tokens (direction "Last Light")
   Frozen contract: design/output/final/foundations.md
   Dark is the only screen theme. Print maps everything to pure #000 on #FFF. */

:root {
  /* Color — screen */
  --bg: #0A0A0B;              /* the room */
  --panel: #141416;          /* raised surfaces (rare) */
  --cream: #EAE6DC;          /* primary text, filled segments, primary buttons */
  --cream-soft: #D9D5CB;     /* long-form body on dark */
  --silver: #8B8A92;         /* secondary text, captions */
  --faded: #5A5960;          /* disabled, locked, tertiary */
  --faded-deep: #3A393F;     /* deepest tertiary (locked labels) */
  --hairline: rgba(234, 230, 220, .16);
  --hairline-soft: rgba(234, 230, 220, .07);
  --hairline-strong: rgba(234, 230, 220, .35);
  --blood: #7E241A;          /* death surfaces (fills) */
  --blood-text: #C05242;     /* death text/frames on dark */

  /* Type */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Motion */
  --slow: 480ms ease;        /* state dissolves, plate inversions, overlays */
  --fast: 200ms ease;        /* presses, chips, pips */
}

/* Japanese: system serif fallback, looser line-height (foundations §2) */
:root[lang="ja"] {
  --serif: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
}
:root[lang="ja"] body { line-height: 1.6; }

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums;
}

/* Radii: 0 everywhere except explicit circles. No shadows on app surfaces. */
button { font-family: inherit; color: inherit; }
a { color: inherit; }

::-webkit-scrollbar { width: 3px; height: 0; }
::-webkit-scrollbar-thumb { background: rgba(234, 230, 220, .25); }
::-webkit-scrollbar-track { background: transparent; }

/* Canon motion primitives (foundations §4) */
@keyframes lfPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes lfFlick { 0%, 100% { opacity: 1; } 45% { opacity: .55; } 70% { opacity: .85; } }

/* Soft vignette overlay for app screens (foundations §3) */
.lf-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at 50% 30%, transparent 55%, rgba(0, 0, 0, .5) 100%);
}

/* Utility: letterspaced mono smallcaps-style label */
.lf-label {
  font-family: var(--mono);
  text-transform: uppercase;
  color: var(--silver);
}

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