/* ═══════════════════════════════════════════════════════════════
   ETHOS — tokens
   Shared design language for the kvmx.ru apps.

   The neutral system (ramp, type, motion, radii, shadow) is shared by
   every app and does not change. The only per-app difference is the
   accent (one hue) and the motif (one geometric signature).

   NEW APP: do not invent the accent silently. Ask the operator for the
   accent name + hex and the motif, then add one [data-app] block at the
   bottom using the TEMPLATE. Fonts are self-hosted (subset + woff2,
   immutable caching) — no font CDN.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
}

:root {
  /* ── neutral ramp — warm, brown-tinted (dark, default) ── */
  --bg-0: #14110D;   /* deepest room */
  --bg-1: #1B1712;   /* surface */
  --bg-2: #221D17;   /* raised */
  --bg-3: #2C261D;   /* hover / raised */
  --bg-4: #372F24;   /* pressed / high */

  --line:    rgba(244, 234, 220, 0.09);   /* hairline */
  --line-hi: rgba(244, 234, 220, 0.16);   /* hairline emphasized */

  --text-hi:      #F4EEE4;   /* human primary   (sans) */
  --text-mid:     #B4AA98;   /* human secondary (sans) */
  --text-lo:      #756C5C;   /* human tertiary / idle   */
  --text-machine: #9C917D;   /* machine default (mono)  */

  /* ── type ── */
  --sans: 'Geist', -apple-system, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* mono numerics: apply on any element using --mono */
  /* font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: -0.01em; */

  /* ── motion — mechanical, no bounce ── */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --fast: 130ms;
  --med:  170ms;

  /* ── radii ── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* ── elevation: depth from light, never blur ── */
  --shadow-soft: 0 2px 8px rgba(0,0,0,0.35), 0 12px 32px rgba(0,0,0,0.28);
  --shadow-lift: 0 4px 14px rgba(0,0,0,0.40), 0 20px 48px rgba(0,0,0,0.34);

  /* ── accent slot ──
     Neutral fallback so an app with no [data-app] is never unstyled.
     Real values come from the per-app block below. Accent is a SIGNAL
     (active state, focus ring, primary action, one lit detail) — never a
     fill-everything wash. */
  --accent:       var(--text-mid);
  --accent-hi:    var(--text-hi);
  --accent-dim:   rgba(244, 234, 220, 0.10);
  --accent-line:  rgba(244, 234, 220, 0.24);
  --accent-glow:  rgba(244, 234, 220, 0.14);
}

/* ── light theme — warm, off-white (kept off cream to dodge the AI-cream tell) ── */
[data-theme="light"] {
  --bg-0: #F1ECE3;
  --bg-1: #EAE4D8;
  --bg-2: #E2DACB;
  --bg-3: #D7CDBB;
  --bg-4: #C9BDA7;

  --line:    rgba(28, 22, 14, 0.10);
  --line-hi: rgba(28, 22, 14, 0.18);

  --text-hi:      #1B1712;
  --text-mid:     #544C3E;
  --text-lo:      #877E6C;
  --text-machine: #6B6252;

  --shadow-soft: 0 2px 8px rgba(60,45,25,0.10), 0 12px 32px rgba(60,45,25,0.08);
  --shadow-lift: 0 4px 14px rgba(60,45,25,0.12), 0 20px 48px rgba(60,45,25,0.10);
}

/* ═══════════════════════════════════════════════════════════════
   PER-APP OVERRIDES — one small block each. Accent + optional motif
   hooks only; never touch the neutral ramp.
   ═══════════════════════════════════════════════════════════════ */

/* muzick — reference app · honey amber · waveform */
[data-app="muzick"] {
  --accent:      #EDA24E;
  --accent-hi:   #F5B667;
  --accent-dim:  rgba(237, 162, 78, 0.14);
  --accent-line: rgba(237, 162, 78, 0.32);
  --accent-glow: rgba(237, 162, 78, 0.22);

  /* motif hook: cool content-art gradient so art carries color, amber stays signal */
  --np-art: radial-gradient(120% 120% at 22% 14%, #7FB3BC 0%, #2F6E7A 42%, #1C4552 78%, #14262E 100%);
}

/* ── TEMPLATE — copy for a new app AFTER intake with the operator ──
[data-app="APPNAME"] {
  --accent:      #RRGGBB;                     // the operator's chosen hue
  --accent-hi:   #RRGGBB;                     // ~ +10–14% lightness
  --accent-dim:  rgba(R, G, B, 0.14);         // active-state backgrounds
  --accent-line: rgba(R, G, B, 0.32);         // accent hairlines
  --accent-glow: rgba(R, G, B, 0.22);         // restrained ambient pool
  // optional motif hooks (gradients / seeds) go here, app-specific
}
*/