/* ──────────────────────────────────────────────────────────────────
   Concord Design Tokens — colors_and_type.css
   Source of truth for color, type, spacing, motion.
   Derived from Concord Brand Guidelines (Section 04 Color, 05 Typography).
   ────────────────────────────────────────────────────────────────── */

/* === Webfonts === */
@font-face {
  font-family: 'PP Radio Grotesk';
  src: url('fonts/PPRadioGrotesk-Ultralight.woff2') format('woff2'),
       url('fonts/PPRadioGrotesk-Ultralight.woff') format('woff');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Radio Grotesk';
  src: url('fonts/PPRadioGrotesk-Light.woff2') format('woff2'),
       url('fonts/PPRadioGrotesk-Light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Radio Grotesk';
  src: url('fonts/PPRadioGrotesk-LightItalic.woff2') format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'PP Radio Grotesk';
  src: url('fonts/PPRadioGrotesk-Regular.woff2') format('woff2'),
       url('fonts/PPRadioGrotesk-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Radio Grotesk';
  src: url('fonts/PPRadioGrotesk-RegularItalic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'PP Radio Grotesk';
  src: url('fonts/PPRadioGrotesk-Bold.woff2') format('woff2'),
       url('fonts/PPRadioGrotesk-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk Text';
  src: url('fonts/NHaasGroteskTXPro-55Rg.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk Text';
  src: url('fonts/NHaasGroteskTXPro-65Md.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk Text';
  src: url('fonts/NHaasGroteskTXPro-75Bd.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Franklin Gothic Book';
  src: url('fonts/FranklinGothic-Book.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* === COLOR — KEYSTONE (primary depth) === */
  --keystone-1: #041C20;  /* deepest near-black teal — primary background */
  --keystone-2: #052D34;  /* dark surface */
  --keystone-3: #0C4E5A;  /* mid teal — secondary action */
  --keystone-4: #638D94;
  --keystone-5: #A0C1C6;
  --keystone-6: #DEE7E7;

  /* === COLOR — COPPER (action & warmth) === */
  --copper-1: #2C140B;
  --copper-2: #422013;  /* warm dark surface */
  --copper-3: #844025;  /* primary action */
  --copper-4: #BC785D;  /* badge / signature accent */
  --copper-5: #E2B19E;  /* pale warm */
  --copper-6: #F2ECE2;  /* warm bone */

  /* === COLOR — BEDROCK (neutrals) === */
  --bedrock-1: #787A71;
  --bedrock-2: #ACADA6;
  --bedrock-3: #E7E8E1;
  --bedrock-4: #F7F8F1;  /* default light page */

  /* === COLOR — accents === */
  --topaz: #FFFECA;       /* yellow highlight — section eyebrows */
  --pearl: #FFFFFF;
  --ink:   #041C20;

  /* === SEMANTIC === */
  --bg-page:        var(--bedrock-4);
  --bg-surface:     var(--pearl);
  --bg-ink:         var(--keystone-1);
  --bg-night:       var(--keystone-2);
  --bg-warm:        var(--copper-2);
  --bg-mist:        var(--bedrock-3);

  --fg-primary:     var(--keystone-2);
  --fg-secondary:   var(--bedrock-1);
  --fg-muted:       var(--bedrock-2);
  --fg-on-dark:     var(--pearl);
  --fg-on-warm:     var(--copper-6);
  --fg-eyebrow:     var(--copper-3);
  --fg-eyebrow-on-dark: var(--topaz);

  --action-primary: var(--copper-3);
  --action-primary-shade: var(--copper-2);
  --action-secondary: var(--keystone-3);
  --action-secondary-shade: var(--keystone-2);
  --action-pale:    var(--copper-5);
  --badge:          var(--copper-4);

  --border-subtle:  var(--bedrock-3);
  --border-strong:  var(--keystone-2);
  --border-on-dark: rgba(255,255,255,0.10);

  /* === TYPE FAMILIES === */
  --font-display: 'PP Radio Grotesk', 'Neue Haas Grotesk Text', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'PP Radio Grotesk', 'Neue Haas Grotesk Text', 'Helvetica Neue', Arial, sans-serif;
  --font-system:  'Franklin Gothic Book', 'Franklin Gothic', 'Arial', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* === TYPE SCALE — semantic === */
  /* Title Tag — eyebrow / kicker */
  --type-title-tag-family: var(--font-display);
  --type-title-tag-weight: 700;
  --type-title-tag-size: 13px;
  --type-title-tag-line: 1.2;        /* 120% */
  --type-title-tag-tracking: 0.06em; /* 6% */
  --type-title-tag-case: uppercase;

  /* Display — hero, page openers */
  --type-display-family: var(--font-display);
  --type-display-weight: 300;
  --type-display-size: clamp(56px, 8vw, 128px);
  --type-display-line: 1.05;
  --type-display-tracking: -0.005em;

  /* H1 / Headline */
  --type-h1-family: var(--font-display);
  --type-h1-weight: 400;
  --type-h1-size: 64px;
  --type-h1-line: 1.10;
  --type-h1-tracking: 0;

  /* H2 */
  --type-h2-weight: 400;
  --type-h2-size: 44px;
  --type-h2-line: 1.15;

  /* H3 / Subhead */
  --type-h3-weight: 400;
  --type-h3-size: 28px;
  --type-h3-line: 1.25;

  /* H4 — small subhead */
  --type-h4-weight: 400;
  --type-h4-size: 20px;
  --type-h4-line: 1.3;

  /* Body large */
  --type-body-lg-weight: 300;
  --type-body-lg-size: 18px;
  --type-body-lg-line: 1.5;

  /* Body */
  --type-body-weight: 300;
  --type-body-size: 16px;
  --type-body-line: 1.55;

  /* Caption / small */
  --type-caption-weight: 400;
  --type-caption-size: 13px;
  --type-caption-line: 1.4;

  /* Button */
  --type-button-weight: 400;
  --type-button-size: 13px;
  --type-button-line: 1.2;
  --type-button-tracking: 0.06em;
  --type-button-case: uppercase;

  /* === SPACING (8px base) === */
  --space-0: 0;
  --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;
  --space-11: 192px;

  /* === RADII === */
  --radius-0: 0;            /* default — 90° corners */
  --radius-pulse: 9999px;   /* photo-pulse circles ONLY */

  /* === BORDERS === */
  --border-1: 1px solid var(--border-subtle);
  --border-1-strong: 1px solid var(--border-strong);
  --border-1-dark: 1px solid var(--border-on-dark);

  /* === SHADOWS — used very sparingly. Concord prefers contrast over depth. === */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(4, 28, 32, 0.06);
  --shadow-2: 0 8px 24px rgba(4, 28, 32, 0.10);
  --shadow-warm: 0 12px 32px rgba(66, 32, 19, 0.20);

  /* === MOTION === */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --ease-out:      cubic-bezier(.16,.84,.44,1);

  /* === LAYOUT === */
  --page-max:       1280px;
  --page-pad:       var(--space-7);
}

/* === ELEMENT BASELINE === */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--type-body-weight);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* === HELPER CLASSES — semantic type === */
.type-title-tag {
  font-family: var(--type-title-tag-family);
  font-weight: var(--type-title-tag-weight);
  font-size: var(--type-title-tag-size);
  line-height: var(--type-title-tag-line);
  letter-spacing: var(--type-title-tag-tracking);
  text-transform: var(--type-title-tag-case);
}
.type-display {
  font-family: var(--type-display-family);
  font-weight: var(--type-display-weight);
  font-size: var(--type-display-size);
  line-height: var(--type-display-line);
  letter-spacing: var(--type-display-tracking);
}
.type-h1, h1 {
  font-family: var(--type-h1-family);
  font-weight: var(--type-h1-weight);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  letter-spacing: var(--type-h1-tracking);
  margin: 0;
}
.type-h2, h2 {
  font-weight: var(--type-h2-weight);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  margin: 0;
}
.type-h3, h3 {
  font-weight: var(--type-h3-weight);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  margin: 0;
}
.type-h4, h4 {
  font-weight: var(--type-h4-weight);
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line);
  margin: 0;
}
.type-body-lg, p.lead {
  font-weight: var(--type-body-lg-weight);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line);
}
.type-body, p {
  font-weight: var(--type-body-weight);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}
.type-caption {
  font-weight: var(--type-caption-weight);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
}
.type-button {
  font-family: var(--font-display);
  font-weight: var(--type-button-weight);
  font-size: var(--type-button-size);
  line-height: var(--type-button-line);
  letter-spacing: var(--type-button-tracking);
  text-transform: var(--type-button-case);
}