/* ============================================================================
 * premium-tokens.css — Panini Premium Design System (v2 migration)
 * ----------------------------------------------------------------------------
 * Single source of truth for the premium visual language exported from the
 * Lovable reference (premium-panini-ux). Namespace: --pp-* (premium-panini).
 *
 * This namespace NEVER collides with existing tokens:
 *   --ck-*    (checkout.html scoped)
 *   --co-*    (checkout legacy aliases)
 *   --brand-* (styles.css global)
 *
 * Pages opt-in progressively by mapping their own tokens onto --pp-* values,
 * one component at a time. Importing this file alone changes nothing visually.
 *
 * Colors are OKLCH (perceptual). Browser support: Chrome 111+, Firefox 113+,
 * Safari 15.4+. Hex equivalents are documented inline for reference only.
 * ========================================================================== */

:root {
  /* ── Brand ──────────────────────────────────────────────────────────── */
  --pp-yellow:        oklch(0.92 0.18 100);          /* ≈ #FFE600 brighter Panini yellow */
  --pp-yellow-ink:    oklch(0.18 0.02 260);          /* ≈ #1c1f2a text on yellow */
  --pp-yellow-ring:   color-mix(in oklab, var(--pp-yellow) 30%, transparent);
  --pp-red:           oklch(0.62 0.24 27);           /* ≈ #E30613 */

  /* ── Semantic state ─────────────────────────────────────────────────── */
  --pp-success:        oklch(0.62 0.16 150);         /* ≈ #1faa5a green */
  --pp-success-soft:   oklch(0.96 0.04 150);         /* soft green surface */
  --pp-success-ink:    oklch(0.5 0.16 150);          /* darker green for text */
  --pp-success-ring:   color-mix(in oklab, var(--pp-success) 18%, transparent);
  --pp-success-surface:        #00a6501a;            /* ML-style translucent */
  --pp-success-surface-strong: #bfffdd;
  --pp-success-border:         color-mix(in oklab, #00a650 40%, transparent);

  --pp-warn-soft:      oklch(0.97 0.05 95);          /* soft amber surface */
  --pp-warn-ink:       oklch(0.57 0.09 101.64);      /* amber text */

  --pp-destructive:    oklch(0.6 0.22 27);           /* ≈ #d92d20 error */
  --pp-destructive-ink: oklch(0.99 0 0);

  /* ── Neutrals / surfaces ────────────────────────────────────────────── */
  --pp-background:     oklch(0.972 0.003 247);       /* ≈ #f6f7f9 page bg */
  --pp-foreground:     oklch(0.18 0.02 260);         /* ≈ #1c1f2a primary text */
  --pp-card:           oklch(1 0 0);                 /* #ffffff surfaces */
  --pp-card-foreground: oklch(0.18 0.02 260);
  --pp-muted:          oklch(0.965 0.004 250);       /* muted surface */
  --pp-muted-foreground: oklch(0.5 0.015 260);       /* ≈ #6b7280 secondary text */
  --pp-accent:         oklch(0.96 0.005 250);
  --pp-border:         oklch(0.92 0.005 250);        /* ≈ #e5e7eb hairline */
  --pp-input:          oklch(0.92 0.005 250);
  --pp-ring:           oklch(0.78 0.15 95);          /* focus ring (warm) */

  /* ── Radius scale ──── base 1.125rem (18px) ─────────────────────────── */
  --pp-radius:     1.125rem;                          /* 18px */
  --pp-radius-sm:  calc(var(--pp-radius) - 4px);      /* 14px */
  --pp-radius-md:  calc(var(--pp-radius) - 2px);      /* 16px */
  --pp-radius-lg:  var(--pp-radius);                  /* 18px */
  --pp-radius-xl:  calc(var(--pp-radius) + 4px);      /* 22px */
  --pp-radius-2xl: calc(var(--pp-radius) + 8px);      /* 26px */
  --pp-radius-3xl: calc(var(--pp-radius) + 12px);     /* 30px */
  --pp-radius-full: 999px;

  /* ── Shadows ────────────────────────────────────────────────────────── */
  --pp-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04);
  --pp-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.08);
  --pp-shadow-focus: 0 0 0 4px var(--pp-yellow-ring);

  /* ── Typography ─────────────────────────────────────────────────────── */
  --pp-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
                  BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pp-font-feature: "cv11", "ss01", "ss03";

  /* ── Motion ──── premium easing + durations ─────────────────────────── */
  --pp-ease:        cubic-bezier(0.16, 1, 0.3, 1);   /* smooth ease-out */
  --pp-ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --pp-dur-fast:    160ms;
  --pp-dur-base:    220ms;
  --pp-dur-slow:    320ms;
}

/* ── Shared premium keyframes (consumed by stepper, timeline, etc.) ───── */
@keyframes pp-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pp-step-in {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pp-pulse-ring {
  0%   { transform: scale(0.7); opacity: 0.6; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes pp-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}