/* =====================================================================
   Dynamis Construction Ltd. — Foundations
   Tokens for color and typography.
   Import this file at the top of any page using the brand.
   ===================================================================== */

/* ---------- Web fonts ----------
   Display: Anton — heavy industrial condensed. Used for ALL headlines,
            eyebrows, button labels, navigation. Always uppercase.
   Body:    Inter  — neutral humanist sans. Used for paragraph copy,
            forms, captions, table data. Mixed case.
   ----------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ============================================================
     COLOR — Brand
     ============================================================
     The brand runs on three pillars:
       • Pure black backgrounds (job-site after dark)
       • Bright crimson red (high-vis safety / signage red)
       • Clean white (galvanized steel / fresh chalk lines)
     Plus a tight neutral ramp for text hierarchy on dark surfaces.
  */

  /* Red — primary brand accent, sampled from the logo */
  --red-50:  #fdeef0;
  --red-100: #fbd2d6;
  --red-200: #f49aa2;
  --red-400: #cf2c3c;
  --red-500: #b01c2a;  /* PRIMARY brand red (logo + buttons + accents) */
  --red-600: #8e1521;
  --red-700: #6e1019;
  --red-900: #3a0810;

  /* Neutral ramp — runs nearly black to near white */
  --black:    #000000;
  --ink-950:  #0a0a0b;  /* page background (slightly lifted off pure black) */
  --ink-900:  #111114;  /* elevated surface / card */
  --ink-850:  #16161a;  /* card hover */
  --ink-800:  #1c1c22;  /* divider / outline on dark */
  --ink-700:  #2a2a32;  /* stronger divider */
  --ink-500:  #6b6b76;  /* muted text */
  --ink-400:  #8a8a94;  /* body text on dark */
  --ink-300:  #aeaeb6;  /* secondary text on dark */
  --ink-200:  #d4d4da;
  --ink-100:  #ececef;
  --white:    #ffffff;

  /* Semantic — names you use in components */
  --bg-base:        var(--ink-950);
  --bg-elevated:    var(--ink-900);
  --bg-elevated-2:  var(--ink-850);

  --fg-strong:      var(--white);   /* headlines, primary CTA labels */
  --fg-default:     var(--ink-300); /* body */
  --fg-muted:       var(--ink-400); /* captions, secondary descriptions */
  --fg-dim:         var(--ink-500); /* labels, eyebrow alt */

  --accent:         var(--red-500); /* default red usage */
  --accent-hover:   var(--red-600);
  --accent-tint:    rgba(176, 28, 42, 0.12); /* red wash behind icons */
  --accent-tint-2:  rgba(176, 28, 42, 0.20);

  --border-subtle:  var(--ink-800);
  --border-default: var(--ink-700);
  --divider:        rgba(255, 255, 255, 0.06);

  /* Status — used sparingly; the brand is mostly red+white+black */
  --success: #2fb672;
  --warning: #f0a829;
  --danger:  var(--red-500);

  /* ============================================================
     TYPE — font families
     ============================================================ */
  --font-display: "Anton", "Oswald", "Barlow Condensed", "Impact", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ============================================================
     TYPE — scale
     ============================================================
     Display is ALL CAPS, very tight tracking, line-height ~0.95.
     Body sits comfortably at 16px with 1.6 leading.
  */
  --fs-display-xl: clamp(56px, 8vw, 120px); /* hero "ONE CALL." */
  --fs-display-lg: clamp(44px, 5.5vw, 84px); /* section headlines "SERVICES" */
  --fs-display-md: clamp(32px, 3.5vw, 56px); /* card group headlines */
  --fs-display-sm: 28px;                     /* card titles "EQUIPMENT HAULING" */
  --fs-eyebrow:    13px;                     /* — WHAT WE DO */
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;

  --lh-display: 0.95;
  --lh-tight:   1.15;
  --lh-body:    1.6;

  --tracking-display: -0.01em;
  --tracking-eyebrow:  0.22em;
  --tracking-button:   0.05em;

  /* ============================================================
     SPACING / RADII / SHADOW
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.6);
  --shadow-red: 0 10px 30px rgba(176, 28, 42, 0.28);

  /* Section eyebrow rule width */
  --eyebrow-rule: 36px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 380ms;
}

/* =====================================================================
   SEMANTIC ELEMENT STYLES
   ===================================================================== */
html { background: var(--bg-base); color: var(--fg-default); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-default);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings — Anton, uppercase, tight */
.h-display, h1.display, .display {
  font-family: var(--font-display);
  font-weight: 400;       /* Anton is single-weight */
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  color: var(--fg-strong);
  margin: 0;
}

h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: var(--lh-display); letter-spacing: var(--tracking-display); font-size: var(--fs-display-xl); color: var(--fg-strong); margin: 0; }
h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: var(--lh-display); letter-spacing: var(--tracking-display); font-size: var(--fs-display-lg); color: var(--fg-strong); margin: 0; }
h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: var(--lh-tight); letter-spacing: var(--tracking-display); font-size: var(--fs-display-sm); color: var(--fg-strong); margin: 0; }
h4 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: var(--lh-tight); letter-spacing: 0.02em; font-size: 20px; color: var(--fg-strong); margin: 0; }

p { margin: 0 0 var(--space-4) 0; color: var(--fg-default); }
p.lead { font-size: var(--fs-body-lg); color: var(--ink-200); }
p.muted { color: var(--fg-muted); }

/* Eyebrow — small red label with a dash before it (a-la "— WHAT WE DO") */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: var(--eyebrow-rule);
  height: 2px;
  background: var(--accent);
}
.eyebrow.centered::after {
  content: "";
  width: var(--eyebrow-rule);
  height: 2px;
  background: var(--accent);
}

/* Accent — for the red word in two-tone headlines */
.accent { color: var(--accent); }

a { color: var(--fg-strong); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent); }