/* ============================================
   2 Friends — Design Tokens
   Single source of truth for all design values.
   Update DESIGN_SYSTEM.md when changing tokens.
   ============================================ */

:root {
  /* — Brand Colors — */
  --color-purple-dark: #300D42;
  --color-purple: #521F6A;
  --color-purple-800: #430B65;  /* btn hover / pressed */
  --color-purple-brand: #5C0F8B;
  --color-purple-100: #D0C5E2;  /* disabled btn bg, light btn hover */
  --color-orange: #FC560C;
  --color-orange-alt: #FF8300;
  --color-orange-100: #FFC2A3;  /* Social icon button bg in footer bar */
  --color-orange-300: #FE7F46;  /* Decorative paw prints on orange bg */
  --color-orange-500: #DA4E10;  /* Footer bottom bar text */
  --color-orange-50:  #FFDECF;  /* Footer bottom bar bg */

  /* — Surface Colors — */
  --color-bg-page: #F9F6F1;
  --color-bg-warm: #EEE9DF;
  --color-bg-green: #D2EA8E;
  --color-bg-green-light: #F4FDDB;
  --color-bg-green-form: #D5EC98;
  --color-bg-lavender: #E6DFF0;
  --color-bg-lavender-alt: #E5DFEF;
  --color-bg-lavender-light: #EBE5EE;
  --color-white: #FAF8F5;
  --color-white-pure: #FFFFFF;

  /* — Typography — */
  --font-display: 'Marvin', sans-serif;
  --font-body: 'Fustat', sans-serif;

  /* — Font Sizes — */
  --text-display-xl: 96px;
  --text-display-lg: 56px;
  --text-hero-tagline: 52px;   /* Hero tagline "Smart choice. Every day." */
  --text-heading-xl: 24px;
  --text-heading-lg: 20px;
  --text-body-lg: 20px;
  --text-body-md: 18px;
  --text-body-sm: 16px;
  --text-label: 14px;

  /* — Font Weights — */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* — Line Heights — */
  --lh-display: 1.1;
  --lh-body: 1.35;
  --lh-button: 1.4;
  --lh-tight: 1.2;

  /* — Letter Spacing — */
  --ls-display-xl: 2.88px;
  --ls-display-lg: 1.68px;

  /* — Spacing — */
  --space-2xs: 4px;
  --space-xs: 6px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* — Border Radius — */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 40px;
  --radius-circle: 48px;
  --radius-2xl: 56px;  /* Footer bottom bar */

  /* — Layout — */
  --page-max-width: 1440px;
  --content-max-width: 1392px;
  --content-padding: 24px;
  --card-width: 308px;
  --section-gap: 80px;

  /* — Transitions — */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* — Shadows — */
  --shadow-sm: 0 1px 3px rgba(48, 13, 66, 0.08);
  --shadow-md: 0 4px 12px rgba(48, 13, 66, 0.1);
  --shadow-lang-dropdown: 1px 3px 9px rgba(92, 15, 139, 0.2);
}

/* — Responsive Token Overrides — */
@media (max-width: 768px) {
  :root {
    --text-display-xl: 48px;
    --text-display-lg: 36px;
    --text-heading-xl: 20px;
    --text-body-lg:    18px;
    --text-body-md:    16px;
    --section-gap:     48px;
    --card-width:      280px;
  }
}