/**
 * Uplift Capital Partners design tokens.
 *
 * Two layers:
 *   1. Uplift primitives (--uplift-*): the brand palette and the spacing and
 *      radius scales, named and valued as on the Uplift Bank site. Raw values
 *      live only here.
 *   2. Southern Partners roles (--sp-*): what templates use for colour, type,
 *      layout, motion and layering. Templates use the Uplift spacing and
 *      radius scales directly.
 *
 * Colour roles are declared once with light-dark(). The used color-scheme
 * picks the value: base.css sets `color-scheme: light dark` (follow the
 * system) and [data-theme="light"|"dark"] forces a mode for a page or region.
 * Shadows take colours from light-dark() roles, so they follow the mode too.
 *
 * theme.json is the editor contract for colour, font-size and spacing presets;
 * the --wp--preset--color--* overrides at the end make those presets follow
 * the mode, and the size and space roles read the presets with fallbacks.
 */

:root {
	/* ------------------------------------------------------------------
	 * Uplift primitives
	 * ------------------------------------------------------------------ */

	/* Primary palette (Uplift Logo Usage Guide) */
	--uplift-light-blue: #008cd1;    /* Pantone 3005 C */
	--uplift-dark-blue: #0e4570;     /* Pantone 7694 C */
	--uplift-yellow: #fcca0b;        /* Pantone 7408 C */
	--uplift-orange: #f9a022;        /* Pantone 1375 C */

	/* Extended scales. Light Blue is 3.7:1 on white, so links and small text
	   use the 700 shade (7:1). */
	--uplift-light-blue-50: #eef8fd;
	--uplift-light-blue-100: #d9effa;
	--uplift-light-blue-300: #7cc4ec;
	--uplift-light-blue-600: #008bcb;  /* Uplift Bank's product-hero blue */
	--uplift-light-blue-700: #005a8b;
	--uplift-dark-blue-800: #002f52;
	--uplift-dark-blue-900: #071d33;
	--uplift-yellow-50: #fff6d6;
	--uplift-yellow-800: #8a6a00;    /* Yellow as text on white, 5:1 */
	--uplift-orange-50: #fef1df;
	--uplift-orange-80: #fab34e;

	/* Neutrals, tinted toward Dark Blue */
	--uplift-white: #ffffff;
	--uplift-black: #000000;
	--uplift-gray-50: #f6f9fb;
	--uplift-gray-100: #eef2f5;
	--uplift-gray-200: #e2e8ed;
	--uplift-gray-300: #c5d2dc;
	--uplift-gray-400: #8696a7;
	--uplift-gray-500: #5f7184;
	--uplift-gray-600: #425466;
	--uplift-gray-700: #31455b;
	--uplift-gray-800: #1f3552;

	/* Status */
	--uplift-red: #d10003;
	--uplift-red-50: #fdecec;
	--uplift-green: #238b00;
	--uplift-green-50: #ebfbee;

	/* Night palette: near-black, nearly neutral greys with the brand blues as
	   accents. */
	--uplift-night-bg: #0d0f12;
	--uplift-night-subtle: #121417;
	--uplift-night-surface: #16191d;
	--uplift-night-raised: #1f2328;
	--uplift-night-text: #c8cdd3;
	--uplift-night-strong: #e7e9ec;
	--uplift-night-muted: #99a0a8;
	--uplift-night-subtle-text: #7b828a;
	--uplift-night-heading: #f3f4f6;
	--uplift-night-link: #6cc0ea;
	--uplift-night-rule: rgb(255 255 255 / 0.1);

	--uplift-gradient-full: linear-gradient(90deg, var(--uplift-dark-blue) 0%, var(--uplift-light-blue) 35%, var(--uplift-yellow) 75%, var(--uplift-orange) 100%);

	--uplift-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--uplift-font-family-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Spacing scale: the number is the multiple of 4px. Steps 2, 4, 6, 8, 12
	   and 16 are also the theme.json spacing presets, which read these. */
	--uplift-space-1: 0.25rem;
	--uplift-space-2: 0.5rem;
	--uplift-space-3: 0.75rem;
	--uplift-space-4: 1rem;
	--uplift-space-5: 1.25rem;
	--uplift-space-6: 1.5rem;
	--uplift-space-8: 2rem;
	--uplift-space-10: 2.5rem;
	--uplift-space-12: 3rem;
	--uplift-space-14: 3.5rem;
	--uplift-space-16: 4rem;
	--uplift-space-20: 5rem;
	--uplift-space-24: 6rem;

	/* Corner radii */
	--uplift-radius-xs: 0.25rem;   /* 4px */
	--uplift-radius-sm: 0.375rem;  /* 6px */
	--uplift-radius-md: 0.5rem;    /* 8px */
	--uplift-radius-lg: 0.75rem;   /* 12px */
	--uplift-radius-xl: 1rem;      /* 16px */
	--uplift-radius-2xl: 1.5rem;   /* 24px */
	--uplift-radius-pill: 999px;

	/* ------------------------------------------------------------------
	 * Colour roles
	 * ------------------------------------------------------------------ */

	--sp-color-text-primary: light-dark(var(--uplift-gray-600), var(--uplift-night-text));
	--sp-color-text-strong: light-dark(var(--uplift-gray-800), var(--uplift-night-strong));
	--sp-color-text-heading: light-dark(var(--uplift-dark-blue), var(--uplift-night-heading));
	--sp-color-text-muted: light-dark(var(--uplift-gray-500), var(--uplift-night-muted));
	--sp-color-text-subtle: light-dark(var(--uplift-gray-400), var(--uplift-night-subtle-text));
	--sp-color-text-inverse: light-dark(var(--uplift-white), var(--uplift-night-heading));
	--sp-color-text-inverse-muted: rgb(255 255 255 / 0.82);
	--sp-color-text-accent: light-dark(var(--uplift-light-blue-700), var(--uplift-light-blue-300));
	--sp-color-text-disabled: light-dark(color-mix(in srgb, var(--uplift-gray-500) 52%, transparent), rgb(200 205 211 / 0.44));
	--sp-color-text-danger: var(--sp-color-status-danger);

	--sp-color-link-default: light-dark(var(--uplift-light-blue-700), var(--uplift-night-link));
	--sp-color-link-hover: light-dark(var(--uplift-dark-blue), var(--uplift-light-blue-100));
	--sp-color-link-inverse: var(--sp-color-text-inverse);
	--sp-color-link-inverse-hover: light-dark(rgb(255 255 255 / 0.82), var(--uplift-light-blue-100));

	--sp-color-border-subtle: light-dark(var(--uplift-gray-200), var(--uplift-night-rule));
	--sp-color-border-strong: light-dark(var(--uplift-gray-400), rgb(255 255 255 / 0.22));
	--sp-color-border-disabled: light-dark(var(--uplift-gray-300), rgb(255 255 255 / 0.06));
	--sp-color-border-selected: light-dark(var(--uplift-light-blue-700), var(--uplift-light-blue-300));
	--sp-color-border-danger: var(--sp-color-status-danger);
	--sp-color-border-inverse-subtle: rgb(255 255 255 / 0.14);
	--sp-color-border-inverse-strong: rgb(255 255 255 / 0.24);

	/* Surfaces, from the page up: canvas, subtle wash, card, raised. */
	--sp-color-layer-canvas: light-dark(var(--uplift-white), var(--uplift-night-bg));
	--sp-color-layer-1: light-dark(var(--uplift-gray-100), var(--uplift-night-subtle));
	--sp-color-layer-2: light-dark(var(--uplift-white), var(--uplift-night-surface));
	--sp-color-layer-3: light-dark(var(--uplift-gray-200), var(--uplift-night-raised));
	--sp-color-layer-input: light-dark(var(--uplift-white), var(--uplift-night-surface));
	--sp-color-layer-thumbnail: light-dark(var(--uplift-gray-200), var(--uplift-night-raised));
	/* Dims the page under the expanded phone header and the search dialog,
	   as on Uplift Bank. */
	--sp-color-layer-overlay: light-dark(color-mix(in srgb, var(--uplift-dark-blue-900) 55%, transparent), color-mix(in srgb, var(--uplift-black) 60%, transparent));
	--sp-color-layer-hover: light-dark(var(--uplift-gray-100), color-mix(in srgb, var(--uplift-light-blue-300) 16%, transparent));
	--sp-color-layer-active: light-dark(var(--uplift-gray-200), color-mix(in srgb, var(--uplift-light-blue-300) 22%, transparent));
	--sp-color-layer-selected: light-dark(color-mix(in srgb, var(--uplift-light-blue-700) 12%, var(--uplift-white)), color-mix(in srgb, var(--uplift-light-blue-300) 24%, transparent));
	--sp-color-layer-disabled: light-dark(var(--uplift-gray-100), rgb(200 205 211 / 0.1));
	--sp-color-layer-brand-start: light-dark(var(--uplift-light-blue), var(--uplift-dark-blue));
	--sp-color-layer-brand-end: light-dark(var(--uplift-dark-blue), var(--uplift-dark-blue-900));
	--sp-color-layer-brand-hover: rgb(255 255 255 / 0.16);

	/* Brand sections keep their blues in dark mode, a shade deeper. */
	--sp-color-section-brand-bg: light-dark(var(--uplift-dark-blue), color-mix(in srgb, var(--uplift-dark-blue) 72%, var(--uplift-night-bg)));
	--sp-color-section-brand-text: var(--sp-color-text-inverse);
	--sp-color-section-brand-muted: rgb(255 255 255 / 0.84);
	--sp-color-section-brand-accent: var(--uplift-light-blue-300);
	--sp-color-section-brand-action-bg: var(--uplift-light-blue-300);
	--sp-color-section-brand-action-hover-bg: light-dark(var(--uplift-light-blue-50), var(--uplift-light-blue-100));
	--sp-color-section-brand-action-text: var(--uplift-dark-blue);
	/* Page heroes (a Brand section holding a hero pattern) take Uplift Bank's
	   product-hero blue, and its deeper blue in dark mode. */
	--sp-color-section-hero-bg: light-dark(var(--uplift-light-blue-600), var(--uplift-light-blue-700));
	--sp-color-section-subtle-bg: var(--sp-color-layer-1);
	--sp-color-section-gradient-bg: linear-gradient(90deg, var(--sp-color-layer-brand-start), var(--sp-color-layer-brand-end));

	--sp-color-action-primary-bg: light-dark(var(--uplift-light-blue-700), var(--uplift-light-blue-300));
	--sp-color-action-primary-hover-bg: light-dark(var(--uplift-dark-blue), color-mix(in srgb, var(--uplift-light-blue-300) 84%, var(--uplift-white)));
	--sp-color-action-primary-active-bg: light-dark(color-mix(in srgb, var(--uplift-dark-blue) 88%, var(--uplift-black)), var(--uplift-light-blue-50));
	--sp-color-action-primary-text: light-dark(var(--uplift-white), var(--uplift-dark-blue-900));
	--sp-color-action-secondary-bg: light-dark(var(--uplift-dark-blue), var(--uplift-night-raised));
	--sp-color-action-secondary-hover-bg: light-dark(color-mix(in srgb, var(--uplift-dark-blue) 86%, var(--uplift-black)), #2a2f35);
	--sp-color-action-secondary-active-bg: light-dark(color-mix(in srgb, var(--uplift-dark-blue) 74%, var(--uplift-black)), #353b42);
	--sp-color-action-secondary-text: var(--sp-color-text-inverse);
	--sp-color-action-ghost-hover-bg: var(--sp-color-layer-hover);
	--sp-color-action-ghost-active-bg: var(--sp-color-layer-active);
	--sp-color-action-ghost-hover-border: var(--sp-color-border-selected);
	--sp-color-action-disabled-bg: light-dark(var(--uplift-gray-200), rgb(200 205 211 / 0.16));
	--sp-color-action-disabled-text: light-dark(var(--uplift-gray-500), rgb(200 205 211 / 0.46));
	--sp-color-action-highlight-bg: var(--uplift-yellow);
	--sp-color-action-highlight-hover-bg: var(--uplift-orange-80);
	--sp-color-action-highlight-text: var(--uplift-dark-blue-900);

	--sp-color-focus-ring: var(--sp-color-border-selected);
	--sp-color-status-danger: light-dark(var(--uplift-red), #ff7a7a);
	--sp-color-status-danger-soft: light-dark(color-mix(in srgb, var(--uplift-red) 14%, transparent), color-mix(in srgb, #ff7a7a 18%, transparent));
	--sp-color-status-success: light-dark(var(--uplift-green), #6ad47a);
	--sp-color-status-success-soft: light-dark(var(--uplift-green-50), #14261a);
	--sp-color-spinner-track: light-dark(color-mix(in srgb, var(--uplift-dark-blue-900) 15%, transparent), rgb(200 205 211 / 0.2));
	--sp-color-spinner-head: light-dark(color-mix(in srgb, var(--uplift-dark-blue-900) 65%, transparent), rgb(250 250 250 / 0.78));

	/* Shadow ink: Dark Blue on light surfaces, black on night ones. Mix it
	   with transparent for each shadow's strength. */
	--sp-color-shadow: light-dark(var(--uplift-dark-blue-900), var(--uplift-black));

	/* ------------------------------------------------------------------
	 * Component roles
	 * ------------------------------------------------------------------ */

	--sp-component-mega-menu-panel-bg: light-dark(var(--uplift-white), var(--uplift-night-raised));
	--sp-component-mega-menu-panel-text: var(--sp-color-text-heading);
	--sp-component-mega-menu-panel-muted: var(--sp-color-text-muted);
	--sp-component-mega-menu-panel-divider: var(--sp-color-border-subtle);
	--sp-component-mega-menu-icon-bg: light-dark(var(--uplift-light-blue-100), color-mix(in srgb, var(--uplift-light-blue) 24%, transparent));
	--sp-component-mega-menu-panel-shadow: 0 50px 100px -20px color-mix(in srgb, var(--sp-color-shadow) 25%, transparent), 0 30px 60px -30px color-mix(in srgb, var(--sp-color-shadow) 30%, transparent);
	--sp-component-mega-menu-panel-arrow-shadow: -3px -3px 5px color-mix(in srgb, var(--sp-color-shadow) 4%, transparent);

	--sp-component-search-input-bg: var(--sp-color-layer-input);
	--sp-component-search-input-shadow: inset 0 1px 2px color-mix(in srgb, var(--sp-color-shadow) 6%, transparent);
	--sp-component-search-input-focus-border: var(--sp-color-border-selected);
	--sp-component-search-input-focus-shadow: 0 0 0 3px var(--sp-color-layer-selected);
	--sp-component-search-overlay-border: var(--sp-color-border-subtle);
	--sp-component-search-overlay-shadow: 0 28px 80px color-mix(in srgb, var(--sp-color-shadow) 16%, transparent);

	/* ------------------------------------------------------------------
	 * Type
	 * ------------------------------------------------------------------ */

	--sp-type-family-heading: var(--wp--preset--font-family--heading, var(--uplift-font-family));
	--sp-type-family-display: var(--wp--preset--font-family--display, var(--uplift-font-family));
	--sp-type-family-sans: var(--wp--preset--font-family--sans, var(--uplift-font-family-body));

	--sp-type-size-label: 0.8rem;
	--sp-type-size-meta: 0.85rem;
	--sp-type-size-sm: var(--wp--preset--font-size--sm, 0.875rem);
	--sp-type-size-body: var(--wp--preset--font-size--base, 1rem);
	--sp-type-size-body-lg: var(--wp--preset--font-size--lg, 1.1rem);
	--sp-type-size-xl: var(--wp--preset--font-size--xl, 1.5rem);
	--sp-type-size-heading-6: var(--wp--preset--font-size--heading-6, 1rem);
	--sp-type-size-heading-5: var(--wp--preset--font-size--heading-5, 1.1rem);
	--sp-type-size-heading-4: var(--wp--preset--font-size--heading-4, 1.25rem);
	--sp-type-size-heading-3: var(--wp--preset--font-size--heading-3, clamp(1.375rem, 1.25rem + 0.4vw, 1.5rem));
	--sp-type-size-heading-2: var(--wp--preset--font-size--heading-2, clamp(1.625rem, 1.35rem + 0.9vw, 2rem));
	--sp-type-size-heading-1: var(--wp--preset--font-size--heading-1, clamp(2rem, 1.55rem + 1.45vw, 2.5rem));
	--sp-type-size-display: var(--wp--preset--font-size--display, clamp(2.25rem, 1.55rem + 2.25vw, 3rem));

	--sp-type-weight-regular: 400;
	--sp-type-weight-medium: 500;
	--sp-type-weight-semibold: 600;
	--sp-type-weight-bold: 700;
	--sp-type-weight-extrabold: 800;
	--sp-type-weight-heading: var(--sp-type-weight-semibold);
	--sp-type-weight-display: var(--sp-type-weight-bold);

	--sp-type-line-height-body: 1.6;
	--sp-type-line-height-copy: 1.3;
	--sp-type-line-height-tight: 1.1;
	--sp-type-line-height-heading: 1.15;
	--sp-type-letter-spacing-label: 0.08em;

	/* ------------------------------------------------------------------
	 * Layout
	 * ------------------------------------------------------------------ */

	--sp-layout-content-width: var(--wp--style--global--content-size, 75rem);
	--sp-layout-wide-width: var(--wp--style--global--wide-size, 75rem);
	--sp-layout-content-gutter: 2rem;
	--sp-layout-hero-width: 100rem;
	--sp-layout-header-height: 64px;
	--sp-layout-page-padding-block: clamp(var(--uplift-space-12), 5vw, var(--uplift-space-16));
	--sp-layout-section-gap: var(--uplift-space-12);
	--sp-layout-content-gap: var(--uplift-space-4);
	--sp-layout-heading-follow-gap: var(--uplift-space-2);
	--sp-layout-heading-pre-gap: var(--uplift-space-8);
	--sp-layout-shadow-card: none;
	--sp-layout-shadow-dropdown: none;

	/*
	 * Breakpoint contract. Media queries can't read custom properties, so
	 * these are the values every @media rule uses literally:
	 *   580px  compact phones          max-width: 580px
	 *   760px  two-column content      min-width: 761px / max-width: 760px
	 *   860px  richer editorial        min-width: 861px / max-width: 860px
	 *   980px  desktop header and nav  min-width: 981px / max-width: 980px
	 *   1200px roomy desktop           min-width: 1201px / max-width: 1200px
	 * 360px is the narrowest supported viewport, not a breakpoint.
	 */

	/* ------------------------------------------------------------------
	 * Layers (z-index) for things that stack across components. Stacking
	 * inside a component (0-4) stays literal.
	 * ------------------------------------------------------------------ */

	--sp-z-raised: 10;
	--sp-z-dropdown: 20;
	--sp-z-menu: 30;
	--sp-z-header: 990;
	/* While the phone header is expanded it rises over an overlay that
	   covers everything else on the page, embeds included. */
	--sp-z-overlay: 10001;
	--sp-z-header-expanded: 10002;
	--sp-z-skip-link: 100000;

	/* ------------------------------------------------------------------
	 * State and motion
	 * ------------------------------------------------------------------ */

	--sp-state-focus-ring-width: 2px;
	--sp-state-focus-ring-offset: 2px;
	--sp-state-focus-ring-color: var(--sp-color-focus-ring);
	--sp-state-disabled-opacity: 0.58;
	--sp-motion-duration-fast: 120ms;
	--sp-motion-duration-standard: 180ms;
	--sp-motion-duration-slow: 240ms;
	--sp-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);

	/* ------------------------------------------------------------------
	 * theme.json colour presets follow the colour mode. WordPress prints the
	 * presets as literals from theme.json (the editor's swatches need real
	 * colours); these overrides, printed after them, swap in the roles.
	 * ------------------------------------------------------------------ */

	--wp--preset--color--text-primary: var(--sp-color-text-primary);
	--wp--preset--color--text-strong: var(--sp-color-text-strong);
	--wp--preset--color--text-muted: var(--sp-color-text-muted);
	--wp--preset--color--text-inverse: var(--sp-color-text-inverse);
	--wp--preset--color--accent: var(--sp-color-text-accent);
	--wp--preset--color--layer-canvas: var(--sp-color-layer-canvas);
	--wp--preset--color--layer-1: var(--sp-color-layer-1);
	--wp--preset--color--layer-2: var(--sp-color-layer-2);
	--wp--preset--color--layer-3: var(--sp-color-layer-3);
	--wp--preset--color--border-subtle: var(--sp-color-border-subtle);
	--wp--preset--color--border-strong: var(--sp-color-border-strong);
	--wp--preset--color--action-primary: var(--sp-color-action-primary-bg);
	--wp--preset--color--action-primary-text: var(--sp-color-action-primary-text);
	--wp--preset--color--action-secondary: var(--sp-color-action-secondary-bg);
	--wp--preset--color--action-secondary-text: var(--sp-color-action-secondary-text);
	--wp--preset--color--header-start: var(--sp-color-layer-brand-start);
	--wp--preset--color--header-end: var(--sp-color-layer-brand-end);

	/* ------------------------------------------------------------------
	 * Contract with shared-plugins. The Programs plugin's Southern Partners
	 * adapter (shared-plugins/adapters/programs/southernpartners) deploys
	 * separately and reads these older names, so they keep their values.
	 * Theme code does not use them; remove each once the adapter moves to
	 * the --uplift-* scales. (The adapter also reads
	 * --sp-component-search-overlay-shadow, a live component role above.)
	 * ------------------------------------------------------------------ */

	--sp-ref-space-1: 0.25rem;
	--sp-ref-space-2: 0.5rem;
	--sp-ref-space-3: 0.75rem;
	--sp-ref-space-4: 1rem;
	--sp-ref-space-5: 1.5rem;
	--sp-ref-space-6: 2rem;
	--sp-ref-space-7: 3rem;
	--sp-ref-space-8: 4rem;
	--sp-space-1: 0.5rem;
	--sp-space-2: 1rem;
	--sp-layout-radius-sm: var(--uplift-radius-sm);
	--sp-layout-radius-md: var(--uplift-radius-lg);
	--sp-ref-color-white: var(--uplift-white);
	--sp-ref-color-success-700: var(--uplift-green);
	--sp-ref-color-success-50: var(--uplift-green-50);
	--sp-ref-color-utility-yellow-500: var(--uplift-yellow);
}

/* A page or region can force a mode; light-dark() then follows it. */
[data-theme="light"] {
	color-scheme: light;
}

[data-theme="dark"] {
	color-scheme: dark;
}