/* Kinetic design tokens (docs/design/FlexYield_DesignSystem_final).
   Two user-switchable seams: dark (default, cyan) and light (ultraviolet,
   body.fy-light). Every color in the app must route through these tokens;
   alpha variants are derived with color-mix — never hardcoded rgba twins.
   Loaded last in the :app bundle, so it owns the cascade for tokens. */

body {
  /* dark seam */
  --bg: #0B0E1A;
  --surface: #111827;
  --band: rgba(17, 24, 39, 0.55);
  --nav-bg: rgba(11, 14, 26, 0.72);
  --input-bg: rgba(11, 14, 26, 0.7);
  --ink: #F1F5F9;
  --ink2: #94A3B8;
  --ink3: #64748B;
  --line: #FFFFFF;
  --accent: #00D4FF;
  --accent-hov: #33DDFF;
  --on-accent: #0B0E1A;
  --ok: #34D399;
  --warn: #FBBF24;
  --err: #F87171;
  --shadow-c: rgba(0, 0, 0, 0.5);
  --code-bg: rgba(0, 0, 0, 0.45);
  --code-ink: rgba(241, 245, 249, 0.9);

  color-scheme: dark;
}

/* The landing page sits on a deeper black in the dark seam. */
body.landing { --bg: #060812; }

body.fy-light {
  --bg: #F6F5FB;
  --surface: #FFFFFF;
  --band: #ECECF1;
  --nav-bg: rgba(255, 255, 255, 0.8);
  --input-bg: #FFFFFF;
  --ink: #191B1F;
  --ink2: #6E7076;
  --ink3: #9A9CA3;
  --line: #191B1F;
  --accent: #5A31F4;
  --accent-hov: #7452FF;
  --on-accent: #FFFFFF;
  --ok: #16A34A;
  --warn: #D97706;
  --err: #DC2626;
  --shadow-c: rgba(25, 27, 31, 0.15);
  /* code blocks intentionally stay dark in the light seam */
  --code-bg: #0F0D1D;
  --code-ink: rgba(255, 255, 255, 0.88);

  color-scheme: light;
}

body.fy-light.landing { --bg: #FFFFFF; }

/* Derived tints shared across components (README: color-mix, no rgba twins). */
body {
  --line-4: color-mix(in srgb, var(--line) 4%, transparent);
  --line-8: color-mix(in srgb, var(--line) 8%, transparent);
  --line-10: color-mix(in srgb, var(--line) 10%, transparent);
  --line-18: color-mix(in srgb, var(--line) 18%, transparent);
  --accent-08: color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-14: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-35: color-mix(in srgb, var(--accent) 35%, transparent);

  --font-display: "Cabinet Grotesk", ui-sans-serif, "Helvetica Neue", sans-serif;
  --font-body: "Satoshi", ui-sans-serif, "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Legacy aliases — pre-Kinetic component CSS reads these names. New CSS
     uses the Kinetic names above; delete an alias when its last reader goes. */
  --series-1: var(--accent);
  --series-1-dim: var(--accent-14);
  --page: var(--bg);
  --surface-1: var(--surface);
  --ink-secondary: var(--ink2);
  --ink-muted: var(--ink3);
  --gridline: var(--line-8);
  --baseline: var(--line-18);
  --delta-good: var(--ok);
  --critical: var(--err);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}