/* Cosy design tokens. Source of truth: docs/design.md and the Figma Cosy page
   (collections "Cosy site / Primitives", "Cosy site / Theme", "Cosy site / Scale").
   Use the Theme tokens in CSS; primitives exist for gradients and aliases. */
:root {
  /* Primitives */
  --color-pink: #ff1b6b;
  --color-pink-soft: #ff4b92;
  --color-pink-hover: #e61557;
  --color-pink-ink: #b0004b;
  --color-pink-light: #ffb6d0;
  --color-pink-50: #fff1f6;
  --color-pink-100: #ffd1e2;
  --color-code-pink: #e01e5a;
  --color-indigo: #5864ff;
  --color-indigo-deep: #4c63d2;
  --color-indigo-ink: #4657d9;
  --color-indigo-50: #f3f5ff;
  --color-indigo-100: #e0e6ff;
  --color-indigo-200: #e6e9ff;
  --color-teal: #087f70;
  --color-teal-soft: #28b5a1;
  --color-teal-50: #eafaf7;
  --color-navy: #162447;
  --color-navy-soft: #293a66;
  --color-navy-hover: #25365f;
  --color-slate-700: #28344f;
  --color-slate-500: #5b657e;
  --color-slate-400: #68738a;
  --color-grey-50: #f7f8fc;
  --color-neutral-100: #f5f5f5;
  --color-grey-200: #e7eaf1;
  --color-grey-300: #c8cbd0;
  --color-white: #ffffff;

  /* Theme (Starwind names) */
  --background: var(--color-white);
  --foreground: var(--color-navy);
  --card: var(--color-white);
  --card-foreground: var(--color-navy);
  --muted: var(--color-grey-50);
  --muted-foreground: var(--color-slate-500);
  --accent: var(--color-indigo-50);
  --accent-foreground: var(--color-indigo-ink);
  --accent-strong: var(--color-indigo-100);
  --primary: var(--color-pink);
  --primary-foreground: var(--color-white);
  --primary-accent: var(--color-pink-hover);
  --secondary: var(--color-navy);
  --secondary-foreground: var(--color-white);
  --secondary-accent: var(--color-navy-hover);
  --info: var(--color-indigo);
  --info-foreground: var(--color-white);
  --success: var(--color-teal);
  --success-foreground: var(--color-white);
  --error: var(--color-code-pink);
  --border: var(--color-grey-200);
  --input: var(--color-grey-200);
  --outline: var(--color-pink);
  --body-foreground: var(--color-slate-700);
  --subtle-foreground: var(--color-slate-400);
  --eyebrow: var(--color-pink-ink);
  --code: var(--color-code-pink);
  --pink-on-dark: var(--color-pink-light);
  --surface-pink: var(--color-pink-50);
  --surface-teal: var(--color-teal-50);
  --border-strong: var(--color-grey-300);
  --border-accent: var(--color-indigo-200);
  --border-pink: var(--color-pink-100);
  --background-hover: var(--color-neutral-100);
  --white-tint: rgba(255, 255, 255, 0.13);
  --white-tint-strong: rgba(255, 255, 255, 0.2);

  /* Compositions (docs/design.md: gradients are composition, not colours) */
  --gradient-pink: linear-gradient(135deg, var(--color-pink) 0%, var(--color-pink-soft) 100%);
  --gradient-hero-wash: linear-gradient(180deg, #fff8fb 0%, #ffdeeb 100%);

  /* Type */
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 60px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 120px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;
}