/* variables.css — design system tokens */

:root {
  /* ─── Typography ─── */
  --font-family:
    'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-md: 1.125rem; /* 18px */
  --text-lg: 1.25rem; /* 20px */
  --text-xl: 1.5rem; /* 24px */
  --text-2xl: 1.875rem; /* 30px */
  --text-3xl: 2.25rem; /* 36px */
  --text-4xl: 2.7rem; /* 48px */
  --text-5xl: 3.75rem; /* 60px */
  --text-6xl: 4.5rem; /* 72px */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ─── Colors — Light Theme ─── */
  --clr-white: #ffffff;
  --clr-bg: #f7f7fa;
  --clr-bg-alt: #ededf3;
  --clr-surface: #ffffff;
  --clr-surface-2: #f0f0f5;

  --clr-text: #0e0e18;
  --clr-text-secondary: #54546e;
  --clr-text-muted: #8a8aa8;

  --clr-border: rgba(14, 14, 24, 0.09);
  --clr-border-light: rgba(14, 14, 24, 0.05);

  /* ─── Accent Palette ─── */
  --clr-orange: #ff4d1a;
  --clr-orange-dark: #e03500;
  --clr-pink: #e5197a;
  --clr-pink-dark: #c2106a;
  --clr-teal: #00bfa5;
  --clr-teal-dark: #009e87;

  --clr-orange-10: rgba(255, 77, 26, 0.1);
  --clr-pink-10: rgba(229, 25, 122, 0.1);
  --clr-teal-10: rgba(0, 191, 165, 0.1);

  /* ─── Gradients ─── */
  --grad-accent: linear-gradient(135deg, #ff4d1a 0%, #e5197a 100%);
  --grad-accent-webkit: -webkit-linear-gradient(
    135deg,
    #ff4d1a 0%,
    #e5197a 100%
  );

  --grad-hero: linear-gradient(135deg, #0e0822 0%, #1c0a42 50%, #091635 100%);
  --grad-hero-webkit: -webkit-linear-gradient(
    135deg,
    #0e0822 0%,
    #1c0a42 50%,
    #091635 100%
  );

  --grad-cta: linear-gradient(135deg, #160a2e 0%, #2e0d1e 60%, #120a30 100%);
  --grad-cta-webkit: -webkit-linear-gradient(
    135deg,
    #160a2e 0%,
    #2e0d1e 60%,
    #120a30 100%
  );

  --grad-footer: linear-gradient(180deg, #0c0c16 0%, #0a0a12 100%);

  --grad-warm-surface: linear-gradient(160deg, #fff6f1 0%, #fff0f8 100%);

  /* ─── Spacing ─── */
  --sp-1: 0.25rem; /* 4px */
  --sp-2: 0.5rem; /* 8px */
  --sp-3: 0.75rem; /* 12px */
  --sp-4: 1rem; /* 16px */
  --sp-5: 1.25rem; /* 20px */
  --sp-6: 1.5rem; /* 24px */
  --sp-8: 2rem; /* 32px */
  --sp-10: 2.5rem; /* 40px */
  --sp-12: 3rem; /* 48px */
  --sp-16: 4rem; /* 64px */
  --sp-20: 5rem; /* 80px */
  --sp-24: 6rem; /* 96px */
  --sp-32: 8rem; /* 128px */

  /* Section vertical rhythm */
  --section-py: 5rem;
  --section-py-lg: 7rem;

  /* ─── Container widths ─── */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1400px;

  /* ─── Borders & Radius ─── */
  --radius-sm: 0.375rem; /* 6px */
  --radius-md: 0.75rem; /* 12px */
  --radius-lg: 1rem; /* 16px */
  --radius-xl: 1.5rem; /* 24px */
  --radius-2xl: 2rem; /* 32px */
  --radius-full: 9999px;

  /* ─── Shadows ─── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12), 0 6px 18px rgba(0, 0, 0, 0.06);
  --shadow-2xl:
    0 24px 64px rgba(0, 0, 0, 0.16), 0 10px 24px rgba(0, 0, 0, 0.08);

  --shadow-accent: 0 8px 32px rgba(255, 77, 26, 0.25);
  --shadow-card-hover:
    0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);

  /* ─── Transitions ─── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-smooth: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Z-index layers ─── */
  --z-below: -1;
  --z-base: 0;
  --z-above: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}