/* =========================================================
   Smart Choice Pro Contractors LLC — Design Tokens
   ========================================================= */

:root {
  /* ── Colors ─────────────────────────────────────── */
  --color-bg:           #19355B;       /* Primary background */
  --color-bg-mid:       #142C4E;       /* ~10% darker */
  --color-bg-deep:      #0E1F38;       /* Footer / deepest */
  --color-bg-card:      #1C3A64;       /* Card surfaces */
  --color-bg-input:     #122848;       /* Form inputs */

  --color-accent:       #E8640A;       /* Orange — CTAs, highlights */
  --color-accent-light: #FF7D28;       /* ~15% lighter for hover */
  --color-accent-warm:  #D4520A;       /* Deeper warm variant */
  --color-accent-muted: rgba(232, 100, 10, 0.15);

  --color-text:         #F0EDE8;       /* Off-white body text */
  --color-text-muted:   #A8BDD4;       /* Muted / secondary text */
  --color-text-faint:   #6B8BAD;       /* Subtle labels */

  --color-white:        #FFFFFF;
  --color-border:       rgba(168, 189, 212, 0.15);
  --color-border-light: rgba(168, 189, 212, 0.08);

  /* ── Glow ───────────────────────────────────────── */
  --glow-accent:        0 0 32px rgba(232, 100, 10, 0.45), 0 0 64px rgba(232, 100, 10, 0.2);
  --glow-accent-sm:     0 0 16px rgba(232, 100, 10, 0.35);
  --glow-accent-xs:     0 0 8px  rgba(232, 100, 10, 0.25);

  /* ── Shadows ────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md:   0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg:   0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);

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

  /* ── Sizing ─────────────────────────────────────── */
  --container-max:  1200px;
  --container-pad:  clamp(1rem, 5vw, 2.5rem);

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

  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ── Motion ─────────────────────────────────────── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:  0.2s;
  --duration-base:  0.4s;
  --duration-slow:  0.7s;

  /* ── Nav ────────────────────────────────────────── */
  --nav-h:        72px;
  --nav-bg:       transparent;
  --nav-bg-scroll: rgba(14, 31, 56, 0.95);
}