/* ============================================================
   WooPilot AI · Design Tokens
   v0.1 — Marlin · Bolla mark · petrol+coral · Manrope

   Carica Manrope dai Google Fonts:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet"
     href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap">
   ============================================================ */

:root {
  /* ── COLORS ─────────────────────────────────────────────── */

  /* Ink (testo principale) */
  --wp-ink:           #0E1A1D;
  --wp-ink-2:         #5C6A6E;   /* testo secondario / muted */
  --wp-ink-3:         #8A969A;   /* testo placeholder / disabled */

  /* Brand primario — petrol */
  --wp-primary:        #0E3B43;
  --wp-primary-hover:  #0B2F36;
  --wp-primary-soft:   #E5EFEE;  /* 8% — sfondi, badge, hover */
  --wp-primary-tint:   #C8DAD9;  /* 22% — divider attivi */
  --wp-on-primary:     #FFFFFF;  /* testo su primary */

  /* Brand accento — coral */
  --wp-accent:         #E8845D;
  --wp-accent-hover:   #D77149;
  --wp-accent-soft:    #FCEDE3;
  --wp-on-accent:      #0E1A1D;

  /* Superfici */
  --wp-surface:        #F7F3EC;  /* cream — sfondo pagina */
  --wp-surface-alt:    #FFFFFF;  /* card */
  --wp-surface-2:      #EFEAE0;  /* zone neutre */
  --wp-surface-dark:   #0E1A1D;  /* dark mode hero / footer */

  /* Bordi */
  --wp-hairline:       rgba(14, 26, 29, 0.10);
  --wp-hairline-2:     rgba(14, 26, 29, 0.18);
  --wp-focus-ring:     rgba(14, 59, 67, 0.35);

  /* Stati */
  --wp-success:        #1F8A5B;
  --wp-success-soft:   #E1F2EA;
  --wp-warning:        #D9A441;
  --wp-warning-soft:   #FBF0D7;
  --wp-danger:         #C44536;
  --wp-danger-soft:    #FBE6E2;
  --wp-info:           #2A6FBA;
  --wp-info-soft:      #E5EEF8;

  /* ── TYPOGRAPHY ─────────────────────────────────────────── */

  --wp-font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  system-ui, sans-serif;
  --wp-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo,
                  Consolas, monospace;

  /* Pesi */
  --wp-fw-regular:  400;
  --wp-fw-medium:   500;
  --wp-fw-semibold: 600;
  --wp-fw-bold:     700;
  --wp-fw-black:    800;

  /* Scala (px / line-height) */
  --wp-fs-display-l: 64px; --wp-lh-display-l: 1.02;
  --wp-fs-display-m: 48px; --wp-lh-display-m: 1.05;
  --wp-fs-display-s: 36px; --wp-lh-display-s: 1.1;
  --wp-fs-h1:        28px; --wp-lh-h1:        1.2;
  --wp-fs-h2:        22px; --wp-lh-h2:        1.25;
  --wp-fs-h3:        18px; --wp-lh-h3:        1.3;
  --wp-fs-body-l:    16px; --wp-lh-body-l:    1.55;
  --wp-fs-body:      14px; --wp-lh-body:      1.5;
  --wp-fs-body-s:    13px; --wp-lh-body-s:    1.5;
  --wp-fs-caption:   12px; --wp-lh-caption:   1.4;
  --wp-fs-micro:     11px; --wp-lh-micro:     1.3;

  /* Tracking */
  --wp-tr-tight:    -0.025em;  /* display */
  --wp-tr-snug:     -0.015em;  /* h1/h2 */
  --wp-tr-normal:    0;
  --wp-tr-loose:     0.04em;
  --wp-tr-mono:      0.10em;   /* eyebrows, micro-labels uppercase */

  /* ── SPACING (4px base) ─────────────────────────────────── */
  --wp-s-1:  4px;
  --wp-s-2:  8px;
  --wp-s-3:  12px;
  --wp-s-4:  16px;
  --wp-s-5:  20px;
  --wp-s-6:  24px;
  --wp-s-8:  32px;
  --wp-s-10: 40px;
  --wp-s-12: 48px;
  --wp-s-14: 56px;
  --wp-s-16: 64px;
  --wp-s-20: 80px;
  --wp-s-24: 96px;

  /* ── RADII ──────────────────────────────────────────────── */
  --wp-r-xs:  6px;   /* tag, badge */
  --wp-r-sm:  10px;  /* input, bottoni */
  --wp-r-md:  14px;  /* card piccole */
  --wp-r-lg:  20px;  /* card grandi, modal */
  --wp-r-xl:  28px;  /* hero panels */
  --wp-r-pill: 999px;

  /* ── SHADOWS (navy-tinted, mai grigie) ──────────────────── */
  --wp-shadow-xs: 0 1px 2px rgba(14, 26, 29, 0.06);
  --wp-shadow-sm: 0 1px 0 rgba(14, 26, 29, 0.04),
                  0 2px 6px rgba(14, 26, 29, 0.06);
  --wp-shadow-md: 0 4px 12px rgba(14, 26, 29, 0.08),
                  0 1px 0 rgba(14, 26, 29, 0.04);
  --wp-shadow-lg: 0 12px 32px rgba(14, 26, 29, 0.12);
  --wp-shadow-xl: 0 24px 48px rgba(14, 26, 29, 0.16);
  --wp-shadow-pop: 0 8px 24px rgba(232, 132, 93, 0.30); /* CTA primario */

  /* ── MOTION ─────────────────────────────────────────────── */
  --wp-ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --wp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wp-d-fast:      120ms;
  --wp-d-base:      200ms;
  --wp-d-slow:      320ms;

  /* ── Z-INDEX ────────────────────────────────────────────── */
  --wp-z-base:    1;
  --wp-z-sticky:  100;
  --wp-z-overlay: 500;
  --wp-z-modal:   1000;
  --wp-z-toast:   2000;

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --wp-content-max:  1240px;
  --wp-gutter:       24px;
  --wp-sidebar:      256px;
}

/* ── Dark mode ──────────────────────────────────────────────── */
[data-theme="dark"] {
  --wp-ink:          #F0EDE6;
  --wp-ink-2:        #A8B0B2;
  --wp-ink-3:        #6F7A7D;
  --wp-primary:      #4FB3BF;     /* petrol diventa più chiaro */
  --wp-primary-hover:#6BC2CC;
  --wp-primary-soft: rgba(79, 179, 191, 0.14);
  --wp-on-primary:   #0E1A1D;
  --wp-accent:       #F2A07A;
  --wp-accent-soft:  rgba(242, 160, 122, 0.14);
  --wp-surface:      #0E1A1D;
  --wp-surface-alt:  #15252A;
  --wp-surface-2:    #1C2F36;
  --wp-hairline:     rgba(240, 237, 230, 0.10);
  --wp-hairline-2:   rgba(240, 237, 230, 0.20);
  --wp-shadow-sm:    0 1px 0 rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  --wp-shadow-md:    0 4px 16px rgba(0, 0, 0, 0.4);
  --wp-shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   BASE / RESET (opzionale: utile come starting point)
   ============================================================ */

html, body {
  margin: 0;
  background: var(--wp-surface);
  color: var(--wp-ink);
  font-family: var(--wp-font-sans);
  font-weight: var(--wp-fw-medium);
  font-size: var(--wp-fs-body);
  line-height: var(--wp-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }

::selection { background: var(--wp-accent-soft); color: var(--wp-ink); }

a { color: var(--wp-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--wp-focus-ring);
  outline-offset: 2px;
  border-radius: var(--wp-r-xs);
}

/* ============================================================
   COMPONENTI BASE — pronti da copiare nel backoffice
   ============================================================ */

/* ---- Buttons ---- */
.wp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp-s-2);
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--wp-r-sm);
  background: var(--wp-primary);
  color: var(--wp-on-primary);
  font: inherit;
  font-weight: var(--wp-fw-semibold);
  font-size: var(--wp-fs-body);
  cursor: pointer;
  transition: background var(--wp-d-fast) var(--wp-ease-out),
              transform var(--wp-d-fast) var(--wp-ease-spring),
              box-shadow var(--wp-d-base) var(--wp-ease-out);
}
.wp-btn:hover  { background: var(--wp-primary-hover); }
.wp-btn:active { transform: scale(0.97); }

.wp-btn--accent {
  background: var(--wp-accent);
  color: var(--wp-on-accent);
  box-shadow: var(--wp-shadow-pop);
}
.wp-btn--accent:hover { background: var(--wp-accent-hover); }

.wp-btn--ghost {
  background: transparent;
  color: var(--wp-ink);
  border: 1px solid var(--wp-hairline);
}
.wp-btn--ghost:hover { background: var(--wp-primary-soft); border-color: var(--wp-hairline-2); }

.wp-btn--sm { height: 30px; padding: 0 12px; font-size: var(--wp-fs-body-s); }
.wp-btn--danger {
  background: var(--wp-danger);
  color: #fff;
}
.wp-btn--danger:hover { background: var(--wp-danger); opacity: .85; }
.wp-btn--ghost--danger {
  background: transparent;
  color: var(--wp-danger);
  border: 1px solid var(--wp-danger);
}
.wp-btn--ghost--danger:hover { background: var(--wp-danger-soft); }

.wp-btn--lg { height: 46px; padding: 0 22px; font-size: var(--wp-fs-body-l); }

/* ---- Card ---- */
.wp-card {
  background: var(--wp-surface-alt);
  border-radius: var(--wp-r-lg);
  padding: var(--wp-s-6);
  box-shadow: var(--wp-shadow-sm);
  transition: transform var(--wp-d-base) var(--wp-ease-out),
              box-shadow var(--wp-d-base) var(--wp-ease-out);
}
.wp-card:hover { transform: translateY(-2px); box-shadow: var(--wp-shadow-md); }

/* ---- Input ---- */
.wp-input {
  display: block;
  width: 100%;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--wp-hairline);
  border-radius: var(--wp-r-sm);
  background: var(--wp-surface-alt);
  color: var(--wp-ink);
  font: inherit;
  transition: border-color var(--wp-d-fast),
              box-shadow var(--wp-d-fast);
}
.wp-input::placeholder { color: var(--wp-ink-3); }
.wp-input:focus {
  outline: none;
  border-color: var(--wp-primary);
  box-shadow: 0 0 0 3px var(--wp-focus-ring);
}

/* ---- Badge ---- */
.wp-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--wp-r-pill);
  font-size: var(--wp-fs-micro);
  font-weight: var(--wp-fw-bold);
  letter-spacing: 0.02em;
  background: var(--wp-primary-soft);
  color: var(--wp-primary);
}
.wp-badge--accent  { background: var(--wp-accent-soft);  color: var(--wp-accent); }
.wp-badge--success { background: var(--wp-success-soft); color: var(--wp-success); }
.wp-badge--warn    { background: var(--wp-warning-soft); color: var(--wp-warning); }
.wp-badge--danger  { background: var(--wp-danger-soft);  color: var(--wp-danger); }

/* ---- Eyebrow / micro-label ---- */
.wp-eyebrow {
  font-size: var(--wp-fs-micro);
  font-weight: var(--wp-fw-bold);
  letter-spacing: var(--wp-tr-mono);
  text-transform: uppercase;
  color: var(--wp-ink-2);
}

/* ---- Display headlines ---- */
.wp-display-l { font-size: var(--wp-fs-display-l); line-height: var(--wp-lh-display-l); letter-spacing: var(--wp-tr-tight); font-weight: var(--wp-fw-black); }
.wp-display-m { font-size: var(--wp-fs-display-m); line-height: var(--wp-lh-display-m); letter-spacing: var(--wp-tr-tight); font-weight: var(--wp-fw-bold); }
.wp-h1 { font-size: var(--wp-fs-h1); line-height: var(--wp-lh-h1); letter-spacing: var(--wp-tr-snug); font-weight: var(--wp-fw-bold); }
.wp-h2 { font-size: var(--wp-fs-h2); line-height: var(--wp-lh-h2); letter-spacing: var(--wp-tr-snug); font-weight: var(--wp-fw-bold); }
.wp-h3 { font-size: var(--wp-fs-h3); line-height: var(--wp-lh-h3); font-weight: var(--wp-fw-semibold); }