/* mesite-design.css — shared design tokens for every MeSite platform page
 * (auth, studio, dashboards, admin, docs). Synced to the /landing look:
 * purple accent #5B3DF5, light surfaces, small (NOT pill) button radius.
 *
 * Fonts stay as the admin's self-hosted Aeonik Pro / Wix Madefor (loaded by
 * mesite-base.css); this file only defines COLOR / RADIUS / SPACING tokens and a
 * few opt-in component classes (.vd-btn, .vd-card, .vd-link). Layouts adopt it
 * incrementally — linking the file is harmless on its own; it only changes
 * elements that use the vars or the .vd-* classes.
 *
 * NOTE ON RADIUS: /landing buttons use .25rem (~4px). We do NOT round things
 * that don't need it — no decorative pills. Keep radius small and purposeful.
 */
:root {
  /* Brand (matches landing_porto_html.go :root) */
  --vd-brand:      #5B3DF5;   /* primary purple — buttons, links, active */
  --vd-brand-d:    #4A2BE6;   /* hover / darker */
  --vd-brand-dd:   #3F22D6;   /* active / pressed */
  --vd-brand-2:    #9d7bff;   /* light purple accent */
  --vd-brand-tint: #F1EEFE;   /* pale purple fill (selected rows, chips) */
  --vd-grad:       linear-gradient(135deg,#5B3DF5 0%,#C341E8 55%,#FF6FA3 100%);

  /* Surfaces / ink */
  --vd-heading:  #17141f;     /* near-black heading (landing --porto-heading) */
  --vd-body:     #6b6b76;     /* body text */
  --vd-line:     #eae7f2;     /* hairline / card border */
  --vd-surface:  #ffffff;     /* card / panel bg */
  --vd-bg:       #F7F7FA;     /* page background (light) */
  --vd-dark:     #2A2C38;     /* dark sidebar / footer */

  /* Radius — small and purposeful, mirrors landing */
  --vd-radius:    4px;        /* buttons, inputs (.25rem) */
  --vd-radius-c: 12px;        /* cards */

  /* Elevation */
  --vd-shadow:   0 30px 60px -30px rgba(91,61,245,.28);
}

/* ── Button ─────────────────────────────────────────────────────────────────
 * Small rounded rect (NOT a pill), 2px transparent border like landing. */
.vd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: .9rem; line-height: 1.5;
  padding: .6rem 1.6rem; border-radius: var(--vd-radius);
  border: 2px solid transparent; cursor: pointer; white-space: nowrap;
  letter-spacing: -.01em; transition: background .18s, border-color .18s, color .18s;
}
.vd-btn-primary { background: var(--vd-brand); color: #fff; border-color: var(--vd-brand); }
.vd-btn-primary:hover { background: var(--vd-brand-d); border-color: var(--vd-brand-d); }
.vd-btn-primary:active { background: var(--vd-brand-dd); border-color: var(--vd-brand-dd); }
.vd-btn-outline { background: transparent; color: var(--vd-brand); border-color: var(--vd-brand); }
.vd-btn-outline:hover { background: var(--vd-brand); color: #fff; }
.vd-btn-ghost { background: transparent; color: var(--vd-heading); border-color: var(--vd-line); }
.vd-btn-ghost:hover { border-color: var(--vd-brand); color: var(--vd-brand); }

/* ── Card ──────────────────────────────────────────────────────────────────*/
.vd-card {
  background: var(--vd-surface); border: 1px solid var(--vd-line);
  border-radius: var(--vd-radius-c);
}

/* ── Link ──────────────────────────────────────────────────────────────────*/
.vd-link { color: var(--vd-brand); }
.vd-link:hover { color: var(--vd-brand-d); text-decoration: underline; }

/* ── Heading tone ───────────────────────────────────────────────────────────
 * Opt-in helper so pages can align heading colour to the landing without a
 * global override that might fight existing utility classes. */
.vd-heading { color: var(--vd-heading); }