/* ==========================================================================
   Klashify Account: design tokens, shared by the login/register cards and My account.
   Change a value here and every card follows. Contrast is checked against white (WCAG AA).
   ========================================================================== */
.kl-auth-bg, .kl-acc-bg{
	/* colours: B "Pearl" (values come from site.css tokens) */
	--kl-ink:var(--k-ink,#14171a);              /* primary: buttons, headings, focus ring */
	--kl-text:var(--k-ink,#14171a);          /* body text            17.4:1 */
	--kl-muted:var(--k-mute,#566066);         /* small grey text       7.0:1 */
	--kl-surface:#fff;          /* cards */
	--kl-backdrop:var(--k-pearl,#e9ebee);      /* grey area around the cards */
	--kl-tint:rgba(20,23,26,.05);          /* soft fill: hover, active menu item, info boxes */
	--kl-field-bg:#fff;      /* input fill */
	--kl-field-border:rgba(20,23,26,.3);  /* input edge            3.2:1 (UI parts need 3:1) */
	--kl-divider:rgba(20,23,26,.1);       /* thin lines, decorative only */
	/* status colours (always shown together with text, never alone) */
	--kl-error:#b42318;         /* error text and edge   6.6:1 */
	--kl-error-bg:#fef3f2;
	--kl-success:#067647;       /* success edge          5.7:1 */
	--kl-success-bg:#ecfdf3;
	--kl-ok-text:#14633a;       /* "Completed" badge, same as booking "Confirmed" */
	--kl-ok-bg:#e3f6ea;
	--kl-wait-text:#7a5200;     /* "Processing / On hold" badge, same as booking "Pending" */
	--kl-wait-bg:#fff4d6;
	/* shape */
	--kl-radius-control:12px;    /* inputs, buttons, messages */
	--kl-radius-card:28px;      /* cards, boxes */
	--kl-radius-pill:999px;     /* badges, menu chips on phones */
	--kl-shadow-card:var(--k-shadow-card,0 24px 50px -34px rgba(20,23,26,.35));
	/* motion: same timings as the booking system (klashify-booking public.css) */
	--kl-dur-press:150ms;       /* button press / lift */
	--kl-dur-state:200ms;       /* colour, border, shadow changes */
	--kl-dur-msg:240ms;         /* messages arriving */
	--kl-dur-enter:340ms;       /* card arriving */
	--kl-ease-out:var(--k-ease,cubic-bezier(.32,.72,0,1));
	--kl-shadow-lift:var(--k-shadow-lift,0 10px 22px -12px rgba(20,23,26,.6));          /* black button on hover */
	--kl-shadow-lift-soft:0 4px 12px rgba(17,24,39,.08);  /* white button / box on hover */
}