/* =============================================
   VARIABLES — Design Tokens · Azul Premium
   ============================================= */

:root {
  /* ── Palette ── */
  --blue:          #1E4B7A;
  --blue-dark:     #0F2640;
  --blue-deep:     #0B1D2E;
  --blue-dim:      rgba(30, 75, 122, 0.06);
  --blue-glow:     rgba(30, 75, 122, 0.15);
  --blue-mid:      #2D6BB5;
  --blue-light:    #4A90D9;
  --blue-tint:     #EEF3FA;

  --gold:          #C59B4E;
  --gold-light:    #D8B976;
  --gold-dim:      rgba(197, 155, 78, 0.12);

  --black:         #1A1D23;
  --gray-700:      #3D4047;
  --gray-500:      #6B6F76;
  --gray-400:      #9BA0A6;
  --gray-200:      #DDE0E4;
  --gray-100:      #F0F2F5;
  --white:         #FFFFFF;

  /* ── Surfaces ── */
  --surface:       #F9FAFB;
  --surface-alt:   #F1F3F6;
  --border:        rgba(0, 0, 0, 0.06);

  /* ── Buttons ── */
  --btn-gradient:  linear-gradient(135deg, #2D6BB5 0%, #1E4B7A 100%);
  --btn-hover:     linear-gradient(135deg, #3A7EC9 0%, #234F85 100%);

  /* ── Radius ── */
  --radius-sm:     8px;
  --radius:        12px;
  --radius-lg:     16px;
  --radius-full:   9999px;

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

  /* ── Motion ── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration:      0.35s;
  --duration-slow: 0.5s;

  /* ── Dynamic ── */
  --bar-offset:    0px;
}