/* =============================================
   ALILO Design System — Design Tokens
   Brand: alilo (детские интерактивные игрушки)
   Version: 1.0
   ============================================= */

:root {
  /* ── Brand Colors ── */
  --alilo-primary: #00B7BD;
  --alilo-primary-dark: #009A9F;
  --alilo-primary-light: #4DD4D8;
  --alilo-primary-pale: #E0F7F8;

  --alilo-accent: #FFC72C;
  --alilo-accent-dark: #E5AD00;
  --alilo-accent-light: #FFD866;

  --alilo-star: #FFD458;

  /* ── Logo Letter Colors ── */
  --alilo-logo-a: #E84B8A;
  --alilo-logo-l1: #9B59B6;
  --alilo-logo-i: #3498DB;
  --alilo-logo-l2: #2ECC71;
  --alilo-logo-o: #F1C40F;

  /* ── Neutral ── */
  --alilo-white: #FFFFFF;
  --alilo-bg: #F8FFFE;
  --alilo-surface: #FFFFFF;
  --alilo-surface-alt: #F0FAFB;
  --alilo-border: #D4EDEF;
  --alilo-border-strong: #A8DDE0;

  --alilo-text: #1A3B3D;
  --alilo-text-secondary: #4A7C7F;
  --alilo-text-muted: #8BABAD;
  --alilo-text-on-primary: #FFFFFF;
  --alilo-text-on-accent: #1A3B3D;

  /* ── Semantic ── */
  --alilo-success: #2ECC71;
  --alilo-warning: #FFC72C;
  --alilo-error: #E74C3C;
  --alilo-info: #00B7BD;

  /* ── Typography ── */
  --alilo-font-heading: 'Nunito', sans-serif;
  --alilo-font-body: 'Nunito', sans-serif;
  --alilo-weight-regular: 400;
  --alilo-weight-semibold: 600;
  --alilo-weight-bold: 700;
  --alilo-weight-black: 900;

  --alilo-text-xs: 0.75rem;     /* 12px */
  --alilo-text-sm: 0.875rem;    /* 14px */
  --alilo-text-base: 1.125rem;  /* 18px — brand base */
  --alilo-text-lg: 1.25rem;     /* 20px */
  --alilo-text-xl: 1.5rem;      /* 24px */
  --alilo-text-2xl: 2rem;       /* 32px */
  --alilo-text-3xl: 2.5rem;     /* 40px */
  --alilo-text-4xl: 3.5rem;     /* 56px */
  --alilo-text-hero: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);

  --alilo-leading-tight: 1.2;
  --alilo-leading-normal: 1.5;
  --alilo-leading-relaxed: 1.7;

  /* ── Spacing ── */
  --alilo-space-xs: 0.25rem;    /* 4px */
  --alilo-space-sm: 0.5rem;     /* 8px */
  --alilo-space-md: 1rem;       /* 16px */
  --alilo-space-lg: 1.5rem;     /* 24px */
  --alilo-space-xl: 2rem;       /* 32px */
  --alilo-space-2xl: 3rem;      /* 48px */
  --alilo-space-3xl: 4rem;      /* 64px */
  --alilo-space-section: clamp(3rem, 2rem + 4vw, 6rem);

  /* ── Borders & Radius ── */
  --alilo-radius-sm: 8px;
  --alilo-radius-md: 12px;      /* brand standard */
  --alilo-radius-lg: 16px;
  --alilo-radius-xl: 24px;
  --alilo-radius-pill: 999px;
  --alilo-radius-blob: 30% 70% 70% 30% / 30% 30% 70% 70%;

  --alilo-border-width: 2px;

  /* ── Shadows ── */
  --alilo-shadow-sm: 0 2px 8px rgba(0, 183, 189, 0.08);
  --alilo-shadow-md: 0 4px 16px rgba(0, 183, 189, 0.12);
  --alilo-shadow-lg: 0 8px 32px rgba(0, 183, 189, 0.16);
  --alilo-shadow-card: 0 4px 20px rgba(0, 183, 189, 0.10);
  --alilo-shadow-button: 0 4px 12px rgba(0, 183, 189, 0.25);
  --alilo-shadow-accent: 0 4px 16px rgba(255, 199, 44, 0.35);

  /* ── Transitions ── */
  --alilo-duration-fast: 150ms;
  --alilo-duration-normal: 300ms;
  --alilo-duration-slow: 500ms;
  --alilo-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --alilo-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --alilo-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Z-Index ── */
  --alilo-z-base: 1;
  --alilo-z-dropdown: 100;
  --alilo-z-sticky: 200;
  --alilo-z-modal: 300;
  --alilo-z-toast: 400;

  /* ── Container ── */
  --alilo-container-sm: 640px;
  --alilo-container-md: 768px;
  --alilo-container-lg: 1024px;
  --alilo-container-xl: 1200px;
  --alilo-container-padding: clamp(1rem, 0.5rem + 2vw, 2rem);
}