/* ============================================================
   BSP Tools Hub — Colors & Type
   ============================================================ */

/* Google Fonts: Barlow + Barlow Condensed (industrial geometric)
   These are the closest open-source matches to the squared,
   slightly-condensed letterforms in the BSP wordmark. */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800&family=Barlow+Condensed:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ----------------------------------------------------------
     BRAND CORE — derived from BSP logo
     PMS 7687 C  →  Blue   →  #1B449C
     PMS 424  C  →  Grey   →  #707372
     ---------------------------------------------------------- */
  --bsp-blue:        #1B449C;   /* PMS 7687 C — primary brand blue */
  --bsp-blue-deep:   #122F70;   /* darker hover/press */
  --bsp-blue-tint:   #3B6BC9;   /* lighter accent / link hover */
  --bsp-blue-pale:   #E6ECF6;   /* surface tint */

  --bsp-grey:        #707372;   /* PMS 424 C — primary brand grey */
  --bsp-grey-deep:   #4A4D4C;
  --bsp-grey-mid:    #9CA09F;
  --bsp-grey-pale:   #E5E6E5;

  /* ----------------------------------------------------------
     NEUTRALS — warm-cool industrial scale
     ---------------------------------------------------------- */
  --ink-900: #14181C;   /* near-black, body emphasis */
  --ink-800: #232830;
  --ink-700: #353B43;
  --ink-600: #4A4D4C;
  --ink-500: #707372;   /* = bsp-grey */
  --ink-400: #9CA09F;
  --ink-300: #C8CACA;
  --ink-200: #E5E6E5;
  --ink-100: #F2F3F2;
  --ink-050: #F8F9F8;
  --ink-000: #FFFFFF;

  /* ----------------------------------------------------------
     SEMANTIC — industrial signal palette
     Picked to read against blue+grey without clashing
     ---------------------------------------------------------- */
  --signal-success: #2E7D32;   /* go / pass */
  --signal-success-bg: #E6F2E7;
  --signal-warn:    #C77700;   /* caution / amber */
  --signal-warn-bg: #FBF0DC;
  --signal-danger:  #B3261E;   /* stop / fail */
  --signal-danger-bg: #FCE7E5;
  --signal-info:    var(--bsp-blue);
  --signal-info-bg: var(--bsp-blue-pale);

  /* ----------------------------------------------------------
     FOREGROUND / BACKGROUND TOKENS (semantic)
     ---------------------------------------------------------- */
  --fg-1: var(--ink-900);   /* primary text */
  --fg-2: var(--ink-700);   /* secondary text */
  --fg-3: var(--ink-500);   /* tertiary / meta */
  --fg-4: var(--ink-400);   /* placeholder / disabled */
  --fg-on-blue: #FFFFFF;
  --fg-link:    var(--bsp-blue);
  --fg-link-hover: var(--bsp-blue-deep);

  --bg-1: var(--ink-000);   /* page */
  --bg-2: var(--ink-050);   /* recessed surface */
  --bg-3: var(--ink-100);   /* card alt / hover row */
  --bg-4: var(--ink-200);   /* divider field */
  --bg-brand: var(--bsp-blue);
  --bg-brand-tint: var(--bsp-blue-pale);

  --border-1: var(--ink-200);
  --border-2: var(--ink-300);
  --border-strong: var(--ink-700);

  /* ----------------------------------------------------------
     TYPE — families
     ---------------------------------------------------------- */
  --font-display: "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Sizes (rem-equivalent values in px for clarity) */
  --fs-display:   56px;
  --fs-h1:        40px;
  --fs-h2:        30px;
  --fs-h3:        22px;
  --fs-h4:        18px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-micro:     12px;
  --fs-overline:  11px;

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  /* Letter-spacing */
  --ls-overline: 0.14em;  /* uppercase eyebrows */
  --ls-condensed: 0.02em;
  --ls-tight:    -0.01em;

  /* ----------------------------------------------------------
     SPACING — 4px base
     ---------------------------------------------------------- */
  --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;

  /* ----------------------------------------------------------
     RADII — minimal; industrial UI is mostly square
     ---------------------------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------
     SHADOWS / ELEVATION — restrained, never floaty
     ---------------------------------------------------------- */
  --shadow-1: 0 1px 0 rgba(20,24,28,0.04), 0 1px 2px rgba(20,24,28,0.06);
  --shadow-2: 0 1px 1px rgba(20,24,28,0.05), 0 4px 10px rgba(20,24,28,0.08);
  --shadow-3: 0 4px 16px rgba(20,24,28,0.10), 0 12px 28px rgba(20,24,28,0.12);
  --shadow-focus: 0 0 0 3px rgba(27,68,156,0.30);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(20,24,28,0.06);

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0.0, 1, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   280ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-1); -webkit-font-smoothing: antialiased; }
body { font-size: var(--fs-body); line-height: var(--lh-base); }

.bsp-display, h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-condensed);
  text-transform: uppercase;
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-condensed);
  text-transform: uppercase;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-condensed);
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

p { font-size: var(--fs-body); line-height: var(--lh-base); color: var(--fg-2); }

.overline, .eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--bsp-blue);
}

small, .small { font-size: var(--fs-small); color: var(--fg-3); }
.meta { font-size: var(--fs-micro); color: var(--fg-3); }

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code { background: var(--bg-3); padding: 1px 6px; border-radius: var(--radius-sm); }

a { color: var(--fg-link); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--fg-link-hover); border-bottom-color: currentColor; }

hr { border: 0; border-top: 1px solid var(--border-1); margin: var(--space-6) 0; }