/* @loylpay/design-tokens. Generated from tokens/*.json by scripts/build.mjs. Do not edit. */

/* ---- Base tokens: colourways, neutrals, type, shape, motion ---- */
:root {
  --lp-dark-neutral-text: #d9d3c7; /* Body text on dark surfaces (warm, from the light body text's hue). */
  --lp-dark-neutral-muted: #b0a99a; /* Muted / secondary text on dark surfaces. */
  --lp-dark-neutral-page: #171613; /* Website page background in dark mode (loylpay.com). */
  --lp-dark-neutral-surface: #22201c; /* Website cards and panels in dark mode (loylpay.com). */
  --lp-dark-status-danger: #ffb4ab; /* Destructive / error on dark surfaces (text, and fill behind danger-fg). */
  --lp-dark-status-danger-fg: #690005; /* Label on a dark-mode danger fill. */
  --lp-dark-butter-bg: #121110; /* Page background. */
  --lp-dark-butter-surface: #1a1917; /* Cards, popovers, inputs. */
  --lp-dark-butter-tint: #242321; /* Paper's job in dark: tinted sections, muted fills, sidebar. */
  --lp-dark-butter-fill: #3e3d3b; /* Ground's job as a large or secondary fill (secondary buttons, badges) in dark. */
  --lp-dark-plum-bg: #1e0918; /* Page background. */
  --lp-dark-plum-surface: #280f21; /* Cards, popovers, inputs. */
  --lp-dark-plum-tint: #3a1631; /* Paper's job in dark: tinted sections, muted fills, sidebar. */
  --lp-dark-plum-fill: #542e4a; /* Ground's job as a large or secondary fill (secondary buttons, badges) in dark. */
  --lp-dark-eucalyptus-bg: #001611; /* Page background. */
  --lp-dark-eucalyptus-surface: #041f19; /* Cards, popovers, inputs. */
  --lp-dark-eucalyptus-tint: #16302a; /* Paper's job in dark: tinted sections, muted fills, sidebar. */
  --lp-dark-eucalyptus-fill: #29433d; /* Ground's job as a large or secondary fill (secondary buttons, badges) in dark. */
  --lp-dark-harbour-bg: #061125; /* Page background. */
  --lp-dark-harbour-surface: #0b1930; /* Cards, popovers, inputs. */
  --lp-dark-harbour-tint: #13233f; /* Paper's job in dark: tinted sections, muted fills, sidebar. */
  --lp-dark-harbour-fill: #2c3d5b; /* Ground's job as a large or secondary fill (secondary buttons, badges) in dark. */
  --lp-dark-mango-bg: #121110; /* Page background. */
  --lp-dark-mango-surface: #1a1917; /* Cards, popovers, inputs. */
  --lp-dark-mango-tint: #242321; /* Paper's job in dark: tinted sections, muted fills, sidebar. */
  --lp-dark-mango-fill: #3e3d3b; /* Ground's job as a large or secondary fill (secondary buttons, badges) in dark. */
  --lp-dark-hot-pink-bg: #1e0919; /* Page background. */
  --lp-dark-hot-pink-surface: #280f22; /* Cards, popovers, inputs. */
  --lp-dark-hot-pink-tint: #33172c; /* Paper's job in dark: tinted sections, muted fills, sidebar. */
  --lp-dark-hot-pink-fill: #542e4a; /* Ground's job as a large or secondary fill (secondary buttons, badges) in dark. */
  --lp-dark-lime-bg: #001709; /* Page background. */
  --lp-dark-lime-surface: #01200f; /* Cards, popovers, inputs. */
  --lp-dark-lime-tint: #052a17; /* Paper's job in dark: tinted sections, muted fills, sidebar. */
  --lp-dark-lime-fill: #1b472e; /* Ground's job as a large or secondary fill (secondary buttons, badges) in dark. */
  --lp-dark-electric-bg: #081025; /* Page background. */
  --lp-dark-electric-surface: #0e1830; /* Cards, popovers, inputs. */
  --lp-dark-electric-tint: #16213d; /* Paper's job in dark: tinted sections, muted fills, sidebar. */
  --lp-dark-electric-fill: #2b3c62; /* Ground's job as a large or secondary fill (secondary buttons, badges) in dark. */
  --lp-neutral-page: #fcfbf8; /* Page background (warm paper). */
  --lp-neutral-white: #ffffff; /* Card / surface background. */
  --lp-neutral-text: #5f5a4c; /* Body text. */
  --lp-neutral-muted: #6c6659; /* Muted / secondary text. */
  --lp-neutral-lead: #55503f; /* Hero lead paragraph (live site). */
  --lp-neutral-subtle: #7e7868; /* Fine print on the live site. Large text / decorative only: fails 4.5:1 on page. */
  --lp-neutral-art-paper: #fffcf2; /* Warm paper behind ink-line artwork and docket/receipt drawings (website, app illustrations). */
  --lp-status-danger: #b3261e; /* Destructive / error. Not in the brand brief: product addition, to be confirmed. */
  --lp-status-danger-fg: #ffffff;
  --lp-mango-ink: #1a1917;
  --lp-mango-ground: #ffc21a;
  --lp-mango-tap: #ff3b1f; /* Tap dot / accent. Decorative only: never use for text. */
  --lp-mango-paper: #fff3c9;
  --lp-mango-ink-soft: #3f3b31; /* Secondary text on mango ground (live site). */
  --lp-hot-pink-ink: #2e0626;
  --lp-hot-pink-ground: #ff6fae;
  --lp-hot-pink-tap: #ffd23f; /* Tap dot / accent. Decorative only: never use for text. */
  --lp-hot-pink-paper: #ffe5f0;
  --lp-hot-pink-ink-soft: #5c1f4c; /* Secondary text on hot-pink paper (live site). */
  --lp-hot-pink-ink-mid: #4a1240; /* Secondary text on hot-pink ground (live site). */
  --lp-hot-pink-paper-soft: #ffc2dc; /* Secondary text on hot-pink ink (live site). */
  --lp-lime-ink: #0b3a22;
  --lp-lime-ground: #b6f05a;
  --lp-lime-tap: #ff4f1f; /* Tap dot / accent. Decorative only: never use for text. */
  --lp-lime-paper: #effcd9;
  --lp-lime-ink-soft: #2f5a3c; /* Secondary text on lime paper (live site). */
  --lp-lime-ink-mid: #1f4a2e; /* Secondary text on lime paper / ground (live site). */
  --lp-lime-paper-soft: #bfe6a0; /* Secondary text on lime ink (live site). */
  --lp-electric-ink: #0a1a4a;
  --lp-electric-ground: #6e9bff;
  --lp-electric-tap: #ffc21a; /* Tap dot / accent. Decorative only: never use for text. */
  --lp-electric-paper: #e6edff;
  --lp-electric-paper-soft: #c6d6ff; /* Secondary text on electric ink (live site). */
  --lp-chilli-ink: #1a1917;
  --lp-chilli-ground: #ff5a2a;
  --lp-chilli-tap: #ffd23f; /* Tap dot / accent. Decorative only: never use for text. */
  --lp-chilli-paper: #ffe8df;
  --lp-butter-ink: #1a1917;
  --lp-butter-ground: #ffcd78;
  --lp-butter-tap: #e1633b; /* Tap dot / accent. Decorative only: never use for text. */
  --lp-butter-paper: #f3eee4;
  --lp-plum-ink: #3a1631;
  --lp-plum-ground: #f1d6e1;
  --lp-plum-tap: #ff9a5a; /* Tap dot / accent. Decorative only: never use for text. */
  --lp-plum-paper: #faf0f4;
  --lp-eucalyptus-ink: #16302a;
  --lp-eucalyptus-ground: #cfe2d3;
  --lp-eucalyptus-tap: #e1633b; /* Tap dot / accent. Decorative only: never use for text. */
  --lp-eucalyptus-paper: #eef5ef;
  --lp-eucalyptus-ink-soft: #4a6158; /* Secondary text on eucalyptus paper / white (merchant screens drawn on the website). */
  --lp-harbour-ink: #13233f;
  --lp-harbour-ground: #ccddf0;
  --lp-harbour-tap: #ff9a5a; /* Tap dot / accent. Decorative only: never use for text. */
  --lp-harbour-paper: #eef3fa;
  --lp-stage-checked-in: #6e9bff; /* Stage 1: the customer tapped in. */
  --lp-stage-waiting: #ffc21a; /* Stage 2: waiting for the paid order. */
  --lp-stage-reward: #ff5a2a; /* Stage 3: reward to apply (lit only when the customer asked for one). */
  --lp-stage-paid: #b6f05a; /* Stage 4: order paid and matched. */
  --lp-font-display: Haskoy, 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Headings and brand moments. */
  --lp-font-sans: 'Inter Variable', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Dense UI text, tables, numbers (use tabular-nums). */
  --lp-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --lp-weight-regular: 400;
  --lp-weight-book: 450;
  --lp-weight-medium: 550; /* Buttons, nav, emphasis. */
  --lp-weight-semibold: 600;
  --lp-weight-display: 650; /* Headlines (brief: 650). */
  --lp-tracking-display: -0.05em; /* Hero display. */
  --lp-tracking-headline: -0.045em;
  --lp-tracking-heading: -0.04em; /* Section headings, wordmark. */
  --lp-tracking-title: -0.035em;
  --lp-tracking-subtitle: -0.03em;
  --lp-tracking-ui: -0.02em;
  --lp-tracking-normal: 0em;
  --lp-tracking-label: 0.06em;
  --lp-tracking-eyebrow: 0.12em; /* Uppercase eyebrows. */
  --lp-tracking-eyebrow-wide: 0.14em;
  --lp-leading-display: 0.95;
  --lp-leading-tight: 1;
  --lp-leading-heading: 1.05;
  --lp-leading-snug: 1.35;
  --lp-leading-body: 1.6;
  --lp-leading-relaxed: 1.65;
  --lp-size-2xs: 11px;
  --lp-size-xs: 12px;
  --lp-size-caption: 13.5px;
  --lp-size-small: 14.5px; /* Nav, buttons. */
  --lp-size-body: 15.5px; /* Default body copy. */
  --lp-size-body-lg: 17.5px;
  --lp-size-title-sm: 20px;
  --lp-size-title: 22px;
  --lp-size-title-lg: 26px;
  --lp-size-heading: 40px;
  --lp-size-lead: clamp(17px, 4.4vw, 19px);
  --lp-size-display-sm: clamp(28px, 6vw, 36px);
  --lp-size-display-md: clamp(32px, 7vw, 46px);
  --lp-size-display-lg: clamp(34px, 7.5vw, 52px);
  --lp-size-display-xl: clamp(38px, 8vw, 64px);
  --lp-size-display-2xl: clamp(46px, 10vw, 84px); /* Hero h1. */
  --lp-radius-xs: 4px; /* Tags, small marks. */
  --lp-radius-sm: 12px;
  --lp-radius-md: 14px; /* Inputs, small cards (shadcn --radius). */
  --lp-radius-lg: 18px;
  --lp-radius-xl: 22px; /* Cards. */
  --lp-radius-2xl: 26px; /* Large cards (most common on the site). */
  --lp-radius-3xl: 34px; /* Hero panels. */
  --lp-radius-pill: 999px; /* Buttons, chips. */
  --lp-shadow-soft: 0px 1px 2px 0px rgba(26,25,23,0.06), 0px 4px 12px 0px rgba(26,25,23,0.05); /* Resting card / popover. Product addition (site cards are flat). */
  --lp-shadow-lift: 0px 16px 38px 0px rgba(26,25,23,0.09); /* Card hover lift (site .hv10). */
  --lp-shadow-raised: 0px 22px 50px 0px rgba(26,25,23,0.18); /* Floating panel / phone mock. */
  --lp-shadow-badge: 0px 10px 26px 0px rgba(26,25,23,0.18); /* Dark pill badge. */
  --lp-line-width: 1px; /* Hairlines: 1px ink at low alpha, never hard borders. */
  --lp-motion-duration-fast: 120ms;
  --lp-motion-duration-base: 180ms; /* Product addition: the site has no transitions. */
  --lp-motion-duration-slow: 320ms;
  --lp-motion-duration-ring: 2.6s; /* lpRing pulse. */
  --lp-motion-duration-ring-delay: 1.3s; /* Second ring offset. */
  --lp-motion-duration-glow: 16s; /* lpGlow ambient drift. */
  --lp-motion-duration-expressive: 550ms; /* Brand moments: a reward flicked to the counter, a stamp landing in the seal. */
  --lp-motion-duration-celebrate: 1500ms; /* Rare celebrations (reward unlocked confetti). Skip under reduced motion. */
  --lp-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --lp-motion-easing-out: cubic-bezier(0, 0, 0.58, 1);
  --lp-motion-easing-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --lp-motion-easing-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* Springy landing with a small overshoot (seal stamp, ticket return). */
  --lp-motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 0.6); /* Leaving the screen quickly (a flick off the top). */
  --lp-motion-lift-distance: -3px; /* Hover lift translateY. */
  --lp-logo-mark-scale: 0.8; /* Size of the two boomerangs inside any seal, app icon or reward seal, as a fraction of the 40 x 40 box. One value for every logo and mark. */
  --lp-logo-ring-scale: 0.9; /* Inner seal inside the ink rim of the logo seals (sets the rim width). */
}

/* ---- Semantic roles per audience theme (data-theme) and palette (data-palette) ---- */
:root,
[data-theme="brand"],
[data-palette="primary"] {
  --lp-color-bg: var(--lp-neutral-page);
  --lp-color-surface: var(--lp-neutral-white);
  --lp-color-surface-tint: var(--lp-mango-paper);
  --lp-color-text: var(--lp-mango-ink);
  --lp-color-text-body: var(--lp-neutral-text);
  --lp-color-text-muted: var(--lp-neutral-muted);
  --lp-color-primary: var(--lp-mango-ink);
  --lp-color-primary-fg: var(--lp-mango-paper);
  --lp-color-secondary: var(--lp-mango-ground);
  --lp-color-secondary-fg: var(--lp-mango-ink);
  --lp-color-accent: var(--lp-mango-paper);
  --lp-color-accent-fg: var(--lp-mango-ink);
  --lp-color-tap: var(--lp-mango-tap);
  --lp-color-ground: var(--lp-mango-ground);
  --lp-color-paper: var(--lp-mango-paper);
  --lp-color-ink: var(--lp-mango-ink);
  --lp-color-inverse: var(--lp-mango-ink);
  --lp-color-inverse-fg: var(--lp-mango-paper);
  --lp-color-line: color-mix(in srgb, var(--lp-mango-ink) 8%, transparent);
  --lp-color-line-strong: color-mix(in srgb, var(--lp-mango-ink) 20%, transparent);
  --lp-color-ring: var(--lp-mango-ink);
  --lp-color-danger: var(--lp-status-danger);
  --lp-color-danger-fg: var(--lp-status-danger-fg);
  --lp-shadow-lift-tinted: 0 16px 36px 0 color-mix(in srgb, var(--lp-mango-ink) 14%, transparent);
}

[data-theme="regulars"],
[data-theme="regulars"] [data-palette="primary"] {
  --lp-color-bg: var(--lp-neutral-page);
  --lp-color-surface: var(--lp-neutral-white);
  --lp-color-surface-tint: var(--lp-mango-paper);
  --lp-color-text: var(--lp-mango-ink);
  --lp-color-text-body: var(--lp-neutral-text);
  --lp-color-text-muted: var(--lp-neutral-muted);
  --lp-color-primary: var(--lp-mango-ink);
  --lp-color-primary-fg: var(--lp-mango-paper);
  --lp-color-secondary: var(--lp-mango-ground);
  --lp-color-secondary-fg: var(--lp-mango-ink);
  --lp-color-accent: var(--lp-mango-paper);
  --lp-color-accent-fg: var(--lp-mango-ink);
  --lp-color-tap: var(--lp-mango-tap);
  --lp-color-ground: var(--lp-mango-ground);
  --lp-color-paper: var(--lp-mango-paper);
  --lp-color-ink: var(--lp-mango-ink);
  --lp-color-inverse: var(--lp-mango-ink);
  --lp-color-inverse-fg: var(--lp-mango-paper);
  --lp-color-line: color-mix(in srgb, var(--lp-mango-ink) 8%, transparent);
  --lp-color-line-strong: color-mix(in srgb, var(--lp-mango-ink) 20%, transparent);
  --lp-color-ring: var(--lp-mango-ink);
  --lp-color-danger: var(--lp-status-danger);
  --lp-color-danger-fg: var(--lp-status-danger-fg);
  --lp-shadow-lift-tinted: 0 16px 36px 0 color-mix(in srgb, var(--lp-mango-ink) 14%, transparent);
}

[data-theme="merchants"],
[data-theme="merchants"] [data-palette="primary"] {
  --lp-color-bg: var(--lp-neutral-page);
  --lp-color-surface: var(--lp-neutral-white);
  --lp-color-surface-tint: var(--lp-eucalyptus-paper);
  --lp-color-text: var(--lp-eucalyptus-ink);
  --lp-color-text-body: var(--lp-neutral-text);
  --lp-color-text-muted: var(--lp-neutral-muted);
  --lp-color-primary: var(--lp-eucalyptus-ink);
  --lp-color-primary-fg: var(--lp-eucalyptus-paper);
  --lp-color-secondary: var(--lp-eucalyptus-ground);
  --lp-color-secondary-fg: var(--lp-eucalyptus-ink);
  --lp-color-accent: var(--lp-eucalyptus-paper);
  --lp-color-accent-fg: var(--lp-eucalyptus-ink);
  --lp-color-tap: var(--lp-eucalyptus-tap);
  --lp-color-ground: var(--lp-eucalyptus-ground);
  --lp-color-paper: var(--lp-eucalyptus-paper);
  --lp-color-ink: var(--lp-eucalyptus-ink);
  --lp-color-inverse: var(--lp-eucalyptus-ink);
  --lp-color-inverse-fg: var(--lp-eucalyptus-paper);
  --lp-color-line: color-mix(in srgb, var(--lp-eucalyptus-ink) 8%, transparent);
  --lp-color-line-strong: color-mix(in srgb, var(--lp-eucalyptus-ink) 20%, transparent);
  --lp-color-ring: var(--lp-eucalyptus-ink);
  --lp-color-danger: var(--lp-status-danger);
  --lp-color-danger-fg: var(--lp-status-danger-fg);
  --lp-shadow-lift-tinted: 0 16px 36px 0 color-mix(in srgb, var(--lp-eucalyptus-ink) 14%, transparent);
}

[data-theme="investors"],
[data-theme="investors"] [data-palette="primary"] {
  --lp-color-bg: var(--lp-neutral-page);
  --lp-color-surface: var(--lp-neutral-white);
  --lp-color-surface-tint: var(--lp-harbour-paper);
  --lp-color-text: var(--lp-harbour-ink);
  --lp-color-text-body: var(--lp-neutral-text);
  --lp-color-text-muted: var(--lp-neutral-muted);
  --lp-color-primary: var(--lp-harbour-ink);
  --lp-color-primary-fg: var(--lp-harbour-paper);
  --lp-color-secondary: var(--lp-harbour-ground);
  --lp-color-secondary-fg: var(--lp-harbour-ink);
  --lp-color-accent: var(--lp-harbour-paper);
  --lp-color-accent-fg: var(--lp-harbour-ink);
  --lp-color-tap: var(--lp-harbour-tap);
  --lp-color-ground: var(--lp-harbour-ground);
  --lp-color-paper: var(--lp-harbour-paper);
  --lp-color-ink: var(--lp-harbour-ink);
  --lp-color-inverse: var(--lp-harbour-ink);
  --lp-color-inverse-fg: var(--lp-harbour-paper);
  --lp-color-line: color-mix(in srgb, var(--lp-harbour-ink) 8%, transparent);
  --lp-color-line-strong: color-mix(in srgb, var(--lp-harbour-ink) 20%, transparent);
  --lp-color-ring: var(--lp-harbour-ink);
  --lp-color-danger: var(--lp-status-danger);
  --lp-color-danger-fg: var(--lp-status-danger-fg);
  --lp-shadow-lift-tinted: 0 16px 36px 0 color-mix(in srgb, var(--lp-harbour-ink) 14%, transparent);
}

[data-palette="pop"],
[data-theme="brand"][data-palette="pop"],
[data-palette="pop"] [data-theme="brand"],
[data-theme="brand"] [data-palette="pop"] {
  --lp-color-bg: var(--lp-neutral-page);
  --lp-color-surface: var(--lp-neutral-white);
  --lp-color-surface-tint: var(--lp-mango-paper);
  --lp-color-text: var(--lp-mango-ink);
  --lp-color-text-body: var(--lp-neutral-text);
  --lp-color-text-muted: var(--lp-neutral-muted);
  --lp-color-primary: var(--lp-mango-ink);
  --lp-color-primary-fg: var(--lp-mango-paper);
  --lp-color-secondary: var(--lp-mango-ground);
  --lp-color-secondary-fg: var(--lp-mango-ink);
  --lp-color-accent: var(--lp-mango-paper);
  --lp-color-accent-fg: var(--lp-mango-ink);
  --lp-color-tap: var(--lp-mango-tap);
  --lp-color-ground: var(--lp-mango-ground);
  --lp-color-paper: var(--lp-mango-paper);
  --lp-color-ink: var(--lp-mango-ink);
  --lp-color-inverse: var(--lp-mango-ink);
  --lp-color-inverse-fg: var(--lp-mango-paper);
  --lp-color-line: color-mix(in srgb, var(--lp-mango-ink) 8%, transparent);
  --lp-color-line-strong: color-mix(in srgb, var(--lp-mango-ink) 20%, transparent);
  --lp-color-ring: var(--lp-mango-ink);
  --lp-color-danger: var(--lp-status-danger);
  --lp-color-danger-fg: var(--lp-status-danger-fg);
  --lp-shadow-lift-tinted: 0 16px 36px 0 color-mix(in srgb, var(--lp-mango-ink) 14%, transparent);
}

[data-theme="regulars"][data-palette="pop"],
[data-palette="pop"] [data-theme="regulars"],
[data-theme="regulars"] [data-palette="pop"] {
  --lp-color-bg: var(--lp-neutral-page);
  --lp-color-surface: var(--lp-neutral-white);
  --lp-color-surface-tint: var(--lp-hot-pink-paper);
  --lp-color-text: var(--lp-hot-pink-ink);
  --lp-color-text-body: var(--lp-neutral-text);
  --lp-color-text-muted: var(--lp-neutral-muted);
  --lp-color-primary: var(--lp-hot-pink-ink);
  --lp-color-primary-fg: var(--lp-hot-pink-paper);
  --lp-color-secondary: var(--lp-hot-pink-ground);
  --lp-color-secondary-fg: var(--lp-hot-pink-ink);
  --lp-color-accent: var(--lp-hot-pink-paper);
  --lp-color-accent-fg: var(--lp-hot-pink-ink);
  --lp-color-tap: var(--lp-hot-pink-tap);
  --lp-color-ground: var(--lp-hot-pink-ground);
  --lp-color-paper: var(--lp-hot-pink-paper);
  --lp-color-ink: var(--lp-hot-pink-ink);
  --lp-color-inverse: var(--lp-hot-pink-ink);
  --lp-color-inverse-fg: var(--lp-hot-pink-paper);
  --lp-color-line: color-mix(in srgb, var(--lp-hot-pink-ink) 8%, transparent);
  --lp-color-line-strong: color-mix(in srgb, var(--lp-hot-pink-ink) 20%, transparent);
  --lp-color-ring: var(--lp-hot-pink-ink);
  --lp-color-danger: var(--lp-status-danger);
  --lp-color-danger-fg: var(--lp-status-danger-fg);
  --lp-shadow-lift-tinted: 0 16px 36px 0 color-mix(in srgb, var(--lp-hot-pink-ink) 14%, transparent);
}

[data-theme="merchants"][data-palette="pop"],
[data-palette="pop"] [data-theme="merchants"],
[data-theme="merchants"] [data-palette="pop"] {
  --lp-color-bg: var(--lp-neutral-page);
  --lp-color-surface: var(--lp-neutral-white);
  --lp-color-surface-tint: var(--lp-lime-paper);
  --lp-color-text: var(--lp-lime-ink);
  --lp-color-text-body: var(--lp-neutral-text);
  --lp-color-text-muted: var(--lp-neutral-muted);
  --lp-color-primary: var(--lp-lime-ink);
  --lp-color-primary-fg: var(--lp-lime-paper);
  --lp-color-secondary: var(--lp-lime-ground);
  --lp-color-secondary-fg: var(--lp-lime-ink);
  --lp-color-accent: var(--lp-lime-paper);
  --lp-color-accent-fg: var(--lp-lime-ink);
  --lp-color-tap: var(--lp-lime-tap);
  --lp-color-ground: var(--lp-lime-ground);
  --lp-color-paper: var(--lp-lime-paper);
  --lp-color-ink: var(--lp-lime-ink);
  --lp-color-inverse: var(--lp-lime-ink);
  --lp-color-inverse-fg: var(--lp-lime-paper);
  --lp-color-line: color-mix(in srgb, var(--lp-lime-ink) 8%, transparent);
  --lp-color-line-strong: color-mix(in srgb, var(--lp-lime-ink) 20%, transparent);
  --lp-color-ring: var(--lp-lime-ink);
  --lp-color-danger: var(--lp-status-danger);
  --lp-color-danger-fg: var(--lp-status-danger-fg);
  --lp-shadow-lift-tinted: 0 16px 36px 0 color-mix(in srgb, var(--lp-lime-ink) 14%, transparent);
}

[data-theme="investors"][data-palette="pop"],
[data-palette="pop"] [data-theme="investors"],
[data-theme="investors"] [data-palette="pop"] {
  --lp-color-bg: var(--lp-neutral-page);
  --lp-color-surface: var(--lp-neutral-white);
  --lp-color-surface-tint: var(--lp-electric-paper);
  --lp-color-text: var(--lp-electric-ink);
  --lp-color-text-body: var(--lp-neutral-text);
  --lp-color-text-muted: var(--lp-neutral-muted);
  --lp-color-primary: var(--lp-electric-ink);
  --lp-color-primary-fg: var(--lp-electric-paper);
  --lp-color-secondary: var(--lp-electric-ground);
  --lp-color-secondary-fg: var(--lp-electric-ink);
  --lp-color-accent: var(--lp-electric-paper);
  --lp-color-accent-fg: var(--lp-electric-ink);
  --lp-color-tap: var(--lp-electric-tap);
  --lp-color-ground: var(--lp-electric-ground);
  --lp-color-paper: var(--lp-electric-paper);
  --lp-color-ink: var(--lp-electric-ink);
  --lp-color-inverse: var(--lp-electric-ink);
  --lp-color-inverse-fg: var(--lp-electric-paper);
  --lp-color-line: color-mix(in srgb, var(--lp-electric-ink) 8%, transparent);
  --lp-color-line-strong: color-mix(in srgb, var(--lp-electric-ink) 20%, transparent);
  --lp-color-ring: var(--lp-electric-ink);
  --lp-color-danger: var(--lp-status-danger);
  --lp-color-danger-fg: var(--lp-status-danger-fg);
  --lp-shadow-lift-tinted: 0 16px 36px 0 color-mix(in srgb, var(--lp-electric-ink) 14%, transparent);
}

/* ---- shadcn/ui variable names, wired to the semantic roles above ---- */
:root,
[data-theme],
[data-palette] {
  --background: var(--lp-color-bg);
  --foreground: var(--lp-color-text);
  --card: var(--lp-color-surface);
  --card-foreground: var(--lp-color-text);
  --popover: var(--lp-color-surface);
  --popover-foreground: var(--lp-color-text);
  --primary: var(--lp-color-primary);
  --primary-foreground: var(--lp-color-primary-fg);
  --secondary: var(--lp-color-secondary);
  --secondary-foreground: var(--lp-color-secondary-fg);
  --muted: var(--lp-color-surface-tint);
  --muted-foreground: var(--lp-color-text-muted);
  --accent: var(--lp-color-accent);
  --accent-foreground: var(--lp-color-accent-fg);
  --destructive: var(--lp-color-danger);
  --destructive-foreground: var(--lp-color-danger-fg);
  --border: var(--lp-color-line);
  --input: var(--lp-color-line-strong);
  --ring: var(--lp-color-ring);
  --radius: var(--lp-radius-md);
  --chart-1: var(--lp-plum-ink);
  --chart-2: var(--lp-eucalyptus-ink);
  --chart-3: var(--lp-harbour-ink);
  --chart-4: var(--lp-butter-tap);
  --chart-5: var(--lp-butter-ground);
  --sidebar: var(--lp-color-surface-tint);
  --sidebar-foreground: var(--lp-color-text);
  --sidebar-primary: var(--lp-color-primary);
  --sidebar-primary-foreground: var(--lp-color-primary-fg);
  --sidebar-accent: var(--lp-color-secondary);
  --sidebar-accent-foreground: var(--lp-color-secondary-fg);
  --sidebar-border: var(--lp-color-line);
  --sidebar-ring: var(--lp-color-ring);
}

/* ---- Dark mode: follows the device setting. No class or toggle; see README "Dark mode". ---- */
:root {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }

  :root,
  [data-theme="brand"],
  [data-palette="primary"] {
    --lp-color-bg: var(--lp-dark-mango-bg);
    --lp-color-surface: var(--lp-dark-mango-surface);
    --lp-color-surface-tint: var(--lp-dark-mango-tint);
    --lp-color-text: var(--lp-mango-paper);
    --lp-color-text-body: var(--lp-dark-neutral-text);
    --lp-color-text-muted: var(--lp-dark-neutral-muted);
    --lp-color-primary: var(--lp-mango-ground);
    --lp-color-primary-fg: var(--lp-mango-ink);
    --lp-color-secondary: var(--lp-dark-mango-fill);
    --lp-color-secondary-fg: var(--lp-mango-paper);
    --lp-color-accent: var(--lp-dark-mango-tint);
    --lp-color-accent-fg: var(--lp-mango-paper);
    --lp-color-tap: var(--lp-mango-tap);
    --lp-color-ground: var(--lp-mango-ground);
    --lp-color-paper: var(--lp-dark-mango-tint);
    --lp-color-ink: var(--lp-mango-ink);
    --lp-color-inverse: var(--lp-mango-paper);
    --lp-color-inverse-fg: var(--lp-mango-ink);
    --lp-color-line: color-mix(in srgb, var(--lp-mango-paper) 12%, transparent);
    --lp-color-line-strong: color-mix(in srgb, var(--lp-mango-paper) 28%, transparent);
    --lp-color-ring: var(--lp-mango-ground);
    --lp-color-danger: var(--lp-dark-status-danger);
    --lp-color-danger-fg: var(--lp-dark-status-danger-fg);
    --lp-shadow-lift-tinted: 0 16px 36px 0 rgba(0, 0, 0, 0.45);
  }

  [data-theme="regulars"],
  [data-theme="regulars"] [data-palette="primary"] {
    --lp-color-bg: var(--lp-dark-mango-bg);
    --lp-color-surface: var(--lp-dark-mango-surface);
    --lp-color-surface-tint: var(--lp-dark-mango-tint);
    --lp-color-text: var(--lp-mango-paper);
    --lp-color-text-body: var(--lp-dark-neutral-text);
    --lp-color-text-muted: var(--lp-dark-neutral-muted);
    --lp-color-primary: var(--lp-mango-ground);
    --lp-color-primary-fg: var(--lp-mango-ink);
    --lp-color-secondary: var(--lp-dark-mango-fill);
    --lp-color-secondary-fg: var(--lp-mango-paper);
    --lp-color-accent: var(--lp-dark-mango-tint);
    --lp-color-accent-fg: var(--lp-mango-paper);
    --lp-color-tap: var(--lp-mango-tap);
    --lp-color-ground: var(--lp-mango-ground);
    --lp-color-paper: var(--lp-dark-mango-tint);
    --lp-color-ink: var(--lp-mango-ink);
    --lp-color-inverse: var(--lp-mango-paper);
    --lp-color-inverse-fg: var(--lp-mango-ink);
    --lp-color-line: color-mix(in srgb, var(--lp-mango-paper) 12%, transparent);
    --lp-color-line-strong: color-mix(in srgb, var(--lp-mango-paper) 28%, transparent);
    --lp-color-ring: var(--lp-mango-ground);
    --lp-color-danger: var(--lp-dark-status-danger);
    --lp-color-danger-fg: var(--lp-dark-status-danger-fg);
    --lp-shadow-lift-tinted: 0 16px 36px 0 rgba(0, 0, 0, 0.45);
  }

  [data-theme="merchants"],
  [data-theme="merchants"] [data-palette="primary"] {
    --lp-color-bg: var(--lp-dark-eucalyptus-bg);
    --lp-color-surface: var(--lp-dark-eucalyptus-surface);
    --lp-color-surface-tint: var(--lp-dark-eucalyptus-tint);
    --lp-color-text: var(--lp-eucalyptus-paper);
    --lp-color-text-body: var(--lp-dark-neutral-text);
    --lp-color-text-muted: var(--lp-dark-neutral-muted);
    --lp-color-primary: var(--lp-eucalyptus-ground);
    --lp-color-primary-fg: var(--lp-eucalyptus-ink);
    --lp-color-secondary: var(--lp-dark-eucalyptus-fill);
    --lp-color-secondary-fg: var(--lp-eucalyptus-paper);
    --lp-color-accent: var(--lp-dark-eucalyptus-tint);
    --lp-color-accent-fg: var(--lp-eucalyptus-paper);
    --lp-color-tap: var(--lp-eucalyptus-tap);
    --lp-color-ground: var(--lp-eucalyptus-ground);
    --lp-color-paper: var(--lp-dark-eucalyptus-tint);
    --lp-color-ink: var(--lp-eucalyptus-ink);
    --lp-color-inverse: var(--lp-eucalyptus-paper);
    --lp-color-inverse-fg: var(--lp-eucalyptus-ink);
    --lp-color-line: color-mix(in srgb, var(--lp-eucalyptus-paper) 12%, transparent);
    --lp-color-line-strong: color-mix(in srgb, var(--lp-eucalyptus-paper) 28%, transparent);
    --lp-color-ring: var(--lp-eucalyptus-ground);
    --lp-color-danger: var(--lp-dark-status-danger);
    --lp-color-danger-fg: var(--lp-dark-status-danger-fg);
    --lp-shadow-lift-tinted: 0 16px 36px 0 rgba(0, 0, 0, 0.45);
  }

  [data-theme="investors"],
  [data-theme="investors"] [data-palette="primary"] {
    --lp-color-bg: var(--lp-dark-harbour-bg);
    --lp-color-surface: var(--lp-dark-harbour-surface);
    --lp-color-surface-tint: var(--lp-dark-harbour-tint);
    --lp-color-text: var(--lp-harbour-paper);
    --lp-color-text-body: var(--lp-dark-neutral-text);
    --lp-color-text-muted: var(--lp-dark-neutral-muted);
    --lp-color-primary: var(--lp-harbour-ground);
    --lp-color-primary-fg: var(--lp-harbour-ink);
    --lp-color-secondary: var(--lp-dark-harbour-fill);
    --lp-color-secondary-fg: var(--lp-harbour-paper);
    --lp-color-accent: var(--lp-dark-harbour-tint);
    --lp-color-accent-fg: var(--lp-harbour-paper);
    --lp-color-tap: var(--lp-harbour-tap);
    --lp-color-ground: var(--lp-harbour-ground);
    --lp-color-paper: var(--lp-dark-harbour-tint);
    --lp-color-ink: var(--lp-harbour-ink);
    --lp-color-inverse: var(--lp-harbour-paper);
    --lp-color-inverse-fg: var(--lp-harbour-ink);
    --lp-color-line: color-mix(in srgb, var(--lp-harbour-paper) 12%, transparent);
    --lp-color-line-strong: color-mix(in srgb, var(--lp-harbour-paper) 28%, transparent);
    --lp-color-ring: var(--lp-harbour-ground);
    --lp-color-danger: var(--lp-dark-status-danger);
    --lp-color-danger-fg: var(--lp-dark-status-danger-fg);
    --lp-shadow-lift-tinted: 0 16px 36px 0 rgba(0, 0, 0, 0.45);
  }

  [data-palette="pop"],
  [data-theme="brand"][data-palette="pop"],
  [data-palette="pop"] [data-theme="brand"],
  [data-theme="brand"] [data-palette="pop"] {
    --lp-color-bg: var(--lp-dark-mango-bg);
    --lp-color-surface: var(--lp-dark-mango-surface);
    --lp-color-surface-tint: var(--lp-dark-mango-tint);
    --lp-color-text: var(--lp-mango-paper);
    --lp-color-text-body: var(--lp-dark-neutral-text);
    --lp-color-text-muted: var(--lp-dark-neutral-muted);
    --lp-color-primary: var(--lp-mango-ground);
    --lp-color-primary-fg: var(--lp-mango-ink);
    --lp-color-secondary: var(--lp-dark-mango-fill);
    --lp-color-secondary-fg: var(--lp-mango-paper);
    --lp-color-accent: var(--lp-dark-mango-tint);
    --lp-color-accent-fg: var(--lp-mango-paper);
    --lp-color-tap: var(--lp-mango-tap);
    --lp-color-ground: var(--lp-mango-ground);
    --lp-color-paper: var(--lp-dark-mango-tint);
    --lp-color-ink: var(--lp-mango-ink);
    --lp-color-inverse: var(--lp-mango-paper);
    --lp-color-inverse-fg: var(--lp-mango-ink);
    --lp-color-line: color-mix(in srgb, var(--lp-mango-paper) 12%, transparent);
    --lp-color-line-strong: color-mix(in srgb, var(--lp-mango-paper) 28%, transparent);
    --lp-color-ring: var(--lp-mango-ground);
    --lp-color-danger: var(--lp-dark-status-danger);
    --lp-color-danger-fg: var(--lp-dark-status-danger-fg);
    --lp-shadow-lift-tinted: 0 16px 36px 0 rgba(0, 0, 0, 0.45);
  }

  [data-theme="regulars"][data-palette="pop"],
  [data-palette="pop"] [data-theme="regulars"],
  [data-theme="regulars"] [data-palette="pop"] {
    --lp-color-bg: var(--lp-dark-hot-pink-bg);
    --lp-color-surface: var(--lp-dark-hot-pink-surface);
    --lp-color-surface-tint: var(--lp-dark-hot-pink-tint);
    --lp-color-text: var(--lp-hot-pink-paper);
    --lp-color-text-body: var(--lp-dark-neutral-text);
    --lp-color-text-muted: var(--lp-dark-neutral-muted);
    --lp-color-primary: var(--lp-hot-pink-ground);
    --lp-color-primary-fg: var(--lp-hot-pink-ink);
    --lp-color-secondary: var(--lp-dark-hot-pink-fill);
    --lp-color-secondary-fg: var(--lp-hot-pink-paper);
    --lp-color-accent: var(--lp-dark-hot-pink-tint);
    --lp-color-accent-fg: var(--lp-hot-pink-paper);
    --lp-color-tap: var(--lp-hot-pink-tap);
    --lp-color-ground: var(--lp-hot-pink-ground);
    --lp-color-paper: var(--lp-dark-hot-pink-tint);
    --lp-color-ink: var(--lp-hot-pink-ink);
    --lp-color-inverse: var(--lp-hot-pink-paper);
    --lp-color-inverse-fg: var(--lp-hot-pink-ink);
    --lp-color-line: color-mix(in srgb, var(--lp-hot-pink-paper) 12%, transparent);
    --lp-color-line-strong: color-mix(in srgb, var(--lp-hot-pink-paper) 28%, transparent);
    --lp-color-ring: var(--lp-hot-pink-ground);
    --lp-color-danger: var(--lp-dark-status-danger);
    --lp-color-danger-fg: var(--lp-dark-status-danger-fg);
    --lp-shadow-lift-tinted: 0 16px 36px 0 rgba(0, 0, 0, 0.45);
  }

  [data-theme="merchants"][data-palette="pop"],
  [data-palette="pop"] [data-theme="merchants"],
  [data-theme="merchants"] [data-palette="pop"] {
    --lp-color-bg: var(--lp-dark-lime-bg);
    --lp-color-surface: var(--lp-dark-lime-surface);
    --lp-color-surface-tint: var(--lp-dark-lime-tint);
    --lp-color-text: var(--lp-lime-paper);
    --lp-color-text-body: var(--lp-dark-neutral-text);
    --lp-color-text-muted: var(--lp-dark-neutral-muted);
    --lp-color-primary: var(--lp-lime-ground);
    --lp-color-primary-fg: var(--lp-lime-ink);
    --lp-color-secondary: var(--lp-dark-lime-fill);
    --lp-color-secondary-fg: var(--lp-lime-paper);
    --lp-color-accent: var(--lp-dark-lime-tint);
    --lp-color-accent-fg: var(--lp-lime-paper);
    --lp-color-tap: var(--lp-lime-tap);
    --lp-color-ground: var(--lp-lime-ground);
    --lp-color-paper: var(--lp-dark-lime-tint);
    --lp-color-ink: var(--lp-lime-ink);
    --lp-color-inverse: var(--lp-lime-paper);
    --lp-color-inverse-fg: var(--lp-lime-ink);
    --lp-color-line: color-mix(in srgb, var(--lp-lime-paper) 12%, transparent);
    --lp-color-line-strong: color-mix(in srgb, var(--lp-lime-paper) 28%, transparent);
    --lp-color-ring: var(--lp-lime-ground);
    --lp-color-danger: var(--lp-dark-status-danger);
    --lp-color-danger-fg: var(--lp-dark-status-danger-fg);
    --lp-shadow-lift-tinted: 0 16px 36px 0 rgba(0, 0, 0, 0.45);
  }

  [data-theme="investors"][data-palette="pop"],
  [data-palette="pop"] [data-theme="investors"],
  [data-theme="investors"] [data-palette="pop"] {
    --lp-color-bg: var(--lp-dark-electric-bg);
    --lp-color-surface: var(--lp-dark-electric-surface);
    --lp-color-surface-tint: var(--lp-dark-electric-tint);
    --lp-color-text: var(--lp-electric-paper);
    --lp-color-text-body: var(--lp-dark-neutral-text);
    --lp-color-text-muted: var(--lp-dark-neutral-muted);
    --lp-color-primary: var(--lp-electric-ground);
    --lp-color-primary-fg: var(--lp-electric-ink);
    --lp-color-secondary: var(--lp-dark-electric-fill);
    --lp-color-secondary-fg: var(--lp-electric-paper);
    --lp-color-accent: var(--lp-dark-electric-tint);
    --lp-color-accent-fg: var(--lp-electric-paper);
    --lp-color-tap: var(--lp-electric-tap);
    --lp-color-ground: var(--lp-electric-ground);
    --lp-color-paper: var(--lp-dark-electric-tint);
    --lp-color-ink: var(--lp-electric-ink);
    --lp-color-inverse: var(--lp-electric-paper);
    --lp-color-inverse-fg: var(--lp-electric-ink);
    --lp-color-line: color-mix(in srgb, var(--lp-electric-paper) 12%, transparent);
    --lp-color-line-strong: color-mix(in srgb, var(--lp-electric-paper) 28%, transparent);
    --lp-color-ring: var(--lp-electric-ground);
    --lp-color-danger: var(--lp-dark-status-danger);
    --lp-color-danger-fg: var(--lp-dark-status-danger-fg);
    --lp-shadow-lift-tinted: 0 16px 36px 0 rgba(0, 0, 0, 0.45);
  }

  :root,
  [data-theme],
  [data-palette] {
    --chart-1: var(--lp-plum-ground);
    --chart-2: var(--lp-eucalyptus-ground);
    --chart-3: var(--lp-harbour-ground);
    --chart-4: var(--lp-butter-tap);
    --chart-5: var(--lp-butter-ground);
  }
}

/* ---- Brand motion ---- */
@keyframes lp-glow {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  50% { transform: translate3d(-24px, 18px, 0) scale(1.08); opacity: 1; }
}
@keyframes lp-ring {
  0% { transform: scale(0.75); opacity: 0.8; }
  100% { transform: scale(1.9); opacity: 0; }
}
/* Docket and Seal moments: a rubber stamp landing, a card popping in, a ticket leaving. */
@keyframes lp-stamp {
  0% { transform: scale(1.7) rotate(-18deg); opacity: 0; }
  60% { transform: scale(0.94) rotate(-6deg); opacity: 1; }
  100% { transform: scale(1) rotate(-8deg); opacity: 1; }
}
@keyframes lp-pop-in {
  0% { transform: translateY(8px) scale(0.98); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes lp-flick-out {
  0% { transform: none; opacity: 1; }
  100% { transform: translateY(-120%) rotate(-4deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --lp-motion-lift-distance: 0px; }
}