/*
 * GMPF design tokens
 * ------------------
 * Single source of truth for all colour, typography, spacing, radius,
 * breakpoint and motion values used by the GMPF HubSpot CMS React theme.
 *
 * Rules
 *   - Modules and components MUST reference tokens, never raw values.
 *   - When a Figma value does not match any existing token, ADD a token
 *     here first, then reference it. Do not inline raw values.
 *   - Token names use kebab-case with a category prefix
 *     (--color-*, --space-*, --radius-*, --font-*, --bp-*, --duration-*,
 *     --ease-*, --shadow-*).
 *
 * Provenance
 *   - Brand and button tokens are extracted from the GMPF Component
 *     Builder (UI Kit) Figma file (key KJxLF390hu0bHbersPMpsl), Button
 *     component set 1:147 (variants 1:193, 9:611, 1:16, 30:1795,
 *     57:4042, 1:151, 9:616, 93:10069, 1:159).
 *   - Type-scale, neutral palette and spacing values not yet observed
 *     in an extracted Figma frame are marked PROVISIONAL. They are
 *     designed against an 8px grid and will be re-confirmed (and
 *     adjusted if needed) as each Phase 1 module is extracted via the
 *     design-verification loop.
 *
 * To refresh
 *   - Re-extract via Framelink Figma MCP (`get_figma_data`) on the
 *     relevant nodes in file KJxLF390hu0bHbersPMpsl, then update the
 *     values below. Document any new tokens in docs/development-plan.md
 *     §0.2.
 */

:root {
  /* ---------------------------------------------------------------
   * Colour - brand
   * Source: Figma button set 1:147 (PrimaryBtn fill, White btn text).
   * ------------------------------------------------------------- */
  --color-brand-primary: #635aea; /* Buttons, links, focus accents */
  --color-brand-primary-hover: #4f46d3; /* PROVISIONAL - 8% darker */
  --color-brand-primary-active: #3d35b8; /* PROVISIONAL */
  --color-brand-dark: #2f3a62; /* Body text on white, secondary CTAs */
  --color-brand-dark-hover: #232b4a; /* PROVISIONAL */

  /* ---------------------------------------------------------------
   * Colour - neutrals (PROVISIONAL pending Phase 1 extractions)
   * Aligned to UK Gov Design System palette as a sensible default
   * for a public-sector site; will be re-verified per module.
   * ------------------------------------------------------------- */
  --color-neutral-black: #0b0c0c; /* Source: Black button fill (30:1795) */
  --color-neutral-900: #1a1a1a;
  --color-neutral-800: #262626;
  --color-neutral-700: #404040;
  --color-neutral-600: #595959;
  --color-neutral-500: #737373;
  --color-neutral-400: #a6a6a6;
  --color-neutral-300: #d6d6d6;
  --color-neutral-200: #e5e5e5;
  --color-neutral-100: #f3f3f3;
  --color-neutral-50: #f8f8f8;
  --color-neutral-white: #ffffff;

  /* ---------------------------------------------------------------
   * Colour - semantic (PROVISIONAL)
   * Used by Global Alert and form validation states. WCAG 2.2 AA
   * contrast against white (4.5:1) is enforced by the *-fg pair.
   * ------------------------------------------------------------- */
  --color-info-bg: #d4ebf2;
  --color-info-fg: #0c4a6e;
  --color-info-border: #1e40af;

  --color-warning-bg: #fff4d6;
  --color-warning-fg: #6e4e00; /* AA on warning-bg */
  --color-warning-border: #b45309;

  --color-critical-bg: #b1003e; /* High-contrast red, white text */
  --color-critical-fg: #ffffff;
  --color-critical-border: #8a002f;

  --color-success-bg: #d6f0e0;
  --color-success-fg: #1f4a2e;
  --color-success-border: #2f7048;

  /* ---------------------------------------------------------------
   * Colour - surface and text
   * ------------------------------------------------------------- */
  --color-surface-page: #ffffff;
  --color-surface-muted: #f3f3f3; /* "light grey" background option */
  --color-surface-inverse: #2f3a62; /* "brand dark" background option */
  --color-surface-overlay: rgba(11, 12, 12, 0.6); /* Modals, hero overlays */
  --color-surface-lavender: #e3e1ff; /* Retirement "Plan & Process" accordion (Figma 85:5388) */
  --color-surface-soft-panel: #eaeff2; /* Retirement "State pension" panel base (Figma 85:5853) */

  /* Accessibility options page — Kentico /members/accessibility-options */
  --color-accessibility-lead-accent: #6ebfc4;
  --color-accessibility-formats-bg: #e8c872;
  --color-accessibility-communication-bg: #6ebfc4;
  --color-accessibility-mypension-bg: #fa9869;
  --color-accessibility-card-text: #2e2e2e;

  /* Icon-badge colour, used for the rounded-square section icon
     badges in the mega-menu (Figma mega nav). A distinctly blue
     hue (not the indigo-leaning `--color-brand-primary`) so the
     badges read as the "Members/Employers/etc." blue family from
     the Figma rather than the header gradient's purple end. */
  --color-icon-badge-bg: #635AEA;
  --color-icon-badge-fg: #ffffff;

  /* Pill/chip stroke colour (shared with --color-brand-primary today,
     kept as its own semantic token so it can drift independently). */
  --color-tag-border: #635aea;
  --color-tag-fill: #635aea;
  --color-tag-fg-onlight: #2f3a62;
  --color-tag-fg-ondark: #ffffff;

  --color-text-default: #19191B; /* Brand-dark on white */
  --color-text-muted: #595959;
  --color-text-inverse: #ffffff;
  --color-text-link: #635aea;
  --color-text-link-hover: #3d35b8;

  --color-border-default: #d6d6d6;
  --color-border-strong: #595959;

  /* ---------------------------------------------------------------
   * Colour - focus ring (A11y critical)
   * Yellow + dark outline pattern modelled on UK Gov Design System,
   * which is independently AA-tested against most backgrounds.
   * ------------------------------------------------------------- */
  --color-focus-ring: #ffdd00;
  --color-focus-ring-shadow: #0b0c0c;

  /* ---------------------------------------------------------------
   * Typography - families
   * Body / button / nav copy: Open Sans (verified from Figma button
   * TEXT nodes).
   * Display / headings: Google Sans Display (per 20 Apr 2026 design
   * direction from GMPF — they hold a Google Fonts licence). Loaded
   * via styles/fonts.css. If the network request fails the stack
   * falls back to the base family, which renders Open Sans.
   * ------------------------------------------------------------- */
  --font-family-base:
    'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif;
  --font-family-display:
    'Google Sans Display', 'Google Sans', 'Open Sans', system-ui, -apple-system,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono:
    ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo,
    monospace;

  /* ---------------------------------------------------------------
   * Typography - scale (PROVISIONAL except where noted)
   * Body / button copy verified at 18 / 28 / 400 from Figma.
   * Heading sizes use a modular scale; revisit when each heading
   * lands in an extracted module spec.
   * ------------------------------------------------------------- */
  --font-size-xs: 0.75rem; /* 12px - small print, legal */
  --font-size-sm: 0.875rem; /* 14px - meta, captions */
  --font-size-md: 1rem; /* 16px - secondary body */
  --font-size-body: 1.125rem; /* 18px - default body / buttons (verified) */
  --font-size-lg: 1.25rem; /* 20px - lead paragraph */
  --font-size-h6: 1.125rem; /* 18px */
  --font-size-h5: 1.25rem; /* 20px */
  --font-size-h4: 1.5rem; /* 24px */
  --font-size-h3: 1.875rem; /* 30px */
  --font-size-h2: 46px; /* 46px */
  --font-size-h1: 3rem; /* 48px desktop (legacy) */
  --font-size-h1-mobile: 2rem; /* 32px mobile (legacy) */

  /* Fluid type pair for the hero h1. Figma Home 85:1094 renders the
   * h1 at **72px** (`typography.heroH1.size`) on the 1440 canvas; we
   * cap at 4.5rem (72px) so wider viewports don't balloon the font
   * past Figma and force the copy column into 4-line orphan wraps.
   * Lower bound of 2.5rem (40px) keeps the mobile 393px spec happy.
   * The 4vw mid-point is calibrated so ≥1200px already sits at the
   * 72px ceiling (legibility parity with Figma at 1440/1920). */
  --font-size-hero-display: clamp(2.5rem, 1.25rem + 4vw, 4.5rem);
  --line-height-hero-display: 1.1;

  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-base: 1.555; /* 18 -> 28 (verified) */
  --line-height-relaxed: 1.7;

  --font-weight-regular: 400; /* Verified - body / button copy */
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;

  /* ---------------------------------------------------------------
   * Spacing scale (PROVISIONAL, 4/8 px grid)
   * Aligns with Figma auto-layout itemSpacing values seen so far
   * (12, 24 on the button set).
   * ------------------------------------------------------------- */
  --space-3xs: 0.125rem; /*  2px */
  --space-2xs: 0.25rem; /*  4px */
  --space-xs: 0.5rem; /*  8px */
  --space-sm: 0.75rem; /* 12px - verified (button itemSpacing) */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.5rem; /* 24px - verified (button paddingX) */
  --space-xl: 2rem; /* 32px */
  --space-2xl: 3rem; /* 48px */
  --space-3xl: 4rem; /* 64px */
  --space-4xl: 6rem; /* 96px */
  --space-5xl: 8rem; /* 128px - reserved for "roomy" section density */

  /* ---------------------------------------------------------------
   * Radii (verified)
   * Buttons use 40px which is "pill" given a 44px tall hit area.
   * ------------------------------------------------------------- */
  --radius-sm: 0.25rem; /*  4px */
  --radius-md: 0.5rem; /*  8px */
  --radius-lg: 1rem; /* 16px */
  --radius-xl: 1.5rem; /* 24px */
  --radius-pill: 2.5rem; /* 40px - verified (button radius) */
  --radius-circle: 50%;

  /* ---------------------------------------------------------------
   * Component-scoped tokens (overridable via theme settings)
   *
   * These indirect through the primitive tokens above so that the
   * theme-overrides.hubl.html partial can reassign a single component
   * knob (`--button-radius`) without disturbing every other element
   * that happens to share the same primitive. Modules MUST consume
   * these (`var(--button-radius)`, `var(--card-radius)`, etc.) rather
   * than the primitives directly when the value is meant to be
   * editor-controllable.
   * ------------------------------------------------------------- */
  --button-radius: var(--radius-pill);
  --button-weight: var(
    --font-weight-regular
  ); /* Verified Figma: button copy is 400 */
  --card-radius: var(
    --radius-md
  ); /* Default 8px matches current card modules */
  --input-radius: var(
    --radius-md
  ); /* Default 8px matches current form/input styling */
  /*
   * Vertical rhythm on page sections. Consumed by every module's
   * top-level `.section` rule via `padding-block: var(--section-padding-y)`.
   * Default 6rem (96px) = `--space-4xl` matches the current rhythm on
   * gmpf.org.uk. The theme setting `sections.density` lets content
   * editors shift the whole site between Compact / Standard / Roomy
   * without touching every module.
   */
  --section-padding-y: var(--space-2xl);

  /* ---------------------------------------------------------------
   * Breakpoints (custom-property mirrors of @media values)
   * Mirror the values defined in design-verification/playwright.config.ts
   * BREAKPOINTS array. Use via `@media (min-width: var(--bp-*))` only
   * inside @container queries; native @media cannot read custom
   * properties.
   * ------------------------------------------------------------- */
  --bp-mobile: 393px;
  --bp-tablet: 768px;
  --bp-laptop: 1024px;
  --bp-desktop: 1440px;
  --bp-wide: 1920px;

  /* ---------------------------------------------------------------
   * Container widths (PROVISIONAL)
   * ------------------------------------------------------------- */
  --container-narrow: 800px;
  --container-default: 1140px;
  --container-wide: 1320px;
  --container-full: 1440px;
  /* Search results wireframe (Figma GMPF-Wireframes 360:2609). */
  --container-search: 720px;
  --font-size-search-hero: 2.25rem; /* 36px */
  --size-search-card-thumb: 140px;

  /* ---------------------------------------------------------------
   * Hit target (A11y - WCAG 2.2 minimum 24x24, target 44x44)
   * Source: button height 44px (verified).
   * ------------------------------------------------------------- */
  --hit-target-min: 2.75rem; /* 44px */

  /* ---------------------------------------------------------------
   * Motion (PROVISIONAL)
   * ------------------------------------------------------------- */
  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  --ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-out: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-in: cubic-bezier(0.2, 0, 1, 1);

  /* ---------------------------------------------------------------
   * Shadows (PROVISIONAL, used sparingly - pension audience prefers
   * a flat, trustworthy look).
   * ------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(11, 12, 12, 0.06);
  --shadow-md: 0px 4px 74px 0px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 8px 24px rgba(11, 12, 12, 0.12);


  /* ---------------------------------------------------------------
   * Brand gradients (Home hero 85:1094)
   *
   * The Figma home hero is a diagonal purple → lilac gradient with
   * soft ambient highlights rather than the previous navy mix.
   * We stack:
   *   1. A warm highlight in the upper-right (sun-like, 18% alpha)
   *   2. A cooler highlight low-left (ambient bounce, 14% alpha)
   *   3. The primary diagonal gradient (indigo → brand-primary →
   *      lilac), anchored on `--color-brand-primary` so the token
   *      stays portable if the brand palette shifts.
   *
   * Floating decorative shapes (Figma 85:1094 "bubble" motif) are
   * rendered as ::before/::after pseudo-elements on
   * Hero `.bgGradientDark` itself — they need access to hero
   * dimensions, so they don't live here.
   * ------------------------------------------------------------- */
  --gradient-hero-dark:
  linear-gradient(243.67deg, #8D68EF 5.88%, #6270FF 38.95%, #518EFF 64.7%, #51B5FF 88.97%);


  /* ---------------------------------------------------------------
   * Brand diagonal gradient (Retirement "Pension Calculator" 85:5536
   * and "Still Need Help" 85:6048).
   *
   * 221deg indigo → blue — the brand's "hero panel" gradient. Used
   * as a section background behind a white inset card, or behind
   * centred text + CTAs. Colour stops pulled verbatim from Figma.
   * ------------------------------------------------------------- */
  --gradient-brand-diagonal: linear-gradient(221deg, #8d69ef 2%, #5a7eff 100%);

  /* ---------------------------------------------------------------
   * Card banner gradient (Resources "Tools & Resources" 85:4571
   * card top banners and Resources horizontal variation 106:2491
   * icon blocks).
   *
   * 187deg lilac -> indigo -> blue -> light-blue. Same colour stops
   * as the bottom layer of --gradient-hero-fade; split out as its
   * own token so modules can use it without pulling the hero's
   * whitewash.
   * ------------------------------------------------------------- */
  --gradient-card-banner: linear-gradient(0deg, #F5F5F5, #F5F5F5),
linear-gradient(203.29deg, rgba(141, 104, 239, 0.1) 3.47%, rgba(98, 112, 255, 0.1) 31.2%, rgba(81, 142, 255, 0.1) 52.78%, rgba(81, 181, 255, 0.1) 73.14%);

  /* ---------------------------------------------------------------
   * Brand vertical gradient (Retirement "Still Need Help" 85:6048
   * and Footer 85:4572).
   *
   * 0deg light-blue → blue → indigo. Similar palette to the diagonal
   * variant but with a sharper transition near the top, giving the
   * footer a darker upper edge that meets the preceding section
   * cleanly.
   * ------------------------------------------------------------- */
  --gradient-brand-vertical: linear-gradient(
    0deg,
    #51b5ff 0%,
    #4d65f4 24%,
    #4d65f4 74%,
    #6c56e6 100%
  );

  /* ---------------------------------------------------------------
   * Hero page backdrop — "fade-to-white" (Retirement hero 85:4569 +
   * audience cards 85:4570 sit on Rectangle 200 / 85:5264).
   *
   * Figma stacks three fills on a 1440 × 985 rectangle behind the
   * first two sections: a warm purple→blue linear (bottom layer), a
   * diffuse #EEEEEE bleed (middle), and a white fade-in near the
   * bottom edge. The net effect is a brand-gradient that softens
   * to light grey and resolves to white before the third section
   * begins, so later (white) sections abut it without a hard edge.
   *
   * Stacking order matches CSS: first listed layer paints on top.
   * ------------------------------------------------------------- */
  --gradient-hero-fade:
    linear-gradient(
      181deg,
      rgba(255, 255, 255, 0) 83%,
      rgba(255, 255, 255, 1) 99%
    ),
    linear-gradient(
      211deg,
      rgba(238, 238, 238, 0) 12%,
      rgba(238, 238, 238, 1) 82%
    ),
    linear-gradient(187deg, #8d68ef 2%, #6270ff 40%, #518eff 69%, #51b5ff 97%);

  /* ---------------------------------------------------------------
   * Calculator modules
   *
   * Shared tokens for the three calculator modules (max lump sum,
   * early retirement, retirement living standards). Result panels
   * borrow GMPF's live-site purple result banner but use brand-dark
   * text for AA contrast on light backgrounds.
   * ------------------------------------------------------------- */
  --calc-field-bg: #ffffff;
  --calc-field-border: #d6d6d6;
  --calc-field-border-focus: #635aea;
  --calc-result-bg: #f6f5ff; /* Pale lavender result panel */
  --calc-result-border: #c9c3ff;
  --calc-result-highlight-bg: #635aea; /* Purple "outputLumpSum" banner */
  --calc-result-highlight-fg: #ffffff;
  --calc-slider-track: #d6d6d6;
  --calc-slider-track-fill: #635aea;
  --calc-slider-thumb: #635aea;
  --calc-slider-thumb-ring: rgba(99, 90, 234, 0.25);
  --calc-disclaimer-bg: #fff4d6; /* Shares warning token hue */
  --calc-disclaimer-fg: #6e4e00;
  --calc-disclaimer-border: #d1a24b;

  /* Retirement Living Standards band colours (PLSA 2024 identity).
     Used as the fill of the tier indicator in CalculatorLivingStandards. */
  --calc-tier-min-bg: #ffe7b3;
  --calc-tier-min-fg: #5a3d00;
  --calc-tier-mod-bg: #c7e8cd;
  --calc-tier-mod-fg: #1f4a2e;
  --calc-tier-com-bg: #c9c3ff;
  --calc-tier-com-fg: #2f3a62;

  /* ---------------------------------------------------------------
   * Z-index scale
   * ------------------------------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 800;
  --z-modal: 900;
  --z-toast: 950;
  --z-skip-link: 1000; /* Skip link must be reachable above all chrome */
}

/* Reduced-motion override - respects WCAG 2.2 SC 2.3.3 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}


:root {
  --color-page-primary: #635AEA;
  --color-header-gradient: linear-gradient(270deg, #6C56E6 7.89%, #4D65F4 35.78%, #4D65F4 74.24%, #51B5FF 109.77%);
}

body.about-page {
  --color-page-primary: #7FBEFF;
--color-header-gradient: linear-gradient(203.29deg, #7FBEFF 3.47%, #7FBEFF 73.14%);
}

body.members-page {
  --color-page-primary: #8D68EF;
  --color-header-gradient:   linear-gradient(203.29deg, #8D68EF 3.47%, #8D68EF 73.14%);
}

body.employers-page {
  --color-page-primary: #6FC0C4;
  --color-header-gradient:  linear-gradient(203.29deg, #6FC0C4 3.47%, #6FC0C4 73.14%);
}

body.governance-page {
  --color-page-primary: #FA9869;
  --color-header-gradient:  linear-gradient(203.29deg, #FA9869 3.47%, #FA9869 73.14%);
}







/* background color variants for body background  */

:root{
  --color-background-default : 
    linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, #FFFFFF 75%),
    linear-gradient(243.38deg, rgba(255, 255, 255, 0) 9.28%, #FFFFFF 59.84%),
    linear-gradient(203.29deg, #8D68EF 3.47%, #6270FF 31.2%, #518EFF 52.78%, #51B5FF 73.14%);


--color-background-members :    linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, #FFFFFF 75%),
    linear-gradient(243.38deg, rgba(255, 255, 255, 0) 9.28%, #FFFFFF 59.84%),
    linear-gradient(203.29deg, #8D68EF 3.47%, #6270FF 31.2%, #518EFF 52.78%, #51B5FF 73.14%);

--color-background-employers :    linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, #FFFFFF 75%),
    linear-gradient(243.38deg, rgba(255, 255, 255, 0) 9.28%, #FFFFFF 59.84%),
    linear-gradient(203.29deg, #8D68EF 3.47%, #6270FF 31.2%, #518EFF 52.78%, #51B5FF 73.14%);

--color-background-governance :     linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, #FFFFFF 75%),
    linear-gradient(243.38deg, rgba(255, 255, 255, 0) 9.28%, #FFFFFF 59.84%),
    linear-gradient(203.29deg, #8D68EF 3.47%, #6270FF 31.2%, #518EFF 52.78%, #51B5FF 73.14%);

}