/* ============================================
   Design Tokens
   UEC - United Engineering Company
   ============================================ */

:root {
  /* ── Primary — UEC Red ── */
  --color-primary:        #C41E24;
  --color-primary-dark:   #9B1820;
  --color-primary-light:  #E84448;

  /* ── Accent — UEC Orange (logo flame) ── */
  --color-accent:         #E86A10;
  --color-accent-light:   #F4913A;

  /* ── Neutrals ── */
  --color-dark:           #1A1A2E;
  --color-dark-medium:    #2D2D44;
  --color-grey-dark:      #4A4A5A;
  --color-grey:           #7A7A8A;
  --color-grey-light:     #D0D0D8;
  --color-bg:             #F5F5F7;
  --color-bg-alt:         #EEEEF2;
  --color-white:          #FFFFFF;

  /* ── Functional ── */
  --color-success:        #2ECC71;
  --color-surface:        rgba(255, 255, 255, 0.85);

  /* ── Gradients ── */
  --gradient-brand:       linear-gradient(135deg, #C41E24 0%, #E86A10 100%);
  --gradient-brand-soft:  linear-gradient(135deg, rgba(196,30,36,0.08) 0%, rgba(232,106,16,0.08) 100%);
  --gradient-dark:        linear-gradient(135deg, #1A1A2E 0%, #2D2D44 100%);
  --gradient-hero:        linear-gradient(160deg, #1A1A2E 0%, #2D2D44 40%, #3D1520 100%);

  /* ── Typography ── */
  --font-family:          '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.75rem;    /* 28px */
  --font-size-3xl:        2.25rem;    /* 36px */
  --font-size-4xl:        3rem;       /* 48px */
  --font-size-5xl:        3.5rem;     /* 56px */

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

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

  /* ── Spacing ── */
  --space-xs:   0.25rem;   /* 4px */
  --space-sm:   0.5rem;    /* 8px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  4rem;      /* 64px */
  --space-4xl:  5rem;      /* 80px */
  --space-5xl:  6rem;      /* 96px */

  /* ── Layout ── */
  --max-width:      1200px;
  --max-width-wide: 1400px;
  --nav-height:     80px;

  /* ── Borders & Radius ── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 8px 40px rgba(0, 0, 0, 0.12);
  --shadow-xl:    0 16px 56px rgba(0, 0, 0, 0.16);
  --shadow-glow:  0 0 40px rgba(196, 30, 36, 0.15);

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

  /* ── Glass ── */
  --glass-bg:      rgba(255, 255, 255, 0.75);
  --glass-blur:    blur(16px);
  --glass-border:  1px solid rgba(255, 255, 255, 0.2);
}