/* ============================================================
 * tokens.css — the SINGLE SOURCE OF TRUTH for PWLBtoday design tokens.
 *
 * Load this FIRST on every page (before any other stylesheet). Change a
 * value here and it propagates to everything that references the token.
 * See styleguide.html for the living reference of every token + component.
 *
 * Built from the existing --pt-* palette so nothing changes visually;
 * the win is one authoritative place to edit, plus new typography /
 * spacing / radius tokens the site didn't have before.
 * ============================================================ */
:root {
  /* ---- Brand colours ---- */
  --pt-navy:         #0a2540;
  --pt-navy-mid:     #143659;
  --pt-navy-light:   #1a4775;
  --pt-orange:       #fd7e14;
  --pt-orange-hover: #e06b00;   /* darker orange for :hover on solid CTAs */
  --pt-orange-soft:  #fff5e9;   /* faint orange tint for backgrounds */

  /* rgb channels — for rgba() where you need an alpha (e.g. rgba(var(--pt-orange-rgb), 0.1)) */
  --pt-orange-rgb:   253, 126, 20;
  --pt-navy-rgb:     10, 37, 64;

  /* ---- Neutrals ---- */
  --pt-text:         #243240;   /* body text */
  --pt-muted:        #6c757d;   /* secondary text */
  --pt-line:         #e9ecef;   /* borders / dividers */
  --pt-line-soft:    #f1f3f5;   /* faint fills */
  --pt-bg:           #f7f8fa;   /* page background */
  --pt-white:        #ffffff;

  /* ---- Status / semantic ---- */
  --pt-green:        #28a745;   /* live / positive / up */
  --pt-red:          #b04632;   /* negative / down */
  --pt-linkedin:     #0a66c2;

  /* ---- Gradients ---- */
  --pt-navy-grad:      linear-gradient(120deg, #0a2540 0%, #143659 60%, #1a4775 100%);
  --pt-navy-grad-diag: linear-gradient(135deg, #0a2540 0%, #1a4775 100%);

  /* ---- Typography ----
   * Base is the system stack (what most of the site uses). Some pages
   * also load DM Sans / Playfair / IBM Plex from Google Fonts — point
   * --font-sans at "DM Sans" here if/when you standardise on it. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* type scale */
  --fs-h1:   1.75rem;
  --fs-h2:   1.4rem;
  --fs-h3:   1.15rem;
  --fs-h4:   1rem;
  --fs-body: 0.95rem;
  --fs-sm:   0.82rem;
  --fs-xs:   0.74rem;

  /* weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* ---- Radii ---- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --pt-shadow-navy:        0 6px 18px rgba(10, 37, 64, 0.10);
  --pt-shadow-navy-strong: 0 10px 28px rgba(10, 37, 64, 0.16);

  /* ---- Layout ---- */
  --shell-header-h:           60px;
  --shell-sidebar-w:          220px;
  --shell-sidebar-w-collapsed: 64px;

  /* ---- Shell aliases (back-compat with existing code) ---- */
  --shell-bg:          var(--pt-bg);
  --shell-fg:          var(--pt-text);
  --shell-fg-muted:    var(--pt-muted);
  --shell-border:      var(--pt-line);
  --shell-accent:      var(--pt-orange);
  --shell-accent-soft: var(--pt-orange-soft);
  --shell-contact:     var(--pt-navy);
}