/* ==========================================================================
   SNK Contracting, LLC — Design Tokens
   Brand sheet: #FF7A00 Energy · #1F2A33 Strength · #9AA0A6 Balance · Montserrat
   Every visual value used by global.css / sections.css / responsive.css lives here.
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --snk-orange: #FF7A00;
  --snk-orange-hover: #FF8F26;
  --snk-orange-deep: #E86400;
  --snk-orange-soft: rgba(255, 122, 0, 0.12);
  --snk-navy: #1F2A33;
  --snk-navy-800: #26333E;
  --snk-navy-900: #172028;
  --snk-navy-950: #10171D;
  --snk-steel: #9AA0A6;
  --snk-steel-300: #C9CED3;
  --snk-steel-100: #E6EAED;
  --snk-white: #FFFFFF;
  --snk-black: #0B1014;

  /* ---- Surfaces & text -------------------------------------------------- */
  --snk-bg: #F4F6F8;
  --snk-bg-alt: #EAEEF1;
  --snk-surface: #FFFFFF;
  --snk-surface-2: #F8FAFB;
  --snk-t1: #1F2A33;            /* headings            15.2:1 on white */
  --snk-t2: #45525E;            /* body copy            8.5:1 on white */
  --snk-t3: #5B6874;            /* muted / meta         5.7:1 on white */
  --snk-tw: #FFFFFF;            /* text on dark bands */
  --snk-line: rgba(31, 42, 51, 0.12);
  --snk-line-strong: rgba(31, 42, 51, 0.24);
  --snk-accent: var(--snk-orange);
  --snk-accent-hover: var(--snk-orange-hover);
  --snk-accent-ink: #E06400;    /* orange TEXT on light grounds — large sizes only (3.2:1) */
  --snk-on-accent: #1F2A33;     /* text on orange fills 5.6:1 */
  --snk-overlay: rgba(16, 23, 29, 0.72);
  --snk-header-bg: rgba(244, 246, 248, 0.86);
  --snk-card-bg: var(--snk-surface);
  --snk-input-bg: #FFFFFF;

  /* ---- Dark bands (hero, projects, CTA, footer) ------------------------- */
  --snk-band: #1F2A33;
  --snk-band-2: #26333E;
  --snk-band-deep: #172028;
  --snk-band-t1: #F3F5F7;
  --snk-band-t2: #BCC5CD;       /* 8.4:1 on band */
  --snk-band-t3: #93A0AB;       /* 5.0:1 on band */
  --snk-band-line: rgba(255, 255, 255, 0.12);
  --snk-band-accent-ink: #FF8A1F;

  /* ---- Typography --------------------------------------------------------- */
  --snk-fh: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --snk-fb: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --snk-fs-display: clamp(2.65rem, 1.25rem + 4.3vw, 5rem);
  --snk-fs-h1: clamp(2.35rem, 1.45rem + 2.9vw, 4.1rem);
  --snk-fs-h2: clamp(1.9rem, 1.3rem + 2vw, 3.1rem);
  --snk-fs-h3: clamp(1.25rem, 1.08rem + 0.6vw, 1.6rem);
  --snk-fs-h4: clamp(1.05rem, 1rem + 0.2vw, 1.2rem);
  --snk-fs-lead: clamp(1.06rem, 0.98rem + 0.3vw, 1.25rem);
  --snk-fs-body: 1.0625rem;
  --snk-fs-small: 0.9375rem;
  --snk-fs-xs: 0.8125rem;
  --snk-fs-label: 0.75rem;
  --snk-fs-stat: clamp(2.6rem, 1.9rem + 2.4vw, 4rem);

  --snk-fw-regular: 400;
  --snk-fw-medium: 500;
  --snk-fw-semibold: 600;
  --snk-fw-bold: 700;
  --snk-fw-xbold: 800;

  --snk-lh-tight: 1.06;
  --snk-lh-snug: 1.22;
  --snk-lh-body: 1.7;

  --snk-ls-tight: -0.025em;
  --snk-ls-snug: -0.012em;
  --snk-ls-label: 0.18em;
  --snk-ls-wide: 0.08em;

  /* ---- Spacing scale ------------------------------------------------------ */
  --snk-sp-xs: 0.25rem;   /*   4px */
  --snk-sp-sm: 0.5rem;    /*   8px */
  --snk-sp-md: 1rem;      /*  16px */
  --snk-sp-lg: 1.5rem;    /*  24px */
  --snk-sp-xl: 2.5rem;    /*  40px */
  --snk-sp-2xl: 4rem;     /*  64px */
  --snk-sp-3xl: 8rem;     /* 128px */
  --snk-section-y: clamp(4.5rem, 2.8rem + 6vw, 8.5rem);
  --snk-section-y-sm: clamp(3rem, 2rem + 3.5vw, 5rem);
  --snk-gutter: clamp(1.25rem, 0.55rem + 2.6vw, 2.75rem);
  --snk-grid-gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);

  /* ---- Radius ------------------------------------------------------------- */
  --snk-r-sm: 6px;
  --snk-r-md: 12px;
  --snk-r-lg: 20px;
  --snk-r-xl: 28px;
  --snk-r-full: 9999px;

  /* ---- Shadows ------------------------------------------------------------ */
  --snk-shadow-sm: 0 1px 2px rgba(16, 23, 29, 0.06), 0 4px 14px rgba(16, 23, 29, 0.05);
  --snk-shadow-md: 0 18px 40px -18px rgba(16, 23, 29, 0.28);
  --snk-shadow-lg: 0 40px 80px -30px rgba(16, 23, 29, 0.45);
  --snk-shadow-glow: 0 14px 34px -10px rgba(255, 122, 0, 0.55);

  /* ---- Motion ------------------------------------------------------------- */
  --snk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --snk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --snk-duration: 0.35s;
  --snk-duration-slow: 0.8s;
  --snk-marquee-speed: 38s;

  /* ---- Layout ------------------------------------------------------------- */
  --snk-container: 1320px;
  --snk-container-narrow: 820px;
  --snk-nav-h: 96px;
  --snk-nav-h-scrolled: 76px;
  --snk-logo-w: 150px;
  --snk-logo-w-scrolled: 124px;
  --snk-z-header: 100;
  --snk-z-menu: 95;
  --snk-z-float: 80;
}