/* ============================================================
   SPRINT THEME — CSS CUSTOM PROPERTIES (Design Tokens)
   Source of truth: docs/DESIGN_TOKENS.json v2.0
   DO NOT hardcode any value outside this file.
   ============================================================ */

/* ---- Google Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700&family=JetBrains+Mono:wght@400&display=swap');

:root {
  /* --- Color Tokens --- */
  --color-navy:         #12304A;
  --color-navy-hover:   #0E263B;
  --color-teal:         #0F766E;
  --color-teal-hover:   #0B625C;
  --color-teal-active:  #084F4A;
  --color-amber:        #F4B740;
  --color-evidence-paper: #F4F1EA;
  --color-text-primary:   #17212B;
  --color-text-secondary: #5C6975;
  --color-page-bg:        #F6F8FA;
  --color-card-bg:        #FFFFFF;
  --color-border:         #D9E0E7;
  --color-border-strong:  #AAB6C1;
  --color-soft-navy:      #EAF0F5;
  --color-soft-teal:      #E7F4F1;
  --color-success:        #15803D;
  --color-success-bg:     rgba(21,128,61,0.10);
  --color-warning:        #B45309;
  --color-warning-bg:     rgba(180,83,9,0.10);
  --color-error:          #B91C1C;
  --color-error-bg:       rgba(185,28,28,0.10);
  --color-info:           #1D4ED8;
  --color-info-bg:        rgba(29,78,216,0.10);
  --color-focus-ring:     #60A5FA;
  --color-disabled-bg:    #E5E7EB;
  --color-disabled-text:  #8B95A1;
  --color-overlay:        rgba(18,48,74,0.56);

  /* --- Typography --- */
  --font-base: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Scale — Desktop */
  --text-hero:   56px;
  --text-h1:     46px;
  --text-h2:     34px;
  --text-h3:     26px;
  --text-body-lg: 19px;
  --text-body:    17px;
  --text-label:   15px;
  --text-caption: 13px;

  --lh-hero:  1.10;
  --lh-h1:    1.15;
  --lh-h2:    1.25;
  --lh-h3:    1.30;
  --lh-body:  1.65;
  --lh-label: 1.40;
  --lh-caption: 1.50;

  /* --- Spacing --- */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --section-mobile:  64px;
  --section-tablet:  80px;
  --section-desktop: 96px;

  /* --- Layout --- */
  --width-content: 1200px;
  --width-reading:  720px;
  --gutter-desktop: 32px;
  --gutter-mobile:  20px;

  /* --- Radius --- */
  --radius-btn:   8px;
  --radius-input: 8px;
  --radius-card:  12px;
  --radius-modal: 16px;
  --radius-pill:  999px;

  /* --- Shadow --- */
  --shadow-card: 0 8px 24px rgba(18,48,74,0.08);

  /* --- Motion --- */
  --motion-fast:   150ms;
  --motion-normal: 200ms;
  --motion-slow:   250ms;
}

/* ---- Mobile overrides ---- */
@media (max-width: 767px) {
  :root {
    --text-hero: 38px;
    --text-h1:   36px;
    --text-h2:   30px;
    --text-h3:   24px;
    --text-body: 16px;
    --gutter-desktop: var(--gutter-mobile);
  }
}