/*
 * True Friends — Design Tokens
 * Source of truth for colors, typography, spacing, radii, motion.
 * Derived from True Friend Website File in Figma + brand logo (#FEE440).
 */

:root {
  /* ---------- Color ---------- */
  --color-bg: #0a0a0a;
  --color-surface: rgba(255, 255, 255, 0.04);
  --color-surface-hover: rgba(255, 255, 255, 0.07);

  --color-border: rgba(204, 213, 225, 0.18);
  --color-border-strong: rgba(204, 213, 225, 0.35);
  --color-border-input: rgba(204, 213, 225, 0.22);

  --color-text: #e8e6dc;
  --color-text-strong: #ffffff;
  --color-text-muted: rgba(232, 230, 220, 0.65);
  --color-text-subtle: rgba(232, 230, 220, 0.45);

  --color-cream: #faf9f5;
  --color-nav-fg: var(--color-cream);
  --color-nav-fg-hover: #fee440;

  --color-accent: #fee440;
  --color-accent-pressed: #e6cf3a;
  --color-accent-ink: #0a0a0a;

  --color-focus-ring: #fee440;

  /* Fallback gradient shown behind the hero photo. */
  --gradient-hero:
    radial-gradient(ellipse 80% 60% at 70% 65%, rgba(255, 140, 60, 0.35), transparent 70%),
    radial-gradient(ellipse 70% 50% at 20% 30%, rgba(20, 25, 50, 0.85), transparent 70%),
    linear-gradient(180deg, #0a0a0a 0%, #1a1208 55%, #0a0a0a 100%);

  /* ---------- Typography ---------- */
  --font-display: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  --font-body: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  --fs-h3: clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  --lh-snug: 1.2;
  --lh-relaxed: 1.65;

  /* ---------- Layout / spacing ---------- */
  --container-max: 1000px;
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);
  --section-gap: clamp(5rem, 10vw, 7.5rem);
  --nav-height: 72px;

  /* ---------- Radii ---------- */
  --radius-md: 10px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 140ms;
  --duration-base: 220ms;

  /* ---------- Z-index ---------- */
  --z-nav: 50;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}