/**
 * variables.css
 * Design tokens — 3T3 Solution 2026 revamp
 */

:root {
  /* =====================
     Brand Colors — refined navy + warm amber
     ===================== */
  --color-primary:       #1a6dd2;
  --color-primary-dark:  #1459ad;
  --color-primary-light: #5a9de6;
  --color-secondary:     #0f1729;
  --color-accent:        #e8913a;
  --color-accent-light:  #f0b06a;

  /* =====================
     Neutral / Text — warmer grays
     ===================== */
  --color-text:          #2d3748;
  --color-text-light:    #5a6577;
  --color-text-muted:    #94a0b4;
  --color-text-white:    #ffffff;
  --color-border:        #dfe4eb;
  --color-border-light:  #eef1f5;

  /* =====================
     Backgrounds
     ===================== */
  --color-bg:            #ffffff;
  --color-bg-alt:        #f5f7fa;
  --color-bg-dark:       #0f1729;
  --color-footer-bg:     #0f1729;
  --color-overlay:       rgba(26, 109, 210, 0.85);
  --color-overlay-dark:  rgba(15, 23, 41, 0.85);

  /* =====================
     Typography — Outfit + DM Sans
     ===================== */
  --font-heading:        'Outfit', sans-serif;
  --font-body:           'DM Sans', sans-serif;

  --font-size-xs:        0.75rem;
  --font-size-sm:        0.875rem;
  --font-size-base:      1rem;
  --font-size-md:        1.125rem;
  --font-size-lg:        1.25rem;
  --font-size-xl:        1.5rem;
  --font-size-2xl:       2rem;
  --font-size-3xl:       2.5rem;
  --font-size-4xl:       3.25rem;

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

  --line-height-tight:   1.2;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.8;

  /* =====================
     Spacing Scale
     ===================== */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;

  /* =====================
     Border Radius — rounder for 2026
     ===================== */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 50%;

  /* =====================
     Box Shadows — layered, softer
     ===================== */
  --shadow-sm:  0 1px 2px rgba(15,23,41,0.04), 0 1px 3px rgba(15,23,41,0.06);
  --shadow-md:  0 4px 8px rgba(15,23,41,0.06), 0 2px 4px rgba(15,23,41,0.04);
  --shadow-lg:  0 12px 32px rgba(15,23,41,0.08), 0 4px 12px rgba(15,23,41,0.04);
  --shadow-xl:  0 24px 56px rgba(15,23,41,0.12);

  /* =====================
     Transitions — refined easing
     ===================== */
  --transition:       0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast:  0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* =====================
     Layout
     ===================== */
  --container-max:    1200px;
  --container-pad:    24px;
  --section-pad:      96px;
  --header-height:    72px;

  /* =====================
     Z-Index Scale
     ===================== */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
}