/* ==========================================================================
   VARIABLES
   Single source of truth for design tokens. Every color, font, spacing,
   radius, breakpoint reference, and transition used across the site is
   defined here once and consumed everywhere else via var(--token-name).

   Changing the brand palette or type scale later means editing this file
   only — no other CSS file should contain a raw hex value or px font-size.

   v2 (visual redesign pass): type scale and key spacing/section paddings
   switched to clamp() for fluid scaling between mobile and desktop,
   instead of jumping at fixed breakpoints. New card/shadow/radius/easing
   tokens added to support the buttons/cards/forms/nav refresh.
   ========================================================================== */

:root {
  /* ---- Brand color: primary (dark blue) ----
     Used for: header/footer background, headings on light backgrounds,
     primary buttons, the "About" page banner overlay. */
  --color-primary: #00486d;
  --color-primary-dark: #002e46; /* hover/active state for primary elements */
  --color-primary-tint: #e8eef1; /* very light blue-gray, alternate section bg */

  /* ---- Brand color: accent (teal green) ----
     Used for: links, CTA hover states, active nav item, the
     "Investment-Meetings" page banner overlay. */
  --color-accent: #006d5b;
  --color-accent-dark: #004b3e; /* hover/active state for accent elements */
  --color-accent-tint: #e5f0ec; /* very light teal, badges/highlights */

  /* ---- Neutrals ---- */
  --color-text: #1a2226;        /* body copy: near-black, warmer than pure black */
  --color-text-muted: #56666d;  /* secondary text, captions, meta, footer copy */
  --color-border: #d7dee1;      /* dividers, input borders */
  --color-border-subtle: #e9edef; /* softer border for cards, quieter than --color-border */
  --color-bg: #ffffff;          /* page background */
  --color-bg-alt: #f6f8f9;      /* alternate section background */
  --color-white: #ffffff;

  /* ---- Feedback (form validation states) ----
     Deliberately outside the brand palette so errors read unambiguously
     and are never mistaken for a themed/branded element. */
  --color-success: #1e7b4d;
  --color-error: #b3261e;

  /* ---- Focus ring (accessibility) ----
     Used on every interactive element's :focus-visible state. */
  --color-focus-ring: var(--color-accent);

  /* ---- Typography: font families ----
     Heading/body: IBM Plex Serif + IBM Plex Sans (same type superfamily,
     so metrics harmonize). Logo: Roboto Black, used only for the wordmark. */
  --font-heading: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-logo: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Typography: fluid type scale (clamp: min, preferred, max) ----
     Scales smoothly between a 320px phone and a ~1440px desktop instead of
     jumping at breakpoints. Small utility sizes (xs/sm/base) stay fixed —
     fluid scaling only pays off once text is large enough to matter. */
  --text-xs: 0.75rem;    /* 12px — legal fine print, captions */
  --text-sm: 0.875rem;   /* 14px — nav, meta, form labels */
  --text-base: 1rem;     /* 16px — body copy */
  --text-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);   /* ~17–19px — lead paragraphs */
  --text-lg: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);     /* ~20–24px — H3 */
  --text-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);           /* ~24–32px — H2 */
  --text-2xl: clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);   /* ~30–44px — H1 on subpages */
  --text-3xl: clamp(2.25rem, 1.6rem + 3.4vw, 3.5rem);     /* ~36–56px — H1 on Home hero only */

  /* ---- Typography: line-height ---- */
  --leading-tight: 1.2;   /* headings */
  --leading-normal: 1.6;  /* body copy, long-form legal text */

  /* ---- Typography: font-weight ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 900; /* logo wordmark only */

  /* ---- Typography: letter-spacing ---- */
  --tracking-tight: -0.01em;  /* large display headings */
  --tracking-normal: 0;
  --tracking-wide: 0.03em;    /* buttons, nav, small caps-style labels */
  --tracking-wider: 0.08em;   /* eyebrow/label text */

  /* ---- Spacing scale (rem, 8px base) ---- */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-6: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-12: 6rem;    /* 96px */
  --space-16: 8rem;    /* 128px */

  /* ---- Fluid section spacing ----
     Vertical rhythm that breathes more on large screens without needing
     separate mobile/desktop rules for every section. */
  --space-section: clamp(3rem, 2.2rem + 4vw, 6rem);
  --space-stack-lg: clamp(2rem, 1.5rem + 2vw, 3.5rem);   /* between major blocks */
  --space-stack-md: clamp(1.25rem, 1rem + 1vw, 2rem);    /* between heading and body */
  --space-stack-sm: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);/* between paragraphs */

  /* ---- Border radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px; /* buttons */

  /* ---- Shadow (elevation) ---- */
  --shadow-sm: 0 1px 3px rgba(26, 34, 38, 0.08), 0 1px 2px rgba(26, 34, 38, 0.06);
  --shadow-md: 0 6px 16px rgba(26, 34, 38, 0.10), 0 2px 6px rgba(26, 34, 38, 0.06);
  --shadow-lg: 0 16px 32px rgba(26, 34, 38, 0.14), 0 4px 10px rgba(26, 34, 38, 0.08);
  --shadow-header: 0 2px 16px rgba(0, 20, 32, 0.18);

  /* ---- Transitions ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1); /* standard "material-ish" ease, used everywhere */
  --transition-fast: 150ms var(--ease);
  --transition-base: 250ms var(--ease);
  --transition-slow: 350ms var(--ease);

  /* ---- Layout ---- */
  --content-max-width: 1200px; /* max width of centered page content */
  --content-max-width-narrow: 720px; /* forms, long-form reading measure */
  --header-height: 76px;

  /* Breakpoint reference values (documentation only — CSS custom properties
     cannot be used inside @media conditions, so these are restated as literal
     px values in each file's media queries. Keep any new breakpoint in sync
     with this list.)
     --bp-sm: 480px
     --bp-md: 768px
     --bp-lg: 1024px
     --bp-xl: 1280px
  */
}