/* Giftey design tokens. Single source of truth for color, type, spacing,
   radius and elevation. Component styles consume these; they never
   introduce their own literals. Reference page: /design (dev server). */
:root {
  /* Brand red, sampled from the mascot's body. 600/700 are the hover and
     pressed steps; 100–300 are tints for soft backgrounds and the blush. */
  --brand-100: #ffeaed;
  --brand-200: #ffcbd1;
  --brand-300: #fc9ea1;
  --brand-500: #f83a52;
  --brand-600: #e52a42;
  --brand-700: #c41f34;
  --brand: var(--brand-500);
  --brand-hover: var(--brand-600);
  --brand-active: var(--brand-700);
  --brand-soft: var(--brand-100);
  --on-brand: #ffffff;

  /* Neutrals carry a faint warm, slightly pink bias so they sit with the
     red instead of reading as grey. */
  --ink: #1f1a1c;
  --ink-muted: #6b6064;
  --ink-subtle: #9a8f92;
  --paper: #fbf8f6;
  --surface: #ffffff;
  --surface-sunk: #f4efed;
  --line: #eae2e1;
  --line-strong: #d9cfce;

  /* Semantic colors stay separate from the brand hue so state is never
     confused with a call to action. Danger is the brand family's deep step. */
  --success: #2fa371;
  --success-soft: #e3f5ec;
  --warning: #e39a2c;
  --warning-soft: #fdf1dc;
  --danger: var(--brand-700);
  --danger-soft: var(--brand-100);

  --focus-ring: 0 0 0 3px #f83a5266;

  --font-display: "Manrope", "DM Sans", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 34px;
  --leading-tight: 1.2;
  --leading-body: 1.6;
  --tracking-label: 0.12em;
  --tracking-display: -0.02em;

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

  /* Rounder than usual on purpose: the mascot is all soft circles. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px #1f1a1c0f;
  --shadow-md: 0 6px 18px #1f1a1c14;
  --shadow-lg: 0 16px 40px #1f1a1c1a;
  --shadow-brand: 0 8px 24px #f83a5240;

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}