/* ============================================================
   VARIABLES.CSS — Southeastern Construction Co
   Design tokens: colors, fonts, spacing, shadows, motion
   ============================================================ */

:root {

  /* ── Color Palette ─────────────────────────────────────── */
  --color-bg:           #0D2137;
  --color-bg-mid:       #0A1A2C;
  --color-bg-deep:      #061220;
  --color-bg-card:      #112C47;
  --color-bg-elevated:  #15324F;

  --color-accent:       #E8640A;
  --color-accent-light: #F49D4F;
  --color-accent-warm:  #D46A0A;
  --color-accent-dim:   rgba(232, 100, 10, 0.15);
  --color-accent-border: rgba(232, 100, 10, 0.35);

  --color-text:         #F0EDE8;
  --color-text-muted:   #A09890;
  --color-text-faint:   #6A6260;

  --color-border:       rgba(240, 237, 232, 0.08);
  --color-border-mid:   rgba(240, 237, 232, 0.14);

  /* ── Typography ────────────────────────────────────────── */
  --font-heading:       'Poppins', sans-serif;
  --font-body:          'Inter', sans-serif;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;
  --fw-xblack:  900;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.75rem;
  --text-5xl:  3.5rem;

  /* ── 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-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.35);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.55);
  --shadow-xl:  0 16px 60px rgba(0,0,0,0.65);

  /* ── Accent Glow ───────────────────────────────────────── */
  --glow-accent:    0 0 28px rgba(232, 100, 10, 0.55), 0 0 60px rgba(232, 100, 10, 0.22);
  --glow-accent-sm: 0 0 14px rgba(232, 100, 10, 0.45), 0 0 30px rgba(232, 100, 10, 0.18);
  --glow-accent-xs: 0 0 8px  rgba(232, 100, 10, 0.35);
  --glow-warm:      0 0 24px rgba(212, 106, 10, 0.45);

  /* ── Motion / Transitions ──────────────────────────────── */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   150ms;
  --dur-base:   280ms;
  --dur-mid:    450ms;
  --dur-slow:   700ms;

  /* ── Layout ────────────────────────────────────────────── */
  --container-max: 1200px;
  --nav-height:    76px;
  --section-pad-y: clamp(4rem, 8vw, 7rem);
}