/* Paydot Active Dot — brand tokens v0.8.0 (pre-release)
   Generated equivalent of brand.tokens.json. Edit the JSON first, then mirror it here.
   Every foreground/background pair below is contrast-verified; see BRAND_GUIDELINES.md § Colour. */

:root {
    /* ── Brand ─────────────────────────────────────────────────────────────── */
    --paydot-brand-electric-blue: #2c43e6;
    --paydot-brand-electric-blue-strong: #1c31b8;
    --paydot-brand-electric-blue-soft: #e7eaff;
    --paydot-brand-electric-blue-on-dark: #8794ff;
    --paydot-brand-coral: #fd4631;
    --paydot-brand-coral-strong: #c5281b;
    --paydot-brand-coral-soft: #ffe5e1;

    /* ── Neutrals (warm — this is the differentiator, keep it) ─────────────── */
    --paydot-ink: #12131a;
    --paydot-ink-raised: #1a1b24;
    --paydot-ink-muted: #625b57;
    --paydot-divider: #e4ddd6;
    --paydot-neutral-soft: #f3eee9;
    --paydot-canvas: #fbf8f4;
    --paydot-white: #ffffff;

    /* ── Action ────────────────────────────────────────────────────────────── */
    --paydot-action-primary: var(--paydot-brand-electric-blue);
    --paydot-action-on-primary: var(--paydot-white);
    --paydot-action-primary-hover: var(--paydot-brand-electric-blue-strong);
    --paydot-action-primary-on-dark: var(--paydot-brand-electric-blue-on-dark);
    --paydot-action-on-primary-on-dark: var(--paydot-ink);
    /* The one place Coral is an action: a button on an Electric Blue surface. */
    --paydot-action-primary-on-brand: var(--paydot-brand-coral);
    --paydot-action-on-primary-on-brand: var(--paydot-ink);

    /* ── Focus — always blue, never coral ──────────────────────────────────── */
    --paydot-focus-on-light: var(--paydot-brand-electric-blue);
    --paydot-focus-on-dark: var(--paydot-brand-electric-blue-on-dark);
    --paydot-focus-ring-width: 3px;
    --paydot-focus-ring-offset: 3px;

    /* ── Feedback / status, light ──────────────────────────────────────────── */
    --paydot-success-surface: #c9f6d8;
    --paydot-success-content: #075d32;
    --paydot-success-accent: #0e8f4e;
    --paydot-warning-surface: #ffe8a3;
    --paydot-warning-content: #5e3a00;
    --paydot-warning-accent: #a66a00;
    --paydot-error-surface: #ffdad6;
    --paydot-error-content: #7a1220;
    --paydot-error-accent: #c0182b;
    --paydot-info-surface: #dce2ff;
    --paydot-info-content: #1b2a8f;
    --paydot-info-accent: #2c43e6;
    --paydot-neutral-surface: #f3eee9;
    --paydot-neutral-content: #4a443f;
    --paydot-neutral-accent: #625b57;

    /* ── Feedback / status, dark ───────────────────────────────────────────── */
    --paydot-success-surface-dark: #12482c;
    --paydot-success-content-dark: #a8e9c2;
    --paydot-success-accent-dark: #4fc98a;
    --paydot-warning-surface-dark: #4a3200;
    --paydot-warning-content-dark: #ffde94;
    --paydot-warning-accent-dark: #e0a32e;
    --paydot-error-surface-dark: #5c1219;
    --paydot-error-content-dark: #ffb9b3;
    --paydot-error-accent-dark: #ff6b6b;
    --paydot-info-surface-dark: #212c6b;
    --paydot-info-content-dark: #c3cbff;
    --paydot-info-accent-dark: #8794ff;
    --paydot-neutral-surface-dark: #2a2823;
    --paydot-neutral-content-dark: #d7d1ca;
    --paydot-neutral-accent-dark: #a9a19a;

    /* ── Typography ────────────────────────────────────────────────────────── */
    --paydot-font-product: "Satoshi", "Inter", system-ui, sans-serif;
    /* Only 400, 500 and 900 are registered faces. 700 resolves upward to Black. */
    --paydot-weight-regular: 400;
    --paydot-weight-medium: 500;
    --paydot-weight-black: 900;

    /* Marketing scale — paydot.eu and campaign surfaces only. */
    --paydot-display-1: clamp(3.6rem, 8vw, 7.5rem);
    --paydot-display-2: clamp(2.6rem, 5.2vw, 4.75rem);
    --paydot-display-3: clamp(2.1rem, 3.6vw, 3.1rem);
    --paydot-lead: clamp(1.15rem, 1.5vw, 1.4rem);
    --paydot-heading-1: 1.7rem;
    --paydot-heading-2: 1.35rem;
    --paydot-body-large: 1.15rem;
    --paydot-body: 1rem;
    --paydot-small: 0.875rem;
    --paydot-eyebrow: 0.78rem;

    /* ── Geometry ──────────────────────────────────────────────────────────── */
    --paydot-radius-chip: 8px;
    --paydot-radius-field: 12px;
    --paydot-radius-card: 16px;
    --paydot-radius-action: 16px;
    --paydot-radius-dialog: 20px;
    --paydot-radius-sheet: 24px;
    --paydot-radius-panel: 32px;
    --paydot-radius-full: 9999px;

    --paydot-space-3xs: 4px;
    --paydot-space-2xs: 8px;
    --paydot-space-xs: 12px;
    --paydot-space-sm: 16px;
    --paydot-space-md: 24px;
    --paydot-space-lg: 32px;
    --paydot-space-xl: 48px;
    --paydot-space-2xl: 64px;
    --paydot-space-3xl: 96px;
    --paydot-space-4xl: 128px;

    /* ── Motion ────────────────────────────────────────────────────────────── */
    --paydot-motion-feedback: 160ms;
    --paydot-motion-transition: 240ms;
    --paydot-motion-entrance: 700ms;
    --paydot-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* ── Brand geometry ────────────────────────────────────────────────────── */
    --paydot-wordmark-aspect: 3.58;
    --paydot-wordmark-min-width: 120px;
}