/* =====================================================================
   Park Block Consulting — Colors & Type tokens
   ---------------------------------------------------------------------
   Sampled directly from the brand's marketing collateral, business card,
   and primary logo. Use these tokens for all brand-aligned design work.
   ===================================================================== */

@font-face {
  /* Bahnschrift is the brand font. It's a Microsoft system font and not
     freely redistributable. We include the closest open substitute
     (Barlow Condensed Semi-Condensed) and let Bahnschrift win when it's
     installed on the user's machine. */
  font-family: "Bahnschrift Fallback";
  src: local("Bahnschrift"),
       local("Bahnschrift SemiBold"),
       local("Bahnschrift SemiLight Condensed");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ─────────  BRAND CORE  ───────── */
  --brand-blue:        #1D89E2;   /* hexagon mark, primary accent */
  --brand-blue-bright: #0090DB;   /* infographic fills, slightly cleaner */
  --brand-navy:        #003258;   /* dominant dark surface */
  --brand-navy-deep:   #052B47;   /* cover/title backgrounds */
  --brand-navy-rich:   #0A2F4F;   /* card-back blue (bus card) */
  --brand-black:       #000000;   /* wordmark on light */
  --brand-white:       #FFFFFF;

  /* ─────────  LIGHT SURFACE FAMILY  ───────── */
  /* The "park" world: airy, cool, paper-like backdrops. */
  --surface-paper:     #ECF4FB;   /* most common light bg */
  --surface-mist:      #EAF3FB;   /* subtle alt */
  --surface-ice:       #F4F9FD;   /* lightest */
  --surface-white:     #FFFFFF;

  /* ─────────  DARK SURFACE FAMILY  ───────── */
  --surface-navy:      #003258;
  --surface-navy-deep: #052B47;
  --surface-ink:       #0A2540;

  /* ─────────  ISOMETRIC BLOCK GRADIENTS  ───────── */
  /* Sampled from "Block - Bright" / "Block - Opaque" assets. */
  --block-bright-top:    #C9DCEC;
  --block-bright-left:   #E0EAF2;
  --block-bright-right:  #8BAACB;

  --block-opaque-top:    #DEE7EF;
  --block-opaque-left:   #EEF2F5;
  --block-opaque-right:  #BCCEDF;

  /* ─────────  TEXT  ───────── */
  --fg-1:              #0B1F33;   /* primary on light (near-black w/ blue cast) */
  --fg-2:              #2B4865;   /* secondary on light */
  --fg-3:              #5C7795;   /* tertiary / captions */
  --fg-on-dark-1:      #FFFFFF;
  --fg-on-dark-2:      #B8D2EC;   /* secondary on navy (the light-blue copy) */
  --fg-on-dark-3:      #6E8FB2;
  --fg-link:           var(--brand-blue);

  /* ─────────  BORDERS / DIVIDERS  ───────── */
  --border-1:          rgba(11, 31, 51, 0.08);
  --border-2:          rgba(11, 31, 51, 0.14);
  --border-on-dark:    rgba(255, 255, 255, 0.14);

  /* ─────────  SEMANTIC  ───────── */
  --success:           #2EA77B;
  --warning:           #E8A53A;
  --danger:            #D94A4A;
  --info:              var(--brand-blue);

  /* ─────────  SHADOWS  ───────── */
  /* Soft, low-contrast shadows — a "block sitting on paper" feel. */
  --shadow-xs:  0 1px 2px rgba(11, 31, 51, 0.06);
  --shadow-sm:  0 2px 6px rgba(11, 31, 51, 0.08);
  --shadow-md:  0 8px 24px rgba(11, 31, 51, 0.10);
  --shadow-lg:  0 16px 48px rgba(11, 31, 51, 0.14);
  --shadow-xl:  0 24px 72px rgba(11, 31, 51, 0.18);
  /* Long block-shadow seen under the isometric cubes */
  --shadow-block: 0 30px 40px -10px rgba(60, 90, 130, 0.25);

  /* ─────────  RADII  ───────── */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;   /* default card */
  --radius-lg:  20px;   /* hero card / business card */
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* ─────────  SPACING (8pt grid)  ───────── */
  --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;

  /* ─────────  TYPOGRAPHY  ─────────
     Bahnschrift is a SemiBold/SemiLight/Condensed family. Our fallback
     stack reaches for installed Bahnschrift first, then a close
     condensed-grotesk match (Barlow Condensed), then DIN-like fallbacks. */
  --font-display: "Bahnschrift", "Bahnschrift Fallback",
                  "Barlow Semi Condensed", "DIN Alternate",
                  "Helvetica Neue", system-ui, sans-serif;
  --font-body:    "Bahnschrift", "Bahnschrift Fallback",
                  "Barlow Semi Condensed", "Helvetica Neue",
                  system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", "Roboto Mono",
                  ui-monospace, monospace;

  /* Type scale (semantic). Values are paired (size/line-height). */
  --type-display-1: 800 96px/1.02 var(--font-display); /* hero cover */
  --type-display-2: 800 72px/1.05 var(--font-display);
  --type-h1:        700 48px/1.10 var(--font-display); /* slide title */
  --type-h2:        700 36px/1.15 var(--font-display);
  --type-h3:        700 28px/1.20 var(--font-display);
  --type-h4:        600 22px/1.25 var(--font-display);
  --type-lead:      400 22px/1.45 var(--font-body);    /* dek under H1 */
  --type-body:      400 17px/1.55 var(--font-body);
  --type-body-sm:   400 15px/1.5  var(--font-body);
  --type-caption:   500 13px/1.4  var(--font-body);
  --type-eyebrow:   600 12px/1.0  var(--font-body);    /* tracked CONSULTING-style */
  --type-mono:      400 14px/1.5  var(--font-mono);

  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-eyebrow: 0.22em; /* the "C O N S U L T I N G" tracking */
}

/* =====================================================================
   SEMANTIC ELEMENT STYLES
   Drop these alongside the variables for a baseline reset. Override
   per-page as needed; nothing here is !important.
   ===================================================================== */

html, body {
  background: var(--surface-paper);
  color: var(--fg-1);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--type-h1); letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0 0 var(--space-4); }
h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0 0 var(--space-4); }
h3 { font: var(--type-h3); color: var(--fg-1); margin: 0 0 var(--space-3); }
h4 { font: var(--type-h4); color: var(--fg-1); margin: 0 0 var(--space-3); }
p  { font: var(--type-body); color: var(--fg-2); margin: 0 0 var(--space-4); text-wrap: pretty; }

.eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}
.lead { font: var(--type-lead); color: var(--fg-2); }
.caption { font: var(--type-caption); color: var(--fg-3); }
.mono { font: var(--type-mono); }

a { color: var(--fg-link); text-decoration: none; transition: opacity .18s ease; }
a:hover { opacity: 0.78; }

code, pre { font: var(--type-mono); }

::selection { background: var(--brand-blue); color: #fff; }