/* Silver State Engineering — Design Tokens
   See ../DESIGN.md for full documentation. */

:root {
  /* Brand colors */
  --orange: #bd562d;
  --orange-dark: #a8481f;
  --dark: #272320;
  --dark-2: #2c2723;
  --cream: #ece6dd;
  --cream-2: #ddd2c4;
  --text-dark: #2a2521;
  --text-muted: #5f574f;
  --white: #ffffff;

  /* Article accent colors (used in insights article body) */
  --article-blue: #2d6a9f;
  --article-green: #2a7d52;
  --article-red: #a83d2e;

  /* Icon tints — normalize PNG stroke colors to brand orange / white / blue */
  --filter-icon-white: brightness(0) invert(1);
  --filter-icon-orange: brightness(0) saturate(100%) invert(48%) sepia(30%) saturate(1200%) hue-rotate(340deg) brightness(90%);
  --filter-icon-blue: brightness(0) saturate(100%) invert(34%) sepia(42%) saturate(1100%) hue-rotate(176deg) brightness(92%);

  /* Breakpoints (reference — use in media queries) */
  --bp-mobile-max: 767px;
  --bp-tablet-min: 768px;
  --bp-tablet-max: 1023px;
  --bp-laptop-min: 1024px;
  --bp-laptop-max: 1279px;
  --bp-desktop-min: 1280px;
  --bp-desktop-max: 1599px;
  --bp-large-min: 1600px;

  /* Container — mobile default (< 768px) */
  --container-max: 100%;
  --container-padding-x: 22px;

  /* Layout */
  --hero-height: 420px;
  --header-height: 72px;
  --logo-height: 62px;
}

/* Tablet: 768–1023px — container 90% */
@media (min-width: 768px) {
  :root {
    --container-max: 90%;
    --container-padding-x: 0;
    --hero-height: 480px;
    --header-height: 88px;
    --logo-height: 76px;
  }
}

/* Laptop: 1024–1279px — container 1050px */
@media (min-width: 1024px) {
  :root {
    --container-max: 1050px;
    --container-padding-x: 28px;
    --hero-height: 520px;
    --header-height: 108px;
    --logo-height: 96px;
  }
}

/* Desktop: 1280–1599px — container 1240px */
@media (min-width: 1280px) {
  :root {
    --container-max: 1240px;
    --hero-height: 560px;
    --header-height: 114px;
    --logo-height: 112px;
  }
}

/* Large desktop: ≥ 1600px — container 1400px */
@media (min-width: 1600px) {
  :root {
    --container-max: 1400px;
  }
}