/* CSS Custom Properties — Design Tokens */
/* Layer 1: Primitives | Layer 2: Semantic (intent-based) */

:root {
  /* =================================================================
     PRIMITIVE TOKENS — raw values, not used directly in components
     ================================================================= */

  /* Color primitives — mascot-inspired space theme */
  /* Deep space purples (bot mascot background gradient) */
  --color-space-950: #0d0820;
  --color-space-900: #1a1040;
  --color-space-800: #2d1869;
  --color-space-700: #3d2080;
  /* Teal/cyan (bot body color) */
  --color-teal-400: #4abfd8;
  --color-teal-500: #38b2cc;
  --color-teal-600: #2d9ab8;
  /* Magenta/pink (bot gradient diagonal accent) */
  --color-magenta-400: #c44b8a;
  --color-magenta-300: #d63384;
  /* WhatsApp green */
  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #1ebe57;
  /* Legacy aliases (keep for potential reuse) */
  --color-black-950: #050508;
  --color-black-900: #0a0a12;
  --color-black-800: #10101e;
  --color-purple-900: #1a0a2e;
  --color-purple-700: #3b1f6e;
  --color-white: #ffffff;
  --color-white-90: rgba(255, 255, 255, 0.9);
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-10: rgba(255, 255, 255, 0.1);

  /* Spacing scale — 4px base, named by multiple (not px value) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* Fluid type scale — clamp(min, fluid, max) */
  --font-size-xs:   clamp(0.75rem,  2vw,   0.875rem);
  --font-size-sm:   clamp(0.875rem, 2.5vw, 1rem);
  --font-size-base: clamp(1rem,     3vw,   1.125rem);
  --font-size-lg:   clamp(1.125rem, 3.5vw, 1.25rem);
  --font-size-xl:   clamp(1.25rem,  4vw,   1.5rem);
  --font-size-2xl:  clamp(1.5rem,   5vw,   2rem);
  --font-size-3xl:  clamp(2rem,     6vw,   3rem);
  --font-size-4xl:  clamp(2.5rem,   8vw,   4rem);

  /* Breakpoint reference values — use in media queries, NOT in var() */
  /* --bp-sm:  375px  — smallest supported viewport */
  /* --bp-md:  768px  — tablet */
  /* --bp-lg:  1024px — desktop */
  /* --bp-xl:  1280px — wide desktop */

  /* Border radius */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-full: 9999px;

  /* =================================================================
     SEMANTIC TOKENS — use these in all component and layout CSS
     ================================================================= */

  /* Backgrounds */
  --bg-page:             var(--color-space-900);
  --bg-surface:          var(--color-space-800);
  --bg-surface-elevated: var(--color-space-700);
  --bg-overlay:          rgba(26, 16, 64, 0.85);
  /* Hero gradient — diagonal deep purple to magenta hint */
  --bg-hero-gradient: linear-gradient(
    135deg,
    var(--color-space-950) 0%,
    var(--color-space-900) 50%,
    #3a1060 80%,
    #4a1050 100%
  );

  /* Text */
  --text-primary:   var(--color-white);
  --text-secondary: var(--color-white-60);
  --text-muted:     rgba(255, 255, 255, 0.35);

  /* Accents — mascot-inspired teal + magenta */
  --accent-primary:   var(--color-teal-400);
  --accent-secondary: var(--color-magenta-400);
  --accent-glow:      var(--color-teal-500);
  --accent-cta:       var(--color-whatsapp);
  --accent-cta-hover: var(--color-whatsapp-dark);

  /* Typography — Nunito for rounded, cartoon-friendly feel */
  --font-family-base:      'Nunito', 'Inter', system-ui, -apple-system, sans-serif;
  --font-weight-regular:   400;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --line-height-body:    1.6;
  --line-height-heading: 1.15;

  /* Layout */
  --max-width-content: 1200px;
  --gutter: var(--space-4);
}

/* Responsive gutter — wider on tablet and above */
@media (min-width: 768px) {
  :root {
    --gutter: var(--space-8);
  }
}