/* =========================================
   DESIGN TOKENS — SBZSolar
   ========================================= */

:root {
  /* Brand Colors */
  --color-navy:        #0B1F3A;
  --color-navy-deep:   #060F1E;
  --color-navy-mid:    #123C69;
  --color-navy-light:  #1A4F8A;

  --color-gold:        #F6B100;
  --color-gold-light:  #FFD166;
  --color-gold-dark:   #D99B00;

  /* UI Colors */
  --color-white:       #FFFFFF;
  --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:        #1E293B;
  --color-text-muted:  #64748B;
  --color-text-light:  #94A3B8;

  --color-green:       #2FBF71;
  --color-green-light: #DCFCE7;
  --color-red:         #EF4444;

  /* Gradients */
  --gradient-hero:    linear-gradient(135deg, #060F1E 0%, #0B1F3A 50%, #123C69 100%);
  --gradient-gold:    linear-gradient(135deg, #F6B100 0%, #FFD166 100%);
  --gradient-card:    linear-gradient(160deg, #0B1F3A 0%, #123C69 100%);
  --gradient-surface: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);

  /* Typography */
  --font-sans:   'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:   ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Monaco, monospace;

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

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;

  /* Spacing */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* Layout */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --container-max: 1600px;

  --gutter: clamp(1rem, 4vw, 2rem);

  /* Borders */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  --border-thin: 1px solid;
  --border-base: 2px solid;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:   0 10px 40px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl:   0 20px 60px rgba(0,0,0,0.16), 0 8px 16px rgba(0,0,0,0.08);
  --shadow-navy: 0 8px 32px rgba(11,31,58,0.24);
  --shadow-gold: 0 4px 20px rgba(246,177,0,0.32);

  /* Transitions */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.64, 0, 0.78, 0);
  --ease-inout: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  /* Z-index scale */
  --z-below:   -1;
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-nav:     300;
  --z-toast:   400;

  /* Header height */
  --header-height: 72px;
}