/* =============================================
   SUPER PISOS PANAMA - Design Tokens
   Premium Design System v2.0
   ============================================= */
:root {
  /* === COLORS === */
  --color-primary:        #FF7F00;
  --color-primary-dark:   #CC6600;
  --color-primary-light:  #FF9F40;
  --color-primary-50:     rgba(255, 127, 0, 0.08);
  --color-primary-100:    rgba(255, 127, 0, 0.15);
  --color-primary-200:    rgba(255, 127, 0, 0.25);
  
  --color-secondary:      #0E71F0;
  --color-secondary-dark: #0A56B8;
  --color-secondary-light:#3B9BF5;
  --color-secondary-50:   rgba(14, 113, 240, 0.08);
  --color-secondary-100:  rgba(14, 113, 240, 0.15);
  
  --color-accent:         #EEF4FE;
  --color-accent-dark:    #D8E6FD;
  --color-white:          #FFFFFF;
  --color-black:          #0A0A0A;

  /* Grayscale premium */
  --color-gray-50:        #F8FAFC;
  --color-gray-100:       #F1F5F9;
  --color-gray-200:       #E2E8F0;
  --color-gray-300:       #CBD5E1;
  --color-gray-400:       #94A3B8;
  --color-gray-500:       #64748B;
  --color-gray-600:       #475569;
  --color-gray-700:       #334155;
  --color-gray-800:       #1E293B;
  --color-gray-900:       #0F172A;

  --color-text:           #1A1A1A;
  --color-text-muted:      #64748B;
  --color-text-light:      #94A3B8;
  --color-text-inverse:    #FFFFFF;

  --color-border:         #E2E8F0;
  --color-border-dark:     #CBD5E1;
  --color-border-light:    #F1F5F9;

  --color-success:        #10B981;
  --color-success-dark:   #059669;
  --color-warning:        #F59E0B;
  --color-warning-dark:   #D97706;
  --color-error:          #EF4444;
  --color-error-dark:     #DC2626;
  --color-info:          #3B82F6;

  /* === GRADIENTS === */
  --gradient-hero:        linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(14,113,240,0.35) 100%);
  --gradient-primary:     linear-gradient(135deg, #FF7F00 0%, #CC6600 100%);
  --gradient-primary-rev: linear-gradient(135deg, #CC6600 0%, #FF7F00 100%);
  --gradient-secondary:   linear-gradient(135deg, #0E71F0 0%, #0A56B8 100%);
  --gradient-warm:        linear-gradient(180deg, #F8FAFC 0%, #EEF4FE 100%);
  --gradient-card:        linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.75) 100%);
  --gradient-blue:        linear-gradient(135deg, #0E71F0 0%, #0A56B8 100%);
  --gradient-surface:     linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  --gradient-subtle:      linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,127,0,0.03) 100%);

  /* === TYPOGRAPHY === */
  --font-primary:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  --font-size-xs:         0.75rem;    /* 12px */
  --font-size-sm:         0.875rem;   /* 14px */
  --font-size-base:       1rem;       /* 16px */
  --font-size-md:         1.125rem;   /* 18px */
  --font-size-lg:         1.25rem;    /* 20px */
  --font-size-xl:         1.5rem;     /* 24px */
  --font-size-2xl:        1.875rem;   /* 30px */
  --font-size-3xl:        2.25rem;    /* 36px */
  --font-size-4xl:        3rem;       /* 48px */
  --font-size-5xl:        3.75rem;    /* 60px */

  --font-weight-light:    300;
  --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-snug:     1.4;
  --line-height-normal:   1.6;
  --line-height-relaxed:  1.75;

  /* Letter spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.025em;
  --letter-spacing-wider:  0.05em;
  --letter-spacing-widest: 0.1em;

  /* === 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;
  --space-32:  8rem;

  /* === BORDER RADIUS === */
  --radius-none:  0;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     16px;
  --radius-2xl:    24px;
  --radius-3xl:    32px;
  --radius-full:   9999px;

  /* === SHADOWS === */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:    0 2px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05);
  --shadow-xl:    0 16px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);
  --shadow-2xl:   0 24px 64px rgba(0,0,0,0.15), 0 12px 24px rgba(0,0,0,0.08);
  
  --shadow-primary:    0 4px 16px rgba(255,127,0,0.25), 0 2px 8px rgba(255,127,0,0.15);
  --shadow-primary-lg: 0 8px 32px rgba(255,127,0,0.35), 0 4px 12px rgba(255,127,0,0.2);
  --shadow-secondary:   0 4px 16px rgba(14,113,240,0.2), 0 2px 8px rgba(14,113,240,0.12);
  --shadow-success:     0 4px 16px rgba(16,185,129,0.2);
  --shadow-error:       0 4px 16px rgba(239,68,68,0.2);
  
  /* Inner shadows */
  --shadow-inner:      inset 0 2px 4px rgba(0,0,0,0.06);
  --shadow-inner-lg:   inset 0 4px 8px rgba(0,0,0,0.08);

  /* === TRANSITIONS === */
  --transition-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:    250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:    400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth:  300ms cubic-bezier(0.25, 0.1, 0.25, 1);

  /* === LAYOUT === */
  --container-max:      1280px;
  --container-narrow:   960px;
  --container-wide:     1440px;
  --container-padding:  1.5rem;
  --header-height:      72px;
  --header-height-mob:  64px;

  /* === Z-INDEX === */
  --z-base:       0;
  --z-above:      1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-fixed:      300;
  --z-overlay:    400;
  --z-modal:      500;
  --z-toast:      600;
  --z-tooltip:    700;
  --z-whatsapp:   999;

  /* Focus ring */
  --focus-ring:   0 0 0 3px rgba(255,127,0,0.4);
  --focus-ring-secondary: 0 0 0 3px rgba(14,113,240,0.4);
}