/* ==========================================================================
   DESIGN TOKENS
   Central source of truth for colors, spacing, radius, and shadows.
   Load this file BEFORE any other stylesheet. Never hardcode a color,
   spacing value, radius, or shadow in component/page CSS — reference
   these variables instead so the whole site (and future projects built
   from this one) can be re-themed by editing only this file.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------------
     FONT
     --------------------------------------------------------------------- */
  --font-primary: "Zalando Sans Expanded", sans-serif;

  /* ---------------------------------------------------------------------
     BRAND COLORS
     --------------------------------------------------------------------- */
  --color-primary: #C8E63A;          /* main brand lime green */
  --color-primary-alt: #D2F14D;      /* lighter lime variant (badges/highlights) */

  --color-secondary: #2F2FE4;        /* brand blue */
  --color-secondary-light: #624DF0;  /* lighter purple-blue (gradient edge) */
  --color-secondary-dark: #002AC4;   /* blue hover/active state */

  --color-magenta: #B430BC;          /* logo + accent headings ("Built by pet lovers") */
  --color-lime-bright: #B2FF22;      /* bright hero highlight (distinct from --color-primary) */
  --color-orange: #FF6D2C;
  --color-orange-light: #FFC371;
  --color-pink-red: #F00154;
  --color-pink-red-light: #FE8398;

  --color-accent-purple: #7C3AED;
  --color-accent-purple-dark: #581CDC;
  --color-accent-indigo: #3B2ECC;
  --color-accent-indigo-alt: #3F38EA;
  --color-accent-pink: #FF537B;      /* sale badges / highlights */
  --color-accent-brown: #4A3728;

  /* ---------------------------------------------------------------------
     RAW COLORS FROM DESIGN SOURCE (usage not yet assigned)
     Added as-is from the design file's exact color codes. Once we confirm
     which UI elements each belongs to, rename to a semantic token above
     and update references — don't reference these generic names directly
     in component CSS.
     --------------------------------------------------------------------- */
  --color-raw-pink-1: #DF2881;   /* rgba(223, 40, 129, 1) */
  --color-raw-pink-2: #D92F8F;   /* rgba(217, 47, 143, 1) */
  --color-raw-red-pink: #FF316B; /* rgba(255, 49, 107, 1) */
  --color-raw-purple-1: #7D31FF; /* rgba(125, 49, 255, 1) */
  --color-raw-purple-2: #8922FF; /* rgba(137, 34, 255, 1) */

  /* ---------------------------------------------------------------------
     STATUS COLORS
     --------------------------------------------------------------------- */
  --color-success: #22C55E;
  --color-success-alt: #1F9A48;
  --color-success-dark: #008D2F;
  --color-danger: #C40003;
  --color-danger-alt: #CB1F22;
  --color-warning: #FF990A;

  /* ---------------------------------------------------------------------
     NEUTRALS
     --------------------------------------------------------------------- */
  --color-black: #000000;
  --color-black-rgb: 0, 0, 0;        /* use with rgba(var(--color-black-rgb), X) for overlays */
  --color-white: #FFFFFF;
  --color-white-rgb: 255, 255, 255;  /* use with rgba(var(--color-white-rgb), X) for overlays */
  --color-near-black: #0D0D0D;

  /* Gray scale (lightest to darkest) */
  --color-gray-50:  #FCFCFC;
  --color-gray-100: #F2F2F2;
  --color-gray-150: #EFEFEF;
  --color-gray-200: #C1C1C1;
  --color-gray-450: #848484;
  --color-gray-500: #6E6E6E;
  --color-gray-550: #5C5C5C;
  --color-gray-600: #6C757D;
  --color-gray-700: #313131;
  --color-gray-800: #121416;
  --color-gray-850: #101010;

  /* ---------------------------------------------------------------------
     SPACING SCALE (rem based — project uses html { font-size: 62.5% },
     so 1rem = 10px here)
     --------------------------------------------------------------------- */
  --space-2xs: 0.4rem;
  --space-xs:  0.8rem;
  --space-sm:  1.2rem;
  --space-md:  1.6rem;
  --space-lg:  2.4rem;
  --space-xl:  3.2rem;
  --space-2xl: 4.8rem;
  --space-3xl: 6.4rem;
  --space-4xl: 9.6rem;

  /* ---------------------------------------------------------------------
     BORDER RADIUS SCALE
     --------------------------------------------------------------------- */
  --radius-xs:   0.6rem;
  --radius-sm:   0.8rem;
  --radius-md:   1.2rem;
  --radius-lg:   1.6rem;
  --radius-xl:   2rem;
  --radius-2xl:  2.4rem;
  --radius-3xl:  3rem;
  --radius-full: 9rem;   /* pill-shaped buttons/badges */

  /* ---------------------------------------------------------------------
     SHADOW SCALE
     --------------------------------------------------------------------- */
  --shadow-sm: 0 0.2rem 0.8rem rgba(var(--color-black-rgb), 0.05);
  --shadow-md: 0 0.4rem 1.6rem rgba(var(--color-black-rgb), 0.08);
  --shadow-lg: 0 0.8rem 2.4rem rgba(var(--color-black-rgb), 0.08);
  --shadow-brand: 0 0.4rem 1.6rem rgba(0, 42, 196, 0.12);

  /* ---------------------------------------------------------------------
     GRADIENTS (used by the reusable CTA-banner component — color variants)
     --------------------------------------------------------------------- */
  --gradient-purple: linear-gradient(90deg, var(--color-secondary-light) 0%, var(--color-secondary-dark) 100%);
  --gradient-orange: linear-gradient(90deg, var(--color-orange) 0%, var(--color-orange-light) 100%);
  --gradient-pink: linear-gradient(90deg, var(--color-pink-red) 0%, var(--color-pink-red-light) 100%);

  /* ---------------------------------------------------------------------
     ANIMATION TIMING (for use by animations.css)
     --------------------------------------------------------------------- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}