/* ============================================================
   ARC — American Restoration & Construction
   Brand foundations: color + type (slim build)
   Variable Archivo only — covers every weight & width.
   Sourced from the ARC Brand Style Guide v1, May 2026.
   ============================================================ */

@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-VariableFont_wdth_wght.ttf") format("truetype-variations"),
       url("fonts/Archivo-VariableFont_wdth_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations"),
       url("fonts/Archivo-Italic-VariableFont_wdth_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- COLOR — Brand core (style-guide values) -------- */
  --arc-vintage-navy:  #28293A;
  --arc-fabric-red:    #C13636;
  --arc-concrete:      #D2D3D7;
  --arc-white:         #FFFFFF;
  --arc-black:         #0B0C12;

  /* ---------- COLOR — Extended neutrals (derived) ----------- */
  --arc-paper:         #F6F6F4;
  --arc-fog:           #E6E7EA;
  --arc-concrete-2:    #BDBEC3;
  --arc-steel:         #7A7C86;
  --arc-graphite:      #45475A;
  --arc-navy-2:        #1C1D2A;
  --arc-navy-3:        #0F1018;

  /* ---------- COLOR — Semantic tokens ------------------------ */
  --bg:                var(--arc-paper);
  --bg-elevated:       var(--arc-white);
  --bg-inverse:        var(--arc-vintage-navy);

  --fg:                var(--arc-vintage-navy);
  --fg-muted:          var(--arc-steel);
  --fg-faint:          var(--arc-concrete-2);
  --fg-on-navy:        var(--arc-white);
  --fg-on-navy-muted:  rgba(255, 255, 255, 0.72);
  --fg-on-navy-faint:  rgba(255, 255, 255, 0.44);

  --border:            var(--arc-concrete);
  --border-strong:     var(--arc-concrete-2);
  --divider:           var(--arc-fog);

  --accent:            var(--arc-fabric-red);
  --accent-press:      #A52D2D;
  --accent-fg:         var(--arc-white);

  /* ---------- TYPE — Family + base sizing -------------------- */
  --font-sans:           "Archivo", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display:        "Archivo", system-ui, sans-serif;
  --font-condensed:      "Archivo", sans-serif;
  --font-expanded:       "Archivo", sans-serif;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --fs-display-xl: clamp(56px, 9vw, 128px);
  --fs-display:    clamp(44px, 6.5vw, 88px);
  --fs-h1:         clamp(36px, 4.5vw, 64px);
  --fs-h2:         clamp(28px, 3.2vw, 44px);
  --fs-h3:         clamp(22px, 2.2vw, 30px);
  --fs-h4:         18px;
  --fs-body-lg:    19px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-eyebrow:    12px;

  --lh-tight:    1.02;
  --lh-snug:     1.12;
  --lh-heading:  1.18;
  --lh-body:     1.55;

  --ls-display: -0.015em;
  --ls-heading: -0.005em;
  --ls-eyebrow:  0.14em;
  --ls-caps:     0.06em;

  /* ---------- SPACING & RADII ------------------------------ */
  --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-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* author-tunable radius scale (Tweaks: corner radius) */
  --r-scale: 1;

  /* ---------- SHADOW / ELEVATION --------------------------- */
  --shadow-sm: 0 1px 2px rgba(40, 41, 58, 0.06),
               0 1px 1px rgba(40, 41, 58, 0.04);
  --shadow-md: 0 6px 16px rgba(40, 41, 58, 0.08),
               0 2px 4px rgba(40, 41, 58, 0.06);
  --shadow-lg: 0 18px 40px rgba(40, 41, 58, 0.12),
               0 4px 10px rgba(40, 41, 58, 0.06);

  /* ---------- MOTION --------------------------------------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:    cubic-bezier(0.6, 0, 0.8, 0.2);
  --ease-std:   cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ---------- LAYOUT --------------------------------------- */
  --container-max: 1280px;
  --gutter:        clamp(20px, 4vw, 64px);
  --rule:          1px;
}

html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { font-family: var(--font-sans); }

.arc-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

::selection { background: var(--arc-vintage-navy); color: var(--arc-white); }

:where(a, button, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid var(--arc-vintage-navy);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}