/* =====================================================================
   PG4 Training — Design Tokens
   Single source of truth for colors, type, spacing, radii, shadows.
   Edit this file to re-theme the entire site.
   ===================================================================== */

:root {
  /* ---- Color: brand --------------------------------------------------- */
  --color-brand:        #14254a;   /* PG4 navy — shield core */
  --color-brand-deep:   #0a1530;   /* deeper shield navy */
  --color-brand-soft:   #1f3565;   /* navy tinted for surfaces */
  --color-accent:       #2b8fe0;   /* the blue wave in the logo */
  --color-accent-bright:#5cb1f5;
  --color-silver:       #c9ced6;   /* metallic border tone */
  --color-silver-dark:  #8a93a3;

  /* ---- Color: neutrals ------------------------------------------------ */
  --color-bg:           #ffffff;
  --color-surface:      #f5f7fa;   /* cool off-white */
  --color-surface-2:    #eef1f6;
  --color-ink:          #0b1a2e;   /* deep navy text */
  --color-ink-soft:     #3a4a63;
  --color-ink-mute:     #6b7689;
  --color-line:         #e5e8ee;
  --color-line-strong:  #c9ced6;

  /* ---- Color: utility ------------------------------------------------- */
  --color-success:      #1f9d6e;
  --color-warn:         #d99327;
  --color-danger:       #c63b3b;

  /* ---- Typography ----------------------------------------------------- */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                   Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                   Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular,
                   Menlo, Consolas, monospace;

  /* Modular scale (1.25 ratio, capped on small screens) */
  --fs-xs:   0.78rem;   /* 12.5px */
  --fs-sm:   0.88rem;   /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;
  --fs-4xl:  3.75rem;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-base:  0;
  --tracking-wide:  0.08em;
  --tracking-caps:  0.14em;

  /* ---- Spacing scale (4px grid) -------------------------------------- */
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  2.5rem;    /* 40 */
  --space-8:  3.5rem;    /* 56 */
  --space-9:  5rem;      /* 80 */
  --space-10: 7rem;      /* 112 */

  /* ---- Geometry ------------------------------------------------------- */
  --radius-sm: 4px;
  --radius:    6px;        /* default — sharp, premium */
  --radius-lg: 12px;
  --radius-pill: 999px;

  --container:        1200px;
  --container-narrow: 880px;

  /* ---- Shadows -------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(11, 26, 46, .06),
              0 4px 16px rgba(11, 26, 46, .08);
  --shadow-2: 0 4px 8px rgba(11, 26, 46, .08),
              0 16px 40px rgba(11, 26, 46, .12);
  --shadow-glow: 0 0 0 1px rgba(43, 143, 224, .35),
                 0 6px 24px rgba(43, 143, 224, .22);

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

  /* ---- Header height (used by anchor offsets) ------------------------ */
  --header-h: 72px;
}

@media (max-width: 720px) {
  :root {
    --fs-3xl: 2.25rem;
    --fs-4xl: 2.75rem;
    --header-h: 60px;
  }
}