/* ============================================
   DFC Industrial Services — Design Tokens
   ============================================ */

:root {
  /* ---- Colors ---- */
  --color-primary:       #FFFFFF;
  --color-primary-light: #F1F5F9;
  --color-primary-mid:   #E9ECEF;
  --color-secondary:     #0052A3;
  --color-accent:        #0066CC;
  --color-accent-glow:   rgba(0, 102, 204, 0.1);
  --color-white:         #FFFFFF;
  --color-offwhite:      #F1F5F9;
  --color-gray-100:      #D1D5DB;
  --color-gray-200:      #9CA3AF;
  --color-gray-300:      #6B7280;
  --color-gray-400:      #4B5563;
  --color-dark-text:     #0F1117;
  --color-success:       #28A745;
  --color-warning:       #FFC107;

  /* Gradients & Backgrounds */
  --gradient-hero:       linear-gradient(135deg, rgba(15, 17, 23, 0.75) 0%, rgba(15, 17, 23, 0.9) 100%);
  --gradient-dark:       #F1F5F9;
  --gradient-card:       #FFFFFF;
  --gradient-accent:     #0066CC;
  --gradient-btn:        #0066CC;
  --gradient-btn-hover:  #0052A3;

  /* ---- Typography ---- */
  --font-primary:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-hero:    clamp(2.5rem, 5vw, 4.5rem);
  --fs-h1:      clamp(2rem, 4vw, 3.5rem);
  --fs-h2:      clamp(1.5rem, 3vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.75rem);
  --fs-h4:      clamp(1.1rem, 1.5vw, 1.35rem);
  --fs-body:    1rem;
  --fs-body-lg: 1.125rem;
  --fs-small:   0.875rem;
  --fs-xs:      0.75rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extra:   800;

  --lh-tight:   1.2;
  --lh-normal:  1.6;
  --lh-loose:   1.8;

  /* ---- Spacing ---- */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;
  --space-5xl:  8rem;

  --section-padding: clamp(4rem, 8vw, 8rem);

  /* ---- Layout ---- */
  --container-max:   1280px;
  --container-narrow: 960px;

  /* ---- Borders & Radius ---- */
  --radius-sm:  0px;
  --radius-md:  0px;
  --radius-lg:  0px;
  --radius-pill: 0px;

  --border-subtle: 1px solid #DEE2E6;
  --border-light:  1px solid var(--color-accent);
  --border-card:   1px solid #DEE2E6;

  /* ---- Shadows ---- */
  --shadow-sm:    0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 12px 24px rgba(0, 0, 0, 0.12);
  --shadow-glow:  none;
  --shadow-card:  0 4px 16px rgba(0, 0, 0, 0.06);

  /* ---- Transitions ---- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast:   0.2s var(--ease-out);
  --transition-normal: 0.35s var(--ease-out);
  --transition-slow:   0.5s var(--ease-out);

  /* ---- Z-index ---- */
  --z-nav:     1000;
  --z-overlay: 900;
  --z-modal:   1100;
}