/* =========================
   YOUDILLO – DESIGN SYSTEM v1
   (Home + Login + Invite + future /app)
   ========================= */

/* Tokens */
:root{
  --yd-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --yd-bg: #ffffff;
  --yd-text: #0f172a;
  --yd-muted: #64748b;

  --yd-primary: #2f5d8c; /* stesso blu del login */
  --yd-border: #e5e7eb;

  --yd-radius: 18px;

  --yd-maxw: 920px;
  --yd-pad: 18px;

  --yd-h1: 32px;
  --yd-h2: 22px;
  --yd-p: 16px;
  --yd-small: 13px;
}

/* Base */
html, body{
  font-family: var(--yd-font) !important;
  color: var(--yd-text);
  background: var(--yd-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body{
  line-height: 1.55;
  font-size: var(--yd-p);
}

/* Typography */
h1,h2,h3,h4,h5,h6{
  font-family: var(--yd-font) !important;
  color: var(--yd-text);
  font-weight: 800;
  letter-spacing: -0.02em;
}

h1{ font-size: var(--yd-h1); line-height: 1.1; margin: 0 0 10px; }
h2{ font-size: var(--yd-h2); line-height: 1.2; margin: 18px 0 8px; }

p{ color: var(--yd-muted); margin: 0 0 12px; }

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

/* Make WP content less “bloggy” */
.site-main, main, .wp-site-blocks{
  max-width: var(--yd-maxw);
  margin: 0 auto;
  padding-left: var(--yd-pad);
  padding-right: var(--yd-pad);
}

/* If theme adds huge top margin, soften it */
.wp-site-blocks{
  padding-top: 12px;
}

/* Gutenberg Buttons: unify with Login button */
.wp-block-button .wp-block-button__link{
  background: var(--yd-primary) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 14px 22px !important;
  font-weight: 800 !important;
  border: 0 !important;
  box-shadow: 0 18px 45px rgba(15,23,42,.08);
}

/* Optional “secondary button” look if you ever use it */
.wp-block-button.is-style-outline .wp-block-button__link{
  background: transparent !important;
  color: var(--yd-primary) !important;
  border: 1px solid rgba(47,93,140,.35) !important;
  box-shadow: none !important;
}

/* Cleaner separators (your “—” lines) */
hr{
  border: 0;
  border-top: 1px solid var(--yd-border);
  margin: 18px 0;
}

/* Small text utility */
small, .yd-small{
  font-size: var(--yd-small);
  color: var(--yd-muted);
}

/* Mobile tuning */
@media (max-width: 520px){
  :root{
    --yd-h1: 28px;
    --yd-h2: 20px;
    --yd-pad: 16px;
  }
}

/* ------------------------------------------------------------------
 * Soft Onboarding / Coachmarks
 * ------------------------------------------------------------------ */
#yd-coach-root{position:fixed;inset:0;z-index:99999;pointer-events:none}
#yd-coach-root .yd-coach-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.08);backdrop-filter:saturate(180%) blur(4px);pointer-events:auto}
#yd-coach-root .yd-coach-tip{position:absolute;max-width:320px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 18px 60px rgba(15,23,42,.18);padding:12px 12px 10px;pointer-events:auto}
#yd-coach-root .yd-coach-title{font-weight:1000;font-size:14px;letter-spacing:-.2px}
#yd-coach-root .yd-coach-text{margin-top:6px;font-size:13px;opacity:.86;line-height:1.35}
#yd-coach-root .yd-coach-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}
#yd-coach-root .yd-coach-actions button{border:1px solid #e5e7eb;background:#fff;border-radius:12px;padding:8px 10px;font-weight:900;cursor:pointer}
#yd-coach-root .yd-coach-actions .yd-coach-next{border-color:#111;background:#111;color:#fff}
.yd-coach-target{outline:3px solid rgba(17,17,17,.25);outline-offset:4px;border-radius:16px;position:relative;z-index:100000}