/* ==========================================================================
   IKV Finservices — Design Tokens
   Single source of truth for colour, type, spacing, grid and motion.
   ========================================================================== */

:root {
  /* --- Brand palette ---------------------------------------------------- */
--c-navy: #071d49;          /* Midnight Navy  — primary backgrounds     */
  --c-navy-900: #04122c;
  --c-navy-800: #0a2a5e;
  --c-navy-700: #05173a;       /* Navy, one step deeper — hover deepen     */
  --c-blue: #123f91;          /* IKV Blue       — primary actions         */
  --c-blue-600: #1769d2;      /* Royal Blue     — secondary accents        */
  --c-gold: #d9a441;          /* Warm Gold      — fine rules, accents     */
  --c-gold-400: #e6b85f;      /* Warm Gold      — hover lift on light     */
  --c-gold-300: #eccb85;      /* Light Gold     — accents on dark surfaces */
  --c-gold-200: #f3dda9;      /* Pale Gold      — fills, highlights        */
  --c-green: #13834a;         /* Growth Green   — positive accents only   */
  --c-green-700: #0f6b3c;     /* Growth Green   — hover deepen             */
  --c-green-400: #2fa36b;     /* Light Green    — decorative accents only  */
  --c-green-100: #e7f4ec;     /* Mist Green     — soft fills               */
  --c-green-900: #0c4c2f;     /* Deep Green     — text on green fills      */

  /* Accent discipline
     ---------------------------------------------------------------------------
     Light gold and light green are decorative: use them for rules, borders,
     icons, underlines and fills. They do not reach 4.5:1 on white and must not
     carry body or small text.

     Growth green marks a positive, verified or completed state — never a
     return, a projection or a performance guarantee. Nothing on this site may
     use green to imply that an investment will perform.
     --------------------------------------------------------------------------- */

  --c-white: #ffffff;
  --c-mist: #f3f6fb;          /* Cool Mist      — alternating sections    */
  --c-mist-deep: #e8eef8;
  --c-slate: #526078;         /* Body copy                                */
  --c-ink: #101828;           /* Primary text                              */
  --c-border: #dce3ef;
  --c-alert: #b42318;         /* Validation / risk only                    */

  /* --- Semantic aliases ------------------------------------------------ */
  --color-surface: var(--c-white);
  --color-surface-alt: var(--c-mist);
  --color-surface-inverse: var(--c-navy);
  --color-text: var(--c-ink);
  --color-text-muted: var(--c-slate);
  --color-text-inverse: #ffffff;
  --color-border: var(--c-border);
  --color-accent: var(--c-blue);
  --color-accent-strong: var(--c-blue-600);

  /* Hover colour for links and text buttons. Navy on light surfaces (strong
     contrast, no blue cast); remapped to white inside every dark block so a
     hovered link never turns dark-on-dark. */
  --c-link-hover: var(--c-navy);

  /* --- Typography ------------------------------------------------------ */
  --font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.5rem, 1.35rem + 3.4vw, 4.25rem);
  --fs-h1: clamp(2.125rem, 1.4rem + 2.2vw, 3.375rem);
  --fs-h2: clamp(1.75rem, 1.28rem + 1.5vw, 2.625rem);
  --fs-h3: clamp(1.3125rem, 1.12rem + 0.65vw, 1.75rem);
  --fs-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  --lh-tight: 1.08;
  --lh-snug: 1.22;
  --lh-normal: 1.6;
  --lh-loose: 1.75;

  --ls-eyebrow: 0.16em;
  --ls-display: -0.025em;

  /* --- Space scale ----------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.75rem;
  --sp-8: 3.5rem;
  --sp-9: 5rem;
  --sp-10: 7rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --section-y-sm: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);

  /* --- Grid ------------------------------------------------------------ */
  --grid-max: 1280px;
  --grid-max-narrow: 880px;
  /* Minimum is set above Bootstrap's widest gutter (g-5 = 48px, i.e. 24px of
     negative row margin) so rows never push the page into horizontal scroll. */
  --gutter: clamp(1.75rem, 0.9rem + 1.6vw, 2.5rem);

  /* --- Shape, depth, lines -------------------------------------------- */
  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 4px;

  --shadow-sm: 0 1px 2px rgba(7, 29, 73, 0.06);
  --shadow-md: 0 8px 24px -12px rgba(7, 29, 73, 0.22);
  --shadow-lg: 0 22px 48px -28px rgba(7, 29, 73, 0.38);

  --rule-hair: 1px solid var(--c-border);
  --rule-gold: 2px solid var(--c-gold);
  --rule-navy: 1px solid rgba(255, 255, 255, 0.16);

/* --- Focus ----------------------------------------------------------- */
  --focus-ring: 0 0 0 3px rgba(23, 105, 210, 0.45);

  /* ==========================================================================
     Buttons

     Shared values for every .btn variant. Rest and hover are kept far apart
     on purpose: a hovered button must never land close enough to its own
     background to disappear into the page.

     Colour itself is not set here. Each variant declares --btn-bg / --btn-fg /
     --btn-border and the matching --btn-hover-* trio, and the dark blocks in
     global.css restate those for navy grounds and for the hero photograph.
     ========================================================================== */
  --btn-dark-line: rgba(255, 255, 255, 0.4);   /* outlined button on navy  */
  --shadow-btn: 0 10px 26px -12px rgba(7, 29, 73, 0.45);
  --shadow-btn-dark: 0 10px 26px -12px rgba(0, 0, 0, 0.55);
  --btn-lift: -1px;             /* pointer-only; never applied on touch   */
  --btn-disabled-fill: var(--c-mist-deep);
  --btn-disabled-label: #7b869c;
  --btn-disabled-line: var(--c-border);

  /* --- Motion ---------------------------------------------------------- */
--dur-fast: 180ms;
  --dur-hover: 220ms;
  --dur: 320ms;
  --dur-slow: 620ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Header ---------------------------------------------------------- */
  --header-h: 88px;
  /* Total height of the sticky header, utility bar included. Used to keep
     anchored targets clear of it on native jumps. */
  --sticky-offset: 114px;
  --utility-h: 38px;

  /* --- Z index --------------------------------------------------------- */
  --z-header: 900;
  --z-dropdown: 950;
  --z-mobile-nav: 1000;
  --z-nav-backdrop: 850;
}

/* Alignment preference: predictable but forgiving layouts. */
.align-wide { max-width: var(--grid-max); }
.align-narrow { max-width: var(--grid-max-narrow); }