/* =============================================================
   variables.css — Design tokens (single source of truth)
   Arsh Scrap Mart International
   ============================================================= */
:root {
  /* ---- Neutrals ---- */
  --color-ink-900:#0B0E11; --color-ink-800:#14181D; --color-ink-700:#1E242B;
  --color-ink-600:#2C343D; --color-ink-400:#5B6672; --color-ink-300:#8A95A1;
  --color-mist-200:#E6E9ED; --color-mist-100:#F4F6F8; --color-white:#FFFFFF;

  /* ---- Primary (green) — token names kept as "steel" so all components recolor here ---- */
  --color-steel-700:#0F3D28; --color-steel-600:#1A6B41; --color-steel-500:#248A54;
  --color-steel-300:#7FC8A0; --color-steel-100:#E4F1E9;

  /* ---- Eco (sustainability) ---- */
  --color-eco-700:#0F3D28; --color-eco-500:#248A54; --color-eco-100:#E3F1E9;

  /* ---- Copper / gold (metal highlight) ---- */
  --color-copper-600:#A9662E; --color-copper-500:#C67C3C; --color-copper-100:#F5E7DA;

  /* ---- Semantic ---- */
  --color-success:#2E8B57; --color-error:#C0392B; --color-warning:#B8860B; --color-focus:#248A54;

  /* ---- Roles ---- */
  --bg-page:var(--color-mist-100); --bg-surface:var(--color-white); --bg-inverse:var(--color-ink-900);
  --text-primary:var(--color-ink-900); --text-secondary:var(--color-ink-400); --text-inverse:var(--color-mist-100);
  --text-brand:var(--color-steel-600); --border-subtle:var(--color-mist-200); --border-strong:var(--color-ink-600);
  --accent:var(--color-steel-500); --accent-eco:var(--color-eco-500); --accent-metal:var(--color-copper-500);

  /* ---- Gradients ---- */
  --grad-hero:linear-gradient(160deg,#0B0E11 0%,#12211A 55%,#0F3D28 140%);
  --grad-steel:linear-gradient(135deg,#1A6B41 0%,#248A54 100%);
  --grad-metal:linear-gradient(120deg,#C67C3C 0%,#A9662E 100%);
  --grad-cta:linear-gradient(135deg,#12211A 0%,#0F3D28 100%);
  --overlay-img:linear-gradient(180deg,rgba(11,14,17,.15),rgba(11,14,17,.72));

  /* ---- Typography ---- */
  --font-display:"Space Grotesk","Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-eyebrow:0.8125rem; --fs-body-sm:0.9375rem; --fs-body:1.0625rem; --fs-body-lg:1.1875rem;
  --fs-h5:clamp(1.15rem,1rem + 0.6vw,1.35rem);
  --fs-h4:clamp(1.35rem,1.1rem + 1vw,1.75rem);
  --fs-h3:clamp(1.6rem,1.25rem + 1.6vw,2.25rem);
  --fs-h2:clamp(2rem,1.5rem + 2.4vw,3.25rem);
  --fs-h1:clamp(2.6rem,1.8rem + 4.2vw,5rem);

  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --lh-tight:1.05; --lh-heading:1.15; --lh-body:1.65;
  --tracking-caps:0.14em; --tracking-tight:-0.02em;

  /* ---- Spacing ---- */
  --space-2:.125rem; --space-4:.25rem; --space-8:.5rem; --space-12:.75rem; --space-16:1rem;
  --space-24:1.5rem; --space-32:2rem; --space-48:3rem; --space-64:4rem; --space-80:5rem;
  --space-96:6rem; --space-128:8rem;
  --section-y:clamp(4rem,3rem + 6vw,8rem);
  --gap-grid:clamp(1.25rem,1rem + 1.5vw,2rem);

  /* ---- Layout ---- */
  --container-max:1280px; --container-narrow:760px;
  --container-pad:clamp(1.25rem,.5rem + 3vw,2.5rem);

  /* ---- Radius / shadow / border ---- */
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(11,14,17,.06);
  --shadow-sm:0 2px 8px rgba(11,14,17,.08);
  --shadow-md:0 10px 30px rgba(11,14,17,.10);
  --shadow-lg:0 24px 60px rgba(11,14,17,.14);
  --border-hairline:1px solid var(--border-subtle);
  --ring-focus:0 0 0 3px rgba(36,138,84,.45);
  --glass-bg:rgba(20,24,29,.55); --glass-blur:saturate(160%) blur(14px);

  /* ---- Motion ---- */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --dur-fast:160ms; --dur-base:320ms; --dur-slow:640ms; --stagger:90ms;

  /* ---- Breakpoints (reference) ---- */
  --bp-sm:480px; --bp-md:768px; --bp-lg:992px; --bp-xl:1200px; --bp-2xl:1440px;

  /* ---- Nav ---- */
  --nav-h:98px; --nav-h-condensed:78px;
}