/**
 * Color tokens aligned with Figma node 96:2528 (7-Sync color collection).
 * When Dev Mode / MCP can read the file, replace hex values with exact variables from that frame.
 * Authenticated MCP user must have file access — see Figma MCP docs on permissions.
 */

:root {

  /* ================= PRIMARY ================= */
  --primary-900: #080066;
  --primary-800: #231A97;
  --primary-700: #453AD1;
  --primary-600: #4A3AFF;
  --primary-500: #6055F2;
  --primary-400: #766CFF;
  --primary-300: #B5AFFF;
  --primary-200: #E2E0FF;
  --primary-100: #F4F3FF;

  /* ================= SECONDARY ================= */
  --secondary-300: #7D42FB;
  --secondary-200: #3324D5;
  --secondary-400: #2D6BFF;
  --secondary-100: #F2F1FF;

  /* ================= NEUTRAL ================= */
  --neutral-800: #B5AFFF;
  --neutral-700: #4E4775;
  --neutral-600: #6F7191;
  --neutral-500: #A0A3BD;
  --neutral-400: #DCDDEB;
  --neutral-300: #EFF0F6;
  --neutral-200: #F7F7FC;
  --white: #FFFFFF;
  --black: #000000;

  /* ================= SYSTEM ================= */
  /* Blue */
  --blue-400: #086CD9;
  --blue-300: #1D88FE;
  --blue-200: #8FC3FF;
  --blue-100: #EAF4FF;

  /* Green */
  --green-400: #11845B;
  --green-300: #05C168;
  --green-200: #7FDCA4;
  --green-100: #DEF2E6;

  /* Red */
  --red-400: #DC2B2B;
  --red-300: #FF5A65;
  --red-200: #FFBEC2;
  --red-100: #FFEFF0;

  /* Yellow */
  --yellow-400: #FFA800;
  --yellow-300: #FDBD1A;
  --yellow-200: #FFE39B;
  --yellow-100: #FFF6E4;

  /* Typography — aligned with Tailwind `font-sans` / `font-display` (tailwind.config.js) */
  --font-sans: "Helvetica Now Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-color: var(--primary-800);

  --text-display: clamp(2rem, 4.5vw, 3.25rem);
  --text-lead: clamp(1rem, 2vw, 1.125rem);
  --text-small: 0.875rem;

  --leading-tight: 1.15;
  --leading-normal: 1.55;

  /* Spacing & layout */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --container-max: 40rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
}