/* ============================================================================
   HBS PERFORMANCE — Colors & Type
   Civil engineering brand. Confident, geometric, precise.
   Red mark + black wordmark. Built on Inter (UI) + Barlow Condensed (display).
   ============================================================================ */

/* ---------- Webfonts ----------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ====================================================================
     COLORS — base palette
     ==================================================================== */

  /* Brand red — sampled from the H-mark in logo */
  --hbs-red-50:  #fbecea;
  --hbs-red-100: #f5cfcb;
  --hbs-red-200: #ec9d96;
  --hbs-red-300: #e07067;
  --hbs-red-400: #d44d42;
  --hbs-red-500: #c8332d;   /* primary brand red */
  --hbs-red-600: #a82822;
  --hbs-red-700: #861e1a;
  --hbs-red-800: #621513;
  --hbs-red-900: #3c0c0a;

  /* Neutrals — concrete & graphite. Slightly warm so they feel built, not sterile. */
  --hbs-ink-50:  #f6f6f5;
  --hbs-ink-100: #ebebe9;
  --hbs-ink-200: #d6d6d2;
  --hbs-ink-300: #b6b6b1;
  --hbs-ink-400: #8a8a85;
  --hbs-ink-500: #5f5f5b;
  --hbs-ink-600: #3f3f3c;
  --hbs-ink-700: #2a2a28;
  --hbs-ink-800: #1a1a19;
  --hbs-ink-900: #0e0e0d;
  --hbs-white:   #ffffff;
  --hbs-black:   #111111;

  /* Steel — secondary cool accent for technical accents */
  --hbs-steel-100: #e6ecf0;
  --hbs-steel-300: #9fb1be;
  --hbs-steel-500: #5b7384;
  --hbs-steel-700: #354655;

  /* Semantic */
  --hbs-success: #2f7d4f;
  --hbs-warning: #d6a419;
  --hbs-danger:  #c8332d;
  --hbs-info:    #2f6fa8;

  /* ====================================================================
     SEMANTIC TOKENS — light theme (default)
     ==================================================================== */

  /* Surfaces */
  --bg:          var(--hbs-white);
  --bg-elevated: var(--hbs-white);
  --bg-subtle:   var(--hbs-ink-50);
  --bg-muted:    var(--hbs-ink-100);
  --bg-inverse:  var(--hbs-ink-900);

  /* Foreground */
  --fg1: var(--hbs-ink-900);
  --fg2: var(--hbs-ink-700);
  --fg3: var(--hbs-ink-500);
  --fg4: var(--hbs-ink-400);
  --fg-on-red:    var(--hbs-white);
  --fg-on-dark:   var(--hbs-white);
  --fg-inverse:   var(--hbs-white);

  /* Accent */
  --accent:        var(--hbs-red-500);
  --accent-hover:  var(--hbs-red-600);
  --accent-press:  var(--hbs-red-700);
  --accent-soft:   var(--hbs-red-50);

  /* Borders */
  --border:        var(--hbs-ink-200);
  --border-strong: var(--hbs-ink-400);
  --border-inverse: var(--hbs-ink-700);

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(200, 51, 45, 0.35);

  /* ====================================================================
     TYPOGRAPHY — families
     ==================================================================== */
  --font-display: "Barlow Condensed", "Oswald", "Helvetica Neue Condensed", Impact, sans-serif;
  --font-sans:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --fs-display-1: clamp(56px, 8vw, 112px);
  --fs-display-2: clamp(44px, 6vw, 80px);
  --fs-h1: clamp(36px, 4.5vw, 56px);
  --fs-h2: clamp(28px, 3.2vw, 40px);
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 13px;

  --lh-tight: 1.02;
  --lh-snug:  1.15;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  --ls-display: -0.01em;
  --ls-eyebrow: 0.18em;
  --ls-button:  0.06em;

  /* ====================================================================
     SPACING (4px baseline)
     ==================================================================== */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ====================================================================
     RADII — engineering aesthetic; small radii, sharp edges preferred
     ==================================================================== */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* ====================================================================
     ELEVATION
     ==================================================================== */
  --shadow-1: 0 1px 2px rgba(14, 14, 13, 0.06), 0 1px 1px rgba(14, 14, 13, 0.04);
  --shadow-2: 0 4px 12px rgba(14, 14, 13, 0.08), 0 1px 2px rgba(14, 14, 13, 0.04);
  --shadow-3: 0 12px 32px rgba(14, 14, 13, 0.12), 0 2px 6px rgba(14, 14, 13, 0.06);
  --shadow-inset: inset 0 0 0 1px rgba(14, 14, 13, 0.06);

  /* Content rails */
  --rail-w: 1280px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
}