/*
 * Krepling Pay checkout design tokens.
 *
 * Values follow the Krepling Pay checkout design handoff (brand violet #8e00e9,
 * cool neutrals, soft layered elevation). The brand/surface/text/input colors
 * are also emitted inline per render from the merchant's gateway settings
 * (see inc/legacy-checkout/templates/payment-shell.php) — those inline values
 * override the defaults below, so merchant branding is always honored.
 */
.kp-legacy-checkout {
  /* Brand (Krepling violet) */
  --kp-button-color: #8e00e9;
  --kp-brand-press: oklch(0.42 0.24 305);
  --kp-brand-tint: oklch(0.96 0.04 305);
  --kp-brand-tint-2: oklch(0.92 0.07 305);
  --kp-on-brand: #ffffff;

  /* Neutrals (cool, hue 285) */
  --kp-text-color: #161616;
  --kp-ink: oklch(0.18 0.01 285);
  --kp-ink-2: oklch(0.36 0.01 285);
  --kp-muted-color: oklch(0.55 0.012 285);
  --kp-hair: oklch(0.92 0.006 285);
  --kp-hair-2: oklch(0.96 0.006 285);
  --kp-surface-color: #ffffff;
  --kp-surface-2: oklch(0.985 0.005 285);
  --kp-app-bg: oklch(0.97 0.005 285);
  --kp-input-color: #ffffff;
  --kp-field-bg: #ffffff;
  --kp-border-color: oklch(0.92 0.006 285);

  /* Status */
  --kp-success-color: oklch(0.5 0.13 155);
  --kp-good: oklch(0.62 0.15 155);
  --kp-good-tint: oklch(0.96 0.04 155);
  --kp-error-color: oklch(0.55 0.21 25);
  --kp-warn: oklch(0.58 0.21 25);
  --kp-warn-tint: oklch(0.96 0.04 25);

  /* Card brands */
  --kp-visa: #1a1f71;
  --kp-mc: #b4471f;
  --kp-amex: #1c6ea4;

  /* Radii */
  --kp-radius-xl: 22px;
  --kp-radius-card: 22px;
  --kp-radius-lg: 16px;
  --kp-radius-control: 14px;
  --kp-radius-md: 12px;
  --kp-radius-sm: 9px;
  --kp-radius-pill: 999px;

  /* Elevation — soft, layered shadows */
  --kp-sh-1: 0 1px 2px 0 oklch(0.2 0.02 285 / 0.04);
  --kp-sh-2: 0 1px 2px 0 oklch(0.2 0.02 285 / 0.04), 0 8px 24px -8px oklch(0.2 0.02 285 / 0.1);
  --kp-sh-3: 0 1px 2px 0 oklch(0.2 0.02 285 / 0.06), 0 16px 48px -12px oklch(0.2 0.02 285 / 0.18);
  --kp-shadow-soft: var(--kp-sh-2);

  /* "Physical" button/field treatment */
  --kp-raise: 0 1px 1px rgba(20, 19, 29, 0.05), 0 3px 6px rgba(20, 19, 29, 0.08), 0 8px 18px -6px rgba(20, 19, 29, 0.16);
  --kp-raise-sm: 0 1px 1px rgba(20, 19, 29, 0.04), 0 2px 6px -2px rgba(20, 19, 29, 0.1);
  --kp-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --kp-bevel-on: inset 0 1.5px 0 rgba(255, 255, 255, 0.4);
  --kp-ring: 0 0 0 3px var(--kp-brand-tint-2);

  /* Spacing scale */
  --kp-space-1: 0.25rem;
  --kp-space-2: 0.5rem;
  --kp-space-3: 0.75rem;
  --kp-space-4: 1rem;
  --kp-space-5: 1.25rem;
  --kp-space-6: 1.5rem;
  --kp-space-8: 2rem;
  --kp-space-10: 2.5rem;
}