/* ============================================
   VARIABLES.CSS — Premium Design Tokens
   ============================================ */

:root {
  /* ── Brand Colors ── */
  --color-navy:            #0B1F3A;
  --color-navy-mid:        #0d1b2e;
  --color-navy-light:      #132844;
  --color-blue:            #1a6bb5;
  --color-blue-light:      #2E8BC0;
  --color-amber:           #F59E0B;
  --color-amber-light:     #FBB93D;
  --color-amber-dark:      #D97706;

  /* Aliases for compatibility */
  --color-primary-dark:    var(--color-navy);
  --color-primary:         var(--color-blue);
  --color-primary-light:   var(--color-blue-light);

  /* ── Neutrals ── */
  --color-white:           #FFFFFF;
  --color-off-white:       #F8F9FB;
  --color-gray-50:         #F9FAFB;
  --color-gray-100:        #F3F4F6;
  --color-gray-200:        #E5E7EB;
  --color-gray-300:        #D1D5DB;
  --color-gray-400:        #9CA3AF;
  --color-gray-bg:         #F5F7FA;
  --color-gray-text:       #6B7280;
  --color-gray-dark:       #374151;
  --color-black:           #000000;

  /* ── Semantic ── */
  --color-whatsapp:        #25D366;
  --color-whatsapp-hover:  #1ebe57;
  --color-overlay:         rgba(11, 31, 58, 0.88);

  /* ── Typography — Premium Stack ── */
  --font-display:          'Poppins', sans-serif;
  --font-body:             'Inter', 'Poppins', sans-serif;
  --font-family:           var(--font-body);

  --fw-light:              300;
  --fw-regular:            400;
  --fw-medium:             500;
  --fw-semibold:           600;
  --fw-bold:               700;
  --fw-extrabold:          800;
  --fw-black:              900;

  --fs-xs:                 0.6875rem;   /* 11px */
  --fs-sm:                 0.8125rem;   /* 13px */
  --fs-base:               1rem;        /* 16px */
  --fs-md:                 1.0625rem;   /* 17px */
  --fs-lg:                 1.1875rem;   /* 19px */
  --fs-xl:                 1.375rem;    /* 22px */
  --fs-2xl:                1.75rem;     /* 28px */
  --fs-3xl:                2.25rem;     /* 36px */
  --fs-4xl:                2.75rem;     /* 44px */
  --fs-5xl:                3.5rem;      /* 56px */
  --fs-6xl:                4.5rem;      /* 72px */

  /* ── Line heights ── */
  --lh-tight:              1.1;
  --lh-snug:               1.3;
  --lh-normal:             1.5;
  --lh-relaxed:            1.7;
  --lh-loose:              1.9;

  /* ── Letter spacing ── */
  --ls-tighter:            -0.04em;
  --ls-tight:              -0.02em;
  --ls-normal:             0;
  --ls-wide:               0.04em;
  --ls-wider:              0.08em;
  --ls-widest:             0.18em;

  /* ── Spacing Scale ── */
  --space-1:               0.25rem;
  --space-2:               0.5rem;
  --space-3:               0.75rem;
  --space-4:               1rem;
  --space-5:               1.25rem;
  --space-6:               1.5rem;
  --space-8:               2rem;
  --space-10:              2.5rem;
  --space-12:              3rem;
  --space-16:              4rem;
  --space-20:              5rem;
  --space-24:              6rem;
  --space-32:              8rem;

  /* Legacy aliases */
  --space-xs:              var(--space-2);
  --space-sm:              var(--space-3);
  --space-md:              var(--space-4);
  --space-lg:              var(--space-6);
  --space-xl:              var(--space-8);
  --space-2xl:             var(--space-12);
  --space-3xl:             var(--space-16);
  --space-4xl:             var(--space-20);
  --space-5xl:             var(--space-24);
  --space-6xl:             var(--space-32);

  /* ── Layout ── */
  --max-width:             1200px;
  --max-width-narrow:      800px;
  --header-height:         76px;

  /* ── Border Radius ── */
  --radius-sm:             6px;
  --radius-md:             10px;
  --radius-lg:             16px;
  --radius-xl:             24px;
  --radius-2xl:            32px;
  --radius-full:           9999px;

  /* ── Shadows — Premium ── */
  --shadow-xs:             0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:             0 1px 4px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md:             0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-lg:             0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-xl:             0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-2xl:            0 32px 80px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0,0,0,0.1);
  --shadow-header:         0 1px 0 rgba(255,255,255,0.05), 0 4px 24px rgba(0, 0, 0, 0.12);
  --shadow-card:           0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-card-hover:     0 16px 48px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-amber:          0 8px 32px rgba(245, 158, 11, 0.3);
  --shadow-whatsapp:       0 8px 24px rgba(37, 211, 102, 0.35);

  /* ── Transitions — Apple-inspired cubic beziers ── */
  --ease-out-expo:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:        cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart:     cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring:           cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:           cubic-bezier(0.4, 0, 0.2, 1);

  --transition-fast:       0.15s var(--ease-smooth);
  --transition-base:       0.3s var(--ease-smooth);
  --transition-slow:       0.5s var(--ease-out-quart);
  --transition-reveal:     0.8s var(--ease-out-expo);
  --transition-bounce:     0.5s var(--ease-spring);

  /* ── Glass morphism ── */
  --glass-bg:              rgba(255, 255, 255, 0.06);
  --glass-border:          rgba(255, 255, 255, 0.1);
  --glass-bg-light:        rgba(255, 255, 255, 0.7);
  --glass-border-light:    rgba(255, 255, 255, 0.8);
  --glass-blur:            20px;
}