/* ============================================================
   MOTIVATION — Design Tokens
   Black / Silver / White. No colored accents.
   ============================================================ */

:root {
  /* Surfaces */
  --ink-900: #070708;
  --ink-800: #0d0d0f;
  --ink-700: #141417;
  --line: #222226;

  /* Accent Tokens (Silver / White / Black) */
  --accent: var(--platinum);
  --accent-hover: var(--white);
  --accent-glow: rgba(255, 255, 255, 0.04);
  --accent-glow-strong: rgba(255, 255, 255, 0.12);
  --accent-border: rgba(255, 255, 255, 0.1);
  --accent-gradient: var(--metal);
  --accent-metallic: var(--metal);

  /* Frosted Glassmorphism */
  --glass-bg: rgba(7, 7, 8, 0.65);
  --glass-border: rgba(255, 255, 255, 0.05);
  --glass-border-glow: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.7);

  /* Text */
  --platinum: #F5F5F7;
  --mute: #A1A1A8;
  --faint: #676770;

  /* Metal */
  --silver-1: #ECECF0;
  --silver-2: #C6C7CE;
  --silver-3: #7C7D85;
  --white: #FFFFFF;

  --metal: linear-gradient(100deg,
    #7C7D85 0%, #ECECF0 22%, #C6C7CE 40%,
    #FFFFFF 52%, #C6C7CE 62%, #ECECF0 80%, #7C7D85 100%);

  /* Type */
  --font-display: "Clash Display", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Satoshi", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero: clamp(3.2rem, 9vw, 8rem);
  --fs-h2: clamp(2rem, 4.5vw, 3.5rem);
  --fs-h3: clamp(1.4rem, 2.6vw, 2.1rem);
  --fs-body: clamp(1.02rem, 1.15vw, 1.2rem);
  --fs-kick: .78rem;

  /* Space */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 40px;
  --sp-7: 64px;
  --sp-8: 96px;
  --sp-9: 160px;
  --section-pad: clamp(96px, 15vh, 220px);

  /* Shape */
  --r: 4px;
  --r-lg: 12px;
  --container: 1240px;
  --gutter: 24px;

  /* Motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --dur-fast: 200ms;
  --dur-med: 350ms;
  --dur-slow: 600ms;
}