/* Atrida Design System — design tokens (colors, typography, effects) */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap");

:root {
  /* ---- Primary: Atrida Magenta scale ---- */
  --magenta-50:  #FBEBFF;
  --magenta-100: #F7D6FF;
  --magenta-200: #F0B3FF;
  --magenta-300: #EC90FF;
  --magenta-400: #E869FF;
  --magenta-500: #E346FF;
  --magenta-600: #C41FE0;
  --magenta-700: #9A17B0;
  --magenta-800: #5E1868;

  /* ---- Neutral scale ---- */
  --neutral-00:  #FFFFFF;
  --neutral-50:  #F7F5FA;
  --neutral-100: #ECE9F0;
  --neutral-200: #D9D4E0;
  --neutral-300: #B8B2C0;
  --neutral-400: #918A9C;
  --neutral-500: #6A6474;
  --neutral-600: #48434F;
  --neutral-700: #2C2833;
  --neutral-900: #17171F;

  /* ---- Core brand anchors ---- */
  --ink: #17171F;
  --porcelain: #F7F5FA;
  --white: #FFFFFF;

  /* ---- Semantic tokens ---- */
  --background: #FFFFFF;
  --surface: #F7F5FA;
  --border: #ECE9F0;
  --text: #17171F;
  --text-muted: #6A6474;
  --text-subtle: #918A9C;
  --text-on-dark: #FFFFFF;
  --primary: #E346FF;
  --primary-strong: #C41FE0;
  --link: #9A17B0;
  --link-hover: #C41FE0;

  --success: #17B877;
  --warning: #F0A81E;
  --danger:  #FB3A57;

  --success-50: #E3F6EF; --success-600: #179362;
  --warning-50: #FDF5E4; --warning-600: #C08711;
  --danger-50: #FFE7EB;  --danger-600: #C93149;

  --gradient-signal:    linear-gradient(135deg, #E346FF 0%, #9A17B0 100%);
  --gradient-aurora:    linear-gradient(135deg, #E346FF 0%, #7C4DF0 100%);
  --gradient-nightfall: linear-gradient(135deg, #7C4DF0 0%, #17171F 100%);

  /* ---- Typography ---- */
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-body: 1.6;
  --tracking-label: 0.1em;

  /* ---- Effects ---- */
  --radius-xs: 7px;
  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 100px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --shadow-xs: 0 1px 2px rgba(23, 23, 31, 0.05);
  --shadow-sm: 0 2px 8px rgba(23, 23, 31, 0.06);
  --shadow-md: 0 8px 24px rgba(23, 23, 31, 0.08);
  --shadow-lg: 0 18px 48px rgba(23, 23, 31, 0.12);
  --shadow-primary: 0 8px 24px rgba(227, 70, 255, 0.28);

  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}