/*
  Live Playbook Sessions: design tokens
  Generated from tokens.json (one CSS variable per token, same name).
  TODO: VERIFY. The design system's project/tokens.json could not be read during the build.
  Every value below comes from the brief's fallback summary (Section 3b). Regenerate from
  tokens.json when it is available and keep the EXTENSION block at the end.
*/

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand colors (TODO: VERIFY) */
  --color-white: #FFFFFF;
  --color-mint: #F7FBF7;
  --color-navy: #143151;
  --color-orange: #FF5406;
  --color-orange-hover: #E64A00;
  --color-orange-pressed: #D94600;
  --color-forest: #28513E;
  --color-olive: #42552B;

  /* Tints (TODO: VERIFY) */
  --color-divider-light: rgba(20, 49, 81, 0.12);
  --color-divider-dark: rgba(255, 255, 255, 0.12);
  --color-card-surface-dark: rgba(255, 255, 255, 0.06);
  --color-field-border: rgba(20, 49, 81, 0.60);
  --color-series-on-navy: rgba(247, 251, 247, 0.80);
  --color-nav-hover-underline: rgba(255, 255, 255, 0.60);

  /* Type (TODO: VERIFY) */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --type-heading-weight: 600;
  --type-heading-tracking: -0.5px;
  --type-h1-size: 48px;   --type-h1-line: 52px;
  --type-h1-size-mobile: 34px; --type-h1-line-mobile: 40px;
  --type-h2-size: 36px;   --type-h2-line: 42px;
  --type-h2-size-mobile: 28px; --type-h2-line-mobile: 34px;
  --type-h3-size: 24px;   --type-h3-line: 30px;
  --type-session-size: 20px; --type-session-line: 28px;
  --type-body-size: 16px; --type-body-line: 24px;
  --type-body-large-size: 18px; --type-body-large-line: 26px;
  --type-small-size: 14px; --type-small-line: 20px;
  --type-button-size: 19px;
  --type-eyebrow-size: 13px; --type-eyebrow-tracking: 1.2px;

  /* Spacing scale (TODO: VERIFY token names) */
  --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;

  /* Layout */
  --radius: 4px;
  --radius-pill: 999px;
  --container-width: 1200px; /* Site override (3e.7). System default is 960px. */
  --gutter: 24px;
  --grid-columns: 12;
  --section-padding: 96px;
  --section-padding-mobile: 64px;
  --nav-height: 80px;
  --nav-height-mobile: 64px;
  --control-height: 44px;
  --hero-button-height: 48px;
  --measure: 720px;
  --measure-hero: 600px;

  /* ===== EXTENSION tokens (site-only; propose to the design system) ===== */
  --ext-blue: #1F5FBF;   /* 6.09:1 on white, 5.28:1 on ext-sky */
  --ext-teal: #0B6E77;   /* adjusted from #0E7C86 (4.29:1 on ext-sky failed). 5.98:1 white on teal */
  --ext-sky: #E6F0FA;
  --ext-sand: #FDF3E7;
  --ext-error: #B3261E;  /* 6.54:1 on white, 5.67:1 on ext-sky */

  /* Gradient stops are shades of navy, forest, and teal. No purple or magenta. */
  --ext-gradient-hero:
    radial-gradient(60% 70% at 85% 15%, rgba(11, 110, 119, 0.45) 0%, rgba(11, 110, 119, 0) 70%),
    linear-gradient(135deg, #0F2540 0%, #143151 50%, #0E4A5A 100%);
  --ext-gradient-band: linear-gradient(135deg, #28513E 0%, #1B5A4A 50%, #0B5F66 100%);
  --ext-gradient-tile-title: linear-gradient(135deg, #143151 0%, #28513E 100%);
  --ext-gradient-footer: linear-gradient(135deg, #0F2540 0%, #143151 100%);
  --ext-gradient-panel-light: linear-gradient(135deg, #E6F0FA 0%, #F7FBF7 100%);
  --ext-gradient-rule: linear-gradient(90deg, #0B6E77 0%, #1F5FBF 100%);
}