/* Appily Ninetyseven home — Chromafan Parade tokens
   Night ink · electric teal · hot coral · spark gold · Tilt Warp + Fira Sans */

:root {
  /* Spectra Capstan baseline accents (home + reusable) */
  --cf-ink: #0E1B2C;
  --cf-ink-soft: #1A2F48;
  --cf-teal: #00D4C8;
  --cf-teal-deep: #007A73;
  --cf-coral: #FF4D6A;
  --cf-coral-deep: #C42A45;
  --cf-gold: #FFC83D;
  --cf-gold-deep: #A87A00;
  --cf-lime: #B8FF3D;
  --cf-mist: #E8FBFF;
  --cf-blush: #FFF0F3;
  --cf-surface: #FFFFFF;
  --cf-mute: #4A5563;
  --cf-line: #9AD9D4;

  --color-primary: var(--cf-ink);
  --color-secondary: var(--cf-teal);
  --color-accent: var(--cf-coral);
  --color-bg: var(--cf-mist);
  --color-surface: var(--cf-surface);
  --color-text: var(--cf-ink);
  --color-text-muted: var(--cf-mute);
  --color-border: var(--cf-line);

  --font-display: "Tilt Warp", "Arial Black", sans-serif;
  --font-body: "Fira Sans", "Segoe UI", sans-serif;
  --font-ui: "Fira Sans", "Segoe UI", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-h2: 2.5rem;
  --text-h1: 3.25rem;
  --text-2xl: clamp(2.2rem, 5vw, 3.5rem);
  --text-3xl: clamp(2.8rem, 7vw, 5rem);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-page: clamp(16px, 4vw, 32px);
  --space-section: clamp(48px, 8vw, 88px);

  --radius: 18px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --radius-cap: 14px;
  --radius-lug: 8px;

  --shadow-bead: 0 8px 0 var(--cf-ink);
  --shadow-soft: 0 18px 40px rgba(14, 27, 44, 0.14);
  --shadow-lift: 0 12px 28px rgba(255, 77, 106, 0.22);
  --shadow-capstan: -8px 10px 0 var(--cf-coral);

  --ease-fan: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-bead: 280ms var(--ease-fan);
  --motion-wipe: 260ms var(--ease-out);
  --motion-petal: 700ms var(--ease-fan);
  --motion-capstan: 280ms var(--ease-fan);
}