/**
 * Wikyprice Design Tokens — Sistema canonico Indigo/Purple + Poppins
 * Fonte di verità per colori, tipografia, spaziatura, ombre e border radius.
 * Importato come primo foglio di stile in base.html.
 */

:root {
  /* ─── Palette primaria: Indigo / Purple ─────────────────────────── */
  --wp-primary:       #4f46e5;   /* indigo-600 */
  --wp-primary-dark:  #4338ca;   /* indigo-700 */
  --wp-primary-hover: #3730a3;   /* indigo-800 */
  --wp-primary-light: #eef2ff;   /* indigo-50  */
  --wp-primary-mid:   #c7d2fe;   /* indigo-200 */
  --wp-secondary:     #7c3aed;   /* purple-700 */
  --wp-secondary-dark:#6d28d9;   /* purple-800 */

  /* Gradiente brand primario */
  --wp-gradient:      linear-gradient(to right, #4f46e5, #7c3aed);
  --wp-gradient-hero: linear-gradient(135deg, #3730a3 0%, #4f46e5 50%, #7c3aed 100%);

  /* ─── Colori semantici ───────────────────────────────────────────── */
  --wp-success:       #16a34a;  /* green-600  */
  --wp-success-dark:  #15803d;  /* green-700  */
  --wp-success-bg:    #f0fdf4;  /* green-50   */
  --wp-success-border:#22c55e;  /* green-500  */

  --wp-warning:       #d97706;  /* amber-600  */
  --wp-warning-dark:  #b45309;  /* amber-700  */
  --wp-warning-bg:    #fefce8;  /* yellow-50  */
  --wp-warning-border:#eab308;  /* yellow-500 */

  --wp-danger:        #dc2626;  /* red-600    */
  --wp-danger-dark:   #b91c1c;  /* red-700    */
  --wp-danger-bg:     #fef2f2;  /* red-50     */
  --wp-danger-border: #ef4444;  /* red-500    */

  --wp-info:          #2563eb;  /* blue-600   */
  --wp-info-dark:     #1d4ed8;  /* blue-700   */
  --wp-info-bg:       #eff6ff;  /* blue-50    */
  --wp-info-border:   #3b82f6;  /* blue-500   */

  /* ─── Superfici e testo ──────────────────────────────────────────── */
  --wp-bg:            #f8fafc;  /* slate-50   */
  --wp-surface:       #ffffff;
  --wp-surface-muted: #f1f5f9;  /* slate-100  */
  --wp-border:        #e2e8f0;  /* slate-200  */
  --wp-border-dark:   #cbd5e1;  /* slate-300  */
  --wp-text:          #1e293b;  /* slate-800  */
  --wp-text-muted:    #64748b;  /* slate-500  */
  --wp-text-light:    #94a3b8;  /* slate-400  */

  /* ─── Hero / header ─────────────────────────────────────────────── */
  --wp-hero-bg:       var(--wp-gradient);
  --wp-hero-text:     #f8fafc;
  --wp-hero-text-sub: rgba(199, 210, 254, 0.9); /* indigo-200/90 */

  /* ─── Tipografia ─────────────────────────────────────────────────── */
  --wp-font:          'Poppins', system-ui, sans-serif;
  --wp-font-size-xs:  0.75rem;    /* 12px */
  --wp-font-size-sm:  0.875rem;   /* 14px */
  --wp-font-size-base:1rem;       /* 16px */
  --wp-font-size-lg:  1.125rem;   /* 18px */
  --wp-font-size-xl:  1.25rem;    /* 20px */
  --wp-font-size-2xl: 1.5rem;     /* 24px */
  --wp-font-size-3xl: 1.875rem;   /* 30px */
  --wp-font-size-4xl: 2.25rem;    /* 36px */

  /* ─── Spaziatura (4-point grid) ─────────────────────────────────── */
  --wp-space-1:  0.25rem;   /*  4px */
  --wp-space-2:  0.5rem;    /*  8px */
  --wp-space-3:  0.75rem;   /* 12px */
  --wp-space-4:  1rem;      /* 16px */
  --wp-space-5:  1.25rem;   /* 20px */
  --wp-space-6:  1.5rem;    /* 24px */
  --wp-space-8:  2rem;      /* 32px */
  --wp-space-10: 2.5rem;    /* 40px */
  --wp-space-12: 3rem;      /* 48px */

  /* ─── Ombre (tinte indigo per coerenza brand) ────────────────────── */
  --wp-shadow-sm: 0 1px 3px rgba(79, 70, 229, 0.08), 0 1px 2px rgba(79, 70, 229, 0.04);
  --wp-shadow-md: 0 4px 6px -1px rgba(79, 70, 229, 0.08), 0 2px 4px -2px rgba(79, 70, 229, 0.04);
  --wp-shadow-lg: 0 10px 15px -3px rgba(79, 70, 229, 0.10), 0 4px 6px -4px rgba(79, 70, 229, 0.05);
  --wp-shadow-xl: 0 20px 25px -5px rgba(79, 70, 229, 0.12), 0 8px 10px -6px rgba(79, 70, 229, 0.06);

  /* ─── Border radius ──────────────────────────────────────────────── */
  --wp-radius-sm:   0.5rem;    /* 8px  — rounded-lg  */
  --wp-radius-md:   0.75rem;   /* 12px — rounded-xl  */
  --wp-radius-lg:   1rem;      /* 16px — rounded-2xl */
  --wp-radius-full: 9999px;

  /* ─── Transizioni ────────────────────────────────────────────────── */
  --wp-ease:     cubic-bezier(0.33, 1, 0.68, 1);
  --wp-duration: 0.25s;
}

/* ─────────────────────────────────────────────────────────────────────
   COMPONENTI GLOBALI
   ───────────────────────────────────────────────────────────────────── */

/* ── Pulsante primario brand ───────────────────────────────────────── */
.wp-btn-primary {
  background: var(--wp-gradient);
  color: #fff;
  font-family: var(--wp-font);
  font-weight: 600;
  border-radius: var(--wp-radius-sm);
  padding: 0.625rem 1.5rem;
  transition:
    transform var(--wp-duration) var(--wp-ease),
    box-shadow var(--wp-duration) var(--wp-ease),
    filter var(--wp-duration);
}
.wp-btn-primary:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: var(--wp-shadow-lg);
}

/* ── Input focus ring primario ─────────────────────────────────────── */
.wp-input:focus {
  outline: none;
  border-color: var(--wp-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

/* ── Card hover lift ───────────────────────────────────────────────── */
.wp-card-hover {
  transition:
    transform var(--wp-duration) var(--wp-ease),
    box-shadow var(--wp-duration) var(--wp-ease);
}
.wp-card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--wp-shadow-xl);
}

/* ── Staggered reveal ──────────────────────────────────────────────── */
.wp-reveal {
  opacity: 0;
  animation: wp-fade-up 0.55s var(--wp-ease) forwards;
}
.wp-reveal-1 { animation-delay: 0.05s; }
.wp-reveal-2 { animation-delay: 0.12s; }
.wp-reveal-3 { animation-delay: 0.20s; }
.wp-reveal-4 { animation-delay: 0.28s; }
.wp-reveal-5 { animation-delay: 0.36s; }

@keyframes wp-fade-up {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero grain overlay ────────────────────────────────────────────── */
.wp-hero-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* ─────────────────────────────────────────────────────────────────────
   TIPOGRAFIA SCALE
   ───────────────────────────────────────────────────────────────────── */

/* Heading scale coerente */
.wp-h1 { font-size: var(--wp-font-size-2xl); font-weight: 700; color: var(--wp-text); }
.wp-h2 { font-size: var(--wp-font-size-xl);  font-weight: 700; color: var(--wp-text); }
.wp-h3 { font-size: var(--wp-font-size-lg);  font-weight: 600; color: var(--wp-text); }
.wp-body      { font-size: var(--wp-font-size-base); color: var(--wp-text);       }
.wp-body-sm   { font-size: var(--wp-font-size-sm);   color: var(--wp-text-muted); }
.wp-caption   { font-size: var(--wp-font-size-xs);   color: var(--wp-text-light); }

@media (min-width: 640px) {
  .wp-h1 { font-size: var(--wp-font-size-3xl); }
  .wp-h2 { font-size: var(--wp-font-size-2xl); }
  .wp-h3 { font-size: var(--wp-font-size-xl);  }
}
@media (min-width: 1024px) {
  .wp-h1 { font-size: var(--wp-font-size-4xl); }
}

/* ─────────────────────────────────────────────────────────────────────
   NAVBAR HEADER (sticky, non dipende da Tailwind per il gradiente)
   ───────────────────────────────────────────────────────────────────── */

.wp-navbar {
  background: linear-gradient(to right, #4f46e5, #9333ea) !important;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.25), 0 2px 4px -2px rgba(79, 70, 229, 0.15);
}

/* ─────────────────────────────────────────────────────────────────────
   HERO / HEADER STRIP
   ───────────────────────────────────────────────────────────────────── */

.hero-header-strip {
  background: var(--wp-gradient);
  color: var(--wp-hero-text);
}
.hero-header-strip .hero-subtitle {
  color: var(--wp-hero-text-sub);
}

/* ─────────────────────────────────────────────────────────────────────
   FORM STRIPS (header di modal e sezioni di form)
   ───────────────────────────────────────────────────────────────────── */

.form-strip         { background: linear-gradient(to right, #4f46e5, #7c3aed); color: #fff; }
.form-strip-green   { background: linear-gradient(to right, #16a34a, #059669); color: #fff; }
.form-strip-blue    { background: linear-gradient(to right, #2563eb, #4f46e5); color: #fff; }
.form-strip-amber   { background: linear-gradient(to right, #d97706, #ea580c); color: #fff; }
.form-strip-teal    { background: linear-gradient(to right, #0d9488, #0891b2); color: #fff; }
.form-strip-red     { background: linear-gradient(to right, #dc2626, #ea580c); color: #fff; }
.form-strip-purple  { background: linear-gradient(to right, #7c3aed, #6d28d9); color: #fff; }
.form-strip-sky     { background: linear-gradient(to right, #0284c7, #4f46e5); color: #fff; }

/* ─────────────────────────────────────────────────────────────────────
   PULSANTI FORM (gradiente, hover brightness)
   ───────────────────────────────────────────────────────────────────── */

.form-btn           { background: linear-gradient(to right, #4f46e5, #7c3aed); color: #fff; font-weight: 600; border-radius: var(--wp-radius-sm); transition: filter var(--wp-duration), transform var(--wp-duration) var(--wp-ease); }
.form-btn:hover         { filter: brightness(1.08); transform: translateY(-1px); }
.form-btn-green     { background: linear-gradient(to right, #16a34a, #059669); color: #fff; font-weight: 600; border-radius: var(--wp-radius-sm); transition: filter var(--wp-duration), transform var(--wp-duration) var(--wp-ease); }
.form-btn-green:hover   { filter: brightness(1.08); transform: translateY(-1px); }
.form-btn-amber     { background: linear-gradient(to right, #d97706, #ea580c); color: #fff; font-weight: 600; border-radius: var(--wp-radius-sm); transition: filter var(--wp-duration), transform var(--wp-duration) var(--wp-ease); }
.form-btn-amber:hover   { filter: brightness(1.08); transform: translateY(-1px); }
.form-btn-teal      { background: linear-gradient(to right, #0d9488, #0891b2); color: #fff; font-weight: 600; border-radius: var(--wp-radius-sm); transition: filter var(--wp-duration), transform var(--wp-duration) var(--wp-ease); }
.form-btn-teal:hover    { filter: brightness(1.08); transform: translateY(-1px); }
.form-btn-red       { background: linear-gradient(to right, #dc2626, #ea580c); color: #fff; font-weight: 600; border-radius: var(--wp-radius-sm); transition: filter var(--wp-duration), transform var(--wp-duration) var(--wp-ease); }
.form-btn-red:hover     { filter: brightness(1.08); transform: translateY(-1px); }
.form-btn-purple    { background: linear-gradient(to right, #7c3aed, #6d28d9); color: #fff; font-weight: 600; border-radius: var(--wp-radius-sm); transition: filter var(--wp-duration), transform var(--wp-duration) var(--wp-ease); }
.form-btn-purple:hover  { filter: brightness(1.08); transform: translateY(-1px); }
.form-btn-sky       { background: linear-gradient(to right, #0284c7, #4f46e5); color: #fff; font-weight: 600; border-radius: var(--wp-radius-sm); transition: filter var(--wp-duration), transform var(--wp-duration) var(--wp-ease); }
.form-btn-sky:hover     { filter: brightness(1.08); transform: translateY(-1px); }

/* ─────────────────────────────────────────────────────────────────────
   SFONDI PAGINA (per form e auth pages)
   ───────────────────────────────────────────────────────────────────── */

.form-page-bg        { background: linear-gradient(to bottom right, #eff6ff, #eef2ff, #faf5ff); }
.form-page-bg-green  { background: linear-gradient(to bottom right, #f0fdf4, #ecfdf5, #ccfbf1); }
.form-page-bg-amber  { background: linear-gradient(to bottom right, #fffbeb, #fef3c7, #ffedd5); }
.form-page-bg-red    { background: linear-gradient(to bottom right, #fef2f2, #fff1f2, #fff7ed); }
.form-page-bg-indigo { background: linear-gradient(to bottom right, #eef2ff, #f5f3ff, #fce7f3); }
.form-page-bg-purple { background: linear-gradient(to bottom right, #faf5ff, #f5f3ff, #ede9fe); }
.form-page-bg-teal   { background: linear-gradient(to bottom right, #f0fdfa, #ecfeff, #eff6ff); }
.form-page-bg-sky    { background: linear-gradient(to bottom right, #f0f9ff, #eff6ff, #eef2ff); }

/* ─────────────────────────────────────────────────────────────────────
   ALERT BOX (sfondo + bordo sinistro)
   ───────────────────────────────────────────────────────────────────── */

.alert-box       { border-left-width: 4px; border-radius: var(--wp-radius-md); }
.alert-bg-red    { background: linear-gradient(to right, var(--wp-danger-bg),  #fff1f2); border-left-color: var(--wp-danger-border);  }
.alert-bg-blue   { background: linear-gradient(to right, var(--wp-info-bg),    #eef2ff); border-left-color: var(--wp-info-border);    }
.alert-bg-yellow { background: linear-gradient(to right, var(--wp-warning-bg), #fff7ed); border-left-color: var(--wp-warning-border); }
.alert-bg-green  { background: linear-gradient(to right, var(--wp-success-bg), #ecfdf5); border-left-color: var(--wp-success-border); }

.success-box-bg  { background: linear-gradient(to right, var(--wp-success-bg), #ecfdf5); border-left: 4px solid var(--wp-success-border); border-radius: var(--wp-radius-md); }
.info-box-bg     { background: linear-gradient(to right, var(--wp-info-bg),    #eef2ff); border-left: 4px solid var(--wp-info-border);    border-radius: var(--wp-radius-md); }

/* ─────────────────────────────────────────────────────────────────────
   ACTION CARD ICON BOXES
   ───────────────────────────────────────────────────────────────────── */

.action-icon        { background: linear-gradient(to bottom right, #6366f1, #4f46e5); border-radius: var(--wp-radius-sm); }
.action-icon-blue   { background: linear-gradient(to bottom right, #3b82f6, #2563eb); border-radius: var(--wp-radius-sm); }
.action-icon-green  { background: linear-gradient(to bottom right, #22c55e, #16a34a); border-radius: var(--wp-radius-sm); }
.action-icon-purple { background: linear-gradient(to bottom right, #a855f7, #7c3aed); border-radius: var(--wp-radius-sm); }
.action-icon-amber  { background: linear-gradient(to bottom right, #f59e0b, #d97706); border-radius: var(--wp-radius-sm); }
.action-icon-red    { background: linear-gradient(to bottom right, #f87171, #dc2626); border-radius: var(--wp-radius-sm); }

/* ─────────────────────────────────────────────────────────────────────
   SKIP LINK (accessibilità)
   ───────────────────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: var(--wp-surface);
  color: var(--wp-text);
  font-weight: 600;
  border-radius: var(--wp-radius-sm);
  box-shadow: var(--wp-shadow-lg);
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  outline: 2px solid var(--wp-primary);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
   TOUCH TARGET (accessibilità mobile, min 44px)
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .touch-target-min { min-height: 44px; min-width: 44px; }
}

/* ─────────────────────────────────────────────────────────────────────
   SAFE AREA (iPhone X+ notch)
   ───────────────────────────────────────────────────────────────────── */

@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}