/* ============================================================
   PALMA — CSS Custom Properties (Design Tokens)
   Change these values to switch themes (e.g., light mode).
   ============================================================ */
:root {
  /* ---- CORE COLORS (change these ~10 values for a new theme) ---- */
  --color-bg:          #0B1120;
  --color-surface:     #111827;
  --color-surface-2:   #1E293B;
  --color-primary:     #06B6D4;
  --color-primary-hover:#22D3EE;
  --color-accent:      #8B5CF6;
  --color-accent-hover:#A78BFA;
  --color-text:        #F1F5F9;
  --color-text-muted:  #94A3B8;
  --color-border:      #1E293B;
  --color-success:     #10B981;
  --color-white:       #FFFFFF;

  /* ---- GRADIENTS ---- */
  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  --gradient-hero:    linear-gradient(135deg, #0B1120 0%, #1a1a3e 50%, #0d2137 100%);
  --gradient-card:    linear-gradient(145deg, rgba(17,24,39,0.9), rgba(30,41,59,0.7));

  /* ---- TYPOGRAPHY ---- */
  --font-family:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs:    0.75rem;
  --font-size-sm:    0.875rem;
  --font-size-base:  1rem;
  --font-size-lg:    1.125rem;
  --font-size-xl:    1.25rem;
  --font-size-2xl:   1.5rem;
  --font-size-3xl:   1.875rem;
  --font-size-4xl:   2.25rem;
  --font-size-5xl:   3rem;
  --font-size-6xl:   3.75rem;
  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --font-weight-black:   900;
  --line-height-tight:   1.2;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.7;

  /* ---- SPACING ---- */
  --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;

  /* ---- BORDERS & RADII ---- */
  --radius-sm:  0.375rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;
  --radius-2xl: 1.5rem;
  --radius-full:9999px;

  /* ---- SHADOWS ---- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.3);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.3);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.3);
  --shadow-glow:0 0 20px rgba(6,182,212,0.3);

  /* ---- TRANSITIONS ---- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- LAYOUT ---- */
  --container-max:   1200px;
  --container-pad:   1.5rem;
  --header-height:   80px;

  /* ---- Z-INDEX ---- */
  --z-header:   100;
  --z-dropdown: 200;
  --z-overlay:  300;
  --z-modal:    400;
}