/* Valoron Design System 2.0: design tokens.
 * Source: Claude Design project "Valoron Design System" (tokens/colors, typography, spacing).
 * Keep in sync with the design system; site-specific styles live in site.css.
 */
:root {
  /* ---- Brand primaries ---- */
  --amber: #FFC000;          /* wordmark, arrows, CTAs, big numbers. NEVER body text */
  --amber-press: #E6AC00;
  --amber-hover: #FFCB26;
  --navy: #364159;           /* text, dark panels */

  /* ---- Navy ramp ---- */
  --navy-900: #20283A;
  --navy-800: #283044;
  --navy-700: #364159;
  --navy-500: #5B6472;
  --navy-300: #AEB8C6;
  --navy-100: #DDE2E9;

  /* ---- Neutrals ---- */
  --white: #FFFFFF;
  --off-white: #F8F8F8;
  --grey: #808080;
  --cool-grey: #5B6472;
  --ice-base: #ECEFF1;

  /* ---- Meaningful accents (use sparingly, with meaning) ---- */
  --green: #558564;          /* circularity only */
  --green-soft: #E7EEEA;
  --violet: #A02B93;         /* plasma / e-Conversion only */
  --violet-soft: #F3E5F1;

  /* ---- Semantic aliases ---- */
  --text-primary: var(--navy-700);
  --text-secondary: var(--cool-grey);
  --text-muted: var(--grey);
  --text-on-dark: var(--white);
  --text-on-dark-muted: var(--navy-300);

  --surface-page: var(--off-white);
  --surface-card: var(--white);
  --surface-sunken: #EFF1F4;
  --surface-dark: var(--navy-700);
  --surface-darker: var(--navy-900);

  --border-subtle: var(--navy-100);
  --border-default: #D3D8E0;
  --border-strong: var(--grey);
  --border-on-dark: rgba(255,255,255,0.16);

  --focus-ring: rgba(255,192,0,0.55);

  /* ---- Typography ---- */
  /* Deviation from design system (Space Grotesk): Inter for headlines too, by team decision (closest free match to Aptos) */
  --font-display: 'Inter', 'Aptos Display', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Aptos', system-ui, -apple-system, sans-serif;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.12em;

  /* ---- Spacing (8px grid) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Radii ---- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;

  /* ---- Shadows (quiet, navy-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(32,40,58,0.06);
  --shadow-sm: 0 1px 3px rgba(32,40,58,0.08), 0 1px 2px rgba(32,40,58,0.04);
  --shadow-md: 0 2px 8px rgba(32,40,58,0.08), 0 8px 24px rgba(32,40,58,0.06);
  --shadow-lg: 0 8px 32px rgba(32,40,58,0.12), 0 2px 8px rgba(32,40,58,0.06);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* ---- Layout ---- */
  --page-max: 1280px;
  --page-pad: 32px;
}