/* ============================================================
   AliSom — Design System Variables
   Identidade: Azul Royal + Dourado Metálico + Preto Elegante
   ============================================================ */

:root {
  /* --- Cores Base --- */
  --color-bg:          #07080d;
  --color-surface:     #0d1627;
  --color-surface-2:   #111d35;
  --color-card:        rgba(26, 61, 114, 0.18);
  --color-card-border: rgba(201, 169, 110, 0.18);

  /* --- Paleta Principal --- */
  --color-blue-deep:   #0f2448;
  --color-blue:        #1a3d72;
  --color-blue-mid:    #1e4d8c;
  --color-blue-light:  #2d6ab5;

  /* --- Dourado (Acento primário) --- */
  --color-gold:        #c9a96e;
  --color-gold-light:  #e0c485;
  --color-gold-dark:   #a07840;
  --color-gold-glow:   rgba(201, 169, 110, 0.35);

  /* --- Prata (Acento secundário) --- */
  --color-silver:      #8a9db5;
  --color-silver-light:#b0c4d8;

  /* --- Texto --- */
  --color-text:        #e8eef5;
  --color-text-muted:  #7a8fa5;
  --color-text-gold:   #c9a96e;

  /* --- Gradientes --- */
  --gradient-hero:     linear-gradient(135deg, #07080d 0%, #0f2448 50%, #1a3d72 100%);
  --gradient-card:     linear-gradient(135deg, rgba(26,61,114,0.3) 0%, rgba(15,36,72,0.5) 100%);
  --gradient-gold:     linear-gradient(135deg, #a07840 0%, #c9a96e 50%, #e0c485 100%);
  --gradient-button:   linear-gradient(135deg, #1a3d72 0%, #c9a96e 100%);
  --gradient-text:     linear-gradient(135deg, #c9a96e, #e0c485, #c9a96e);
  --gradient-overlay:  linear-gradient(to bottom, rgba(7,8,13,0) 0%, rgba(7,8,13,0.8) 60%, #07080d 100%);

  /* --- Sombras & Brilhos --- */
  --shadow-card:       0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-gold:       0 0 30px rgba(201, 169, 110, 0.3), 0 0 60px rgba(201, 169, 110, 0.15);
  --shadow-blue:       0 0 30px rgba(26, 61, 114, 0.5), 0 0 60px rgba(26, 61, 114, 0.25);
  --shadow-btn:        0 4px 20px rgba(201, 169, 110, 0.4);
  --shadow-nav:        0 4px 24px rgba(0, 0, 0, 0.6);

  /* --- Glassmorphism --- */
  --glass-bg:          rgba(13, 22, 39, 0.75);
  --glass-border:      rgba(201, 169, 110, 0.15);
  --glass-blur:        blur(16px);

  /* --- Tipografia --- */
  --font-heading:      'Cinzel', 'Georgia', serif;
  --font-body:         'Raleway', 'Segoe UI', sans-serif;

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

  /* --- Espaçamentos --- */
  --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;

  /* --- Bordas & Raios --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;
  --border-gold: 1px solid rgba(201, 169, 110, 0.3);
  --border-blue: 1px solid rgba(26, 61, 114, 0.5);

  /* --- Transições --- */
  --transition-fast:   0.15s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.6s ease;

  /* --- Layout --- */
  --container-max: 1200px;
  --nav-height:    80px;
}