/* ============================================================
   Dimension Outdoor — Colors & Type
   ============================================================
   The brand is strictly black, white, and grey. No accent
   colours, no magenta, no chart palette. All UI roles
   (emphasis, muted, quiet, borders, hover, pressed) are
   served by a single 10-step grey ramp anchored on the
   wordmark grey #575757.
   ============================================================ */

/* ------------------------------------------------------------
   Dimension Outdoor Sans — the proprietary brand typeface.
   Shipped as 12 TTFs in /fonts. Weights 200–950 with italics at
   500, 600, and 950. This REPLACES the earlier Jost substitute
   and is used for BOTH display and body across the system.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Dimension Outdoor Sans";
  src: url("fonts/DimensionOutdoorSansFinal-ExtraLight.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Dimension Outdoor Sans";
  src: url("fonts/DimensionOutdoorSansFinal-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Dimension Outdoor Sans";
  src: url("fonts/DimensionOutdoorSansFinal-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Dimension Outdoor Sans";
  src: url("fonts/DimensionOutdoorSansFinal-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Dimension Outdoor Sans";
  src: url("fonts/DimensionOutdoorSansFinal-MediumItalic.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Dimension Outdoor Sans";
  src: url("fonts/DimensionOutdoorSansFinal-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Dimension Outdoor Sans";
  src: url("fonts/DimensionOutdoorSansFinal-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Dimension Outdoor Sans";
  src: url("fonts/DimensionOutdoorSansFinal-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Dimension Outdoor Sans";
  src: url("fonts/DimensionOutdoorSansFinal-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Dimension Outdoor Sans";
  src: url("fonts/DimensionOutdoorSansFinal-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Dimension Outdoor Sans";
  src: url("fonts/DimensionOutdoorSansFinal-ExtraBlack.ttf") format("truetype");
  font-weight: 950; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Dimension Outdoor Sans";
  src: url("fonts/DimensionOutdoorSansFinal-ExtraBlackItalic.ttf") format("truetype");
  font-weight: 950; font-style: italic; font-display: swap;
}

:root {
  /* ----------------------------------------------------------
     Brand / Logo colors
     The wordmark + tagline render as dark-grey-on-white or
     white-on-black. The only truly "brand" colors are:
     ---------------------------------------------------------- */
  --do-ink:          #2F2F2F;  /* wordmark black (optical, not pure #000) */
  --do-ink-pure:     #000000;  /* pure black background variant */
  --do-paper:        #FFFFFF;  /* primary surface */
  --do-accent-rule:  #4A4A4A;  /* the horizontal rule above the wordmark */

  /* ----------------------------------------------------------
     That's it for brand color. Dimension Outdoor is strictly
     black / white / grey. The greys below handle all UI roles
     (text, borders, surfaces, hover, pressed, disabled).
     ---------------------------------------------------------- */

  /* ----------------------------------------------------------
     Greys — the entire neutral system (anchored on the wordmark
     grey #575757). These carry all semantic roles.
     ---------------------------------------------------------- */
  --grey-50:  #F7F7F7;
  --grey-100: #EFEFEF;
  --grey-200: #E0E0E0;
  --grey-300: #C7C7C7;
  --grey-400: #A3A3A3;   /* theme lt2 */
  --grey-500: #7A7A7A;
  --grey-600: #575757;   /* wordmark grey */
  --grey-700: #404040;
  --grey-800: #2F2F2F;   /* ink */
  --grey-900: #1A1A1A;

  /* ----------------------------------------------------------
     Semantic foreground / background tokens
     ---------------------------------------------------------- */
  --fg-1: var(--grey-900);   /* headlines */
  --fg-2: var(--grey-700);   /* body */
  --fg-3: var(--grey-500);   /* meta, captions */
  --fg-inverse: var(--do-paper);

  --bg-1: var(--do-paper);
  --bg-2: var(--grey-50);
  --bg-3: var(--grey-100);
  --bg-inverse: var(--do-ink-pure);

  --border-subtle: var(--grey-200);
  --border-strong: var(--grey-400);
  --rule-mark: var(--do-accent-rule);

  /* Semantic status — all within the grey system. Dimension
     Outdoor does not use coloured info/success/warn/danger. */
  --status-emphasis: var(--grey-900);
  --status-muted:    var(--grey-600);
  --status-quiet:    var(--grey-400);
  --status-surface:  var(--grey-50);

  /* ----------------------------------------------------------
     Type system
     ----------------------------------------------------------
     ONE typeface across the whole brand — Dimension Outdoor Sans.
     Use weight to separate display from body:
       Display : 200 / 300 (ExtraLight, Light) for hero + sections
       Body    : 400 / 500 (Regular, Medium) for UI prose
       Emphasis: 600 / 700 (SemiBold, Bold) for headings + labels
       Heavy   : 800 / 900 / 950 reserved for stat numerals
     ---------------------------------------------------------- */
  --font-display: "Dimension Outdoor Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body:    "Dimension Outdoor Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (driven by the PPTX master: 40pt headline,
     24pt sub-head, 18pt body, 12pt caption at 1920×1080). */
  --fs-display: clamp(48px, 6vw, 88px);   /* hero / title slides */
  --fs-h1:      clamp(36px, 3.5vw, 56px); /* 40pt headline */
  --fs-h2:      clamp(22px, 2vw, 30px);   /* 24pt sub-head */
  --fs-h3:      18px;
  --fs-body:    16px;
  --fs-small:   13px;
  --fs-caption: 11px;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.45;

  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.08em;   /* used on wordmark + small caps */
  --ls-xwide:   0.22em;   /* tagline spacing */

  /* ----------------------------------------------------------
     Spacing / layout (decks use a 12-col grid on
     1920×1080; margins ~80px; gutter ~32px).
     ---------------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  80px;
  --sp-10: 120px;

  /* Corner radii — the brand is near-square. Cards and buttons
     use hairline radii; pills exist only for chart legends. */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;

  /* Elevation — flat system. One soft shadow for hover only. */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --shadow-2: 0 4px 16px rgba(0,0,0,.08);
  --shadow-focus: 0 0 0 2px var(--grey-900);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;
}

/* ============================================================
   Semantic element styles
   ============================================================ */
html { color: var(--fg-1); background: var(--bg-1); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-5);
  text-wrap: pretty;
}
h2, .h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}
h3, .h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}
p { margin: 0 0 var(--sp-4); }

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.display {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.01em;
}
.wordmark-tagline {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: var(--ls-xwide);
  text-transform: lowercase;
  color: var(--grey-600);
}

a { color: var(--grey-900); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--grey-600); }

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

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

/* Re-usable component primitives */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 44px;
  padding: 0 var(--sp-5);
  border: 1px solid var(--do-ink-pure);
  background: var(--do-ink-pure);
  color: var(--do-paper);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--radius-1);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--grey-700); border-color: var(--grey-700); }
.btn:active { background: var(--grey-900); }
.btn.ghost {
  background: transparent;
  color: var(--do-ink-pure);
}
.btn.ghost:hover { background: var(--do-ink-pure); color: var(--do-paper); }
.btn.inverse { background: var(--do-paper); color: var(--do-ink-pure); border-color: var(--do-paper); }
.btn.inverse:hover { background: var(--grey-100); border-color: var(--grey-100); }

.card {
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2);
  padding: var(--sp-5);
}