/* Dustless Blasting Services — design tokens and base styles.
   Flattened from the design system for deployment: tokens/*.css + base.css. */

/* ===== tokens/fonts.css ===== */
/* Webfonts. Archivo is variable (wdth 100..125, wght 400..800) — the display face uses
   wdth 118 / wght 800 to give "Archivo Expanded". IBM Plex Sans + Mono for body and specs.
   Served from Google Fonts; no local binaries were supplied with the brand source. */

:root{
  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  /* the expanded axis setting that makes Archivo read as the DBS display face */
  --display-wdth:'wdth' 118; /* @kind font */
}

/* ===== tokens/colors.css ===== */
/* Primitives → semantic aliases. Components reference semantic names only. */
:root{
  /* Green — sampled from the logo gradient */
  --green-50:#F1F7E4;
  --green-100:#DDEDBE;
  --green-200:#C4E08C;
  --green-300:#A8CC33;  /* lime end of the logo gradient */
  --green-400:#8CC63F;
  --green-500:#6DB33F;  /* midpoint — the brand green */
  --green-600:#4FAA46;  /* green end of the logo gradient */
  --green-700:#3F7A22;
  --green-800:#2F5C19;
  --green-900:#1F3D11;

  /* Steel — brushed-metal ramp, cool cast */
  --steel-50:#F3F5F7;
  --steel-100:#E3E6EA;
  --steel-200:#CBCFD5;
  --steel-300:#A8AEB7;
  --steel-400:#838A94;
  --steel-500:#5E656F;
  --steel-600:#434952;
  --steel-700:#2C3037;
  --steel-800:#1E2126;
  --steel-900:#14161A;
  --steel-950:#0B0C0E;

  /* Status primitives */
  --red-500:#D8442E;    /* corrosion red — reads as rust, not error-generic */
  --amber-500:#E0A32E;
  --blue-500:#3F7FA8;   /* the water in "dustless" */

  /* Gradients — the metal is a token, not a decoration */
  --grad-steel:linear-gradient(160deg,#F0F0F0 0%,#B4B4B4 38%,#545454 62%,#90909C 100%); /* @kind color */
  --grad-green:linear-gradient(96deg,#A8CC33 0%,#4FAA46 100%); /* @kind color */

  /* Light surfaces */
  --color-bg:var(--steel-50);
  --color-bg-raised:#FFFFFF;
  --color-bg-sunken:var(--steel-100);
  --color-border:var(--steel-200);
  --color-border-strong:var(--steel-400);
  --color-text:var(--steel-950);
  --color-text-muted:var(--steel-500);
  --color-text-inverse:var(--steel-50);

  /* Dark surfaces — hero, proof sections, footer */
  --color-bg-dark:var(--steel-950);
  --color-bg-dark-raised:var(--steel-800);
  --color-border-dark:var(--steel-700);
  --color-text-on-dark:var(--steel-50);
  --color-text-on-dark-muted:var(--steel-300);

  /* Action */
  --color-action:var(--green-500);
  --color-action-hover:var(--green-600);
  --color-action-active:var(--green-700);
  --color-action-label:var(--steel-950);  /* black on green — 7.61:1 */
  --color-action-on-dark:var(--green-400);
  --color-link:var(--green-700);          /* 5.23:1 on white */
  --color-link-hover:var(--green-800);    /* darkens on hover — 7.94:1 on white */
  --color-focus-ring:var(--green-400);

  /* Status */
  --color-danger:var(--red-500);
  --color-warning:var(--amber-500);
  --color-info:var(--blue-500);
  --color-success:var(--green-700);
}

/* ===== tokens/typography.css ===== */
/* 1.25 modular scale, 8 steps. Paired leading per step. */
:root{
  --text-xs:0.75rem;    --leading-xs:1.5;
  --text-sm:0.875rem;   --leading-sm:1.55;
  --text-base:1rem;     --leading-base:1.65;
  --text-lg:1.25rem;    --leading-lg:1.5;
  --text-xl:1.563rem;   --leading-xl:1.35;
  --text-2xl:1.953rem;  --leading-2xl:1.25;
  --text-3xl:2.441rem;  --leading-3xl:1.15;
  --text-4xl:3.052rem;  --leading-4xl:1.05;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-display:800;

  --tracking-display:-0.01em;  /* headings */
  --tracking-eyebrow:0.14em;   /* mono eyebrows */
  --tracking-caps:0.06em;      /* badges, spec lines */
}

/* ===== tokens/spacing.css ===== */
/* 4px base, 12 steps. Layout widths and breakpoints alongside. */
:root{
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:20px;  --space-6:24px;  --space-8:32px;  --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;

  --measure:62ch;          /* readable line length */
  --container:1080px;      /* content column */
  --container-wide:1280px;

  --bp-xs:480px; --bp-sm:768px; --bp-md:1024px; --bp-lg:1280px; --bp-xl:1536px;

  --control-sm:32px; --control-md:40px; --control-lg:48px;
}

/* ===== tokens/elevation.css ===== */
/* Three radii plus a pill. Near-square on purpose: machinery, not SaaS. */
:root{
  --radius-sm:2px;
  --radius-md:4px;
  --radius-lg:8px;
  --radius-full:999px;

  --border-hairline:1px;
  --border-rule:3px;      /* alert left rule */
  --border-accent:4px;    /* service-card top rule */

  --shadow-1:0 1px 2px rgba(11,12,14,.08);
  --shadow-2:0 2px 8px rgba(11,12,14,.10);
  --shadow-3:0 8px 24px rgba(11,12,14,.14);
  --shadow-4:0 20px 48px rgba(11,12,14,.20);
}

/* ===== tokens/motion.css ===== */
/* Motion is rationed. The blast wipe is the only expressive movement in the system. */
:root{
  --dur-fast:120ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:420ms; /* @kind other */
  --ease-out:cubic-bezier(.2,.8,.2,1); /* @kind other */
  --ease-blast:cubic-bezier(.65,0,.35,1); /* @kind other */  /* the wipe */
}

/* ===== base.css ===== */
/* Element defaults. Everything here is derived from the tokens above. */
*{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-base);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-variation-settings:var(--display-wdth);text-transform:uppercase;letter-spacing:var(--tracking-display);margin:0;line-height:1.05;font-weight:var(--weight-display)}
h1{font-size:var(--text-4xl)}
h2{font-size:var(--text-xl)}
h3{font-size:var(--text-sm);font-weight:var(--weight-bold);letter-spacing:.02em}
h4{font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:.02em}
p{margin:0 0 var(--space-4)}
a{color:var(--color-link);text-decoration:underline;text-underline-offset:2px;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--color-action-active)}
:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
code,kbd,samp{font-family:var(--font-mono);font-size:.85em;background:var(--steel-100);padding:1px 5px;border-radius:var(--radius-sm)}
::selection{background:var(--green-200);color:var(--steel-950)}
hr{border:0;border-top:1px solid var(--color-border);margin:var(--space-8) 0}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}