/* =====================================================================
   Violet palette mock. Scoped to :root[data-palette="violet"].
   With no data-palette on <html>, nothing here applies.

   Idea: the logo's blue-to-violet, used as three tones (blue, violet,
   deep indigo) instead of a wash. The one bold move: the dark band turns
   from near-black to a deep night indigo. The one gradient: a thin rule
   under the header, in the logo's own #3D7DF6 to #593FF6.

   Hierarchy: deep indigo for big type (the serif first line of a
   headline, prices), violet for labels, marks and actions. The hero's
   small line above the headline stays plain, so the indigo serif line is
   the hero's one color statement.

   Contrast (WCAG 2.x) is noted next to each color: on paper #F4F3F0 /
   on white #FFFFFF unless it says otherwise.
   ===================================================================== */

:root[data-palette="violet"] {
  /* Palette tones */
  --v-blue: #2459C7;     /* logo blue, deepened for text   5.7 / 6.3 */
  --v-violet: #5B3DF6;   /* the brand violet               5.5 / 6.1 */
  --v-ink: #4127D6;      /* violet for small text, links   7.6 / 8.5 */
  --v-indigo: #2B1F86;   /* deep indigo: big type, numbers 11.5 / 12.8 */
  --v-night: #1C1650;    /* the band */
  --v-tint: #EFECFA;     /* closing call to action */
  --v-wash: #F6F4FE;     /* chips and the legal summary card */
  --v-line: #DCD5FB;     /* borders of tinted things */
  --v-rule: #E4DFFB;     /* rules inside tinted cards */
  --v-hover: rgba(43, 31, 134, 0.06); /* outline button hover */
  --v-gradient: linear-gradient(90deg, #3D7DF6, #593FF6);

  --c-accent: #5B3DF6;
  --c-accent-hover: #4127D6;
  --c-link-hover: #4127D6;
  --c-focus: #5B3DF6;

  /* Dark band: night indigo */
  --c-dark: var(--v-night);
  --c-dark-text: #F5F3FF;              /* 15.0 on the band */
  --c-dark-muted: #C3BDEB;             /* 9.2 on the band */
  --c-dark-rule: rgba(195, 189, 235, 0.22);
  --c-dark-accent: #B4A8FF;            /* 7.8 on the band */

  /* The sample email's shadow, tinted indigo instead of gray */
  --shadow-card: 0 1px 2px rgba(43, 31, 134, 0.08), 0 30px 60px -28px rgba(43, 31, 134, 0.34);
}

/* Inside the band the palette tones turn light, the same way .band
   redefines the --c-* tokens in site.css, so any palette-colored part put
   in the band (a link, a stat, an outline button) stays readable.
   Contrast on the band #1C1650. */
:root[data-palette="violet"] .band {
  --v-blue: #8FB3FF;     /* 7.9 */
  --v-violet: #B4A8FF;   /* 7.8 */
  --v-ink: #B4A8FF;      /* 7.8 */
  --v-indigo: #F5F3FF;   /* 15.0 */
  --v-wash: rgba(180, 168, 255, 0.12);  /* light text on it: 11.9 */
  --v-line: rgba(180, 168, 255, 0.32);
  --v-rule: var(--c-dark-rule);
  --v-hover: rgba(245, 243, 255, 0.08);
}

:root[data-palette="violet"] ::selection { background: #DCD5FB; color: #1C1B19; }

/* The one gradient: a 2px rule under the header. */
:root[data-palette="violet"] .site-header {
  border-bottom: 2px solid #593FF6;
  border-image: var(--v-gradient) 1;
}
/* The phone menu opens below that rule instead of covering it. */
:root[data-palette="violet"] .menu__panel {
  top: calc(100% + 2px);
  border-top: 0;
  box-shadow: 0 24px 40px -24px rgba(43, 31, 134, 0.3);
}

/* Hero: the serif first line and the outline button share the deep indigo */
:root[data-palette="violet"] .display__serif { color: var(--v-indigo); }
:root[data-palette="violet"] .btn--outline { border-color: var(--v-indigo); color: var(--v-indigo); }
:root[data-palette="violet"] .btn--outline:hover { background: var(--v-hover); color: var(--v-indigo); }

/* Section labels and step numbers */
:root[data-palette="violet"] .eyebrow { border-top-color: var(--v-violet); color: var(--v-ink); }
:root[data-palette="violet"] .band .eyebrow { border-top-color: var(--c-dark-accent); color: inherit; }
:root[data-palette="violet"] .steps__num { color: var(--v-violet); }

/* Who gets what: blue, violet, indigo, the logo's gradient in steps */
:root[data-palette="violet"] .groups__item { border-top: 2px solid var(--v-g, var(--v-violet)); }
:root[data-palette="violet"] .groups__item:nth-child(3n+1) { --v-g: var(--v-blue); }
:root[data-palette="violet"] .groups__item:nth-child(3n+2) { --v-g: var(--v-violet); }
:root[data-palette="violet"] .groups__item:nth-child(3n+3) { --v-g: var(--v-indigo); }
:root[data-palette="violet"] .groups__term { color: var(--v-g, var(--v-violet)); }

/* Dark band */
:root[data-palette="violet"] .band .closer__icon { color: var(--c-dark-accent); }

/* Sample email: the Compliance Mode mark becomes a small violet badge */
:root[data-palette="violet"] .email-card__status {
  padding: 5px 11px 5px 9px;
  border-radius: var(--radius-pill);
  background: var(--v-wash);
  box-shadow: inset 0 0 0 1px var(--v-line);
  color: var(--v-indigo);
}
:root[data-palette="violet"] .email-card__status-icon { color: var(--v-violet); }

/* Statistic and FAQ */
:root[data-palette="violet"] .stat strong { color: var(--v-violet); }
:root[data-palette="violet"] .faq__icon { color: var(--v-violet); }

/* Text links in the page body. Rest and hover are both violets, so hover
   also thickens the underline (a cue that is not color alone). */
:root[data-palette="violet"] main a:not([class]) { color: var(--v-ink); }
:root[data-palette="violet"] main a:not([class]):hover { color: var(--v-indigo); text-decoration-thickness: 2px; }
:root[data-palette="violet"] .table th a:not([class]) { color: inherit; }
:root[data-palette="violet"] .table th a:not([class]):hover { color: var(--v-ink); }

/* Closing call to action: a soft violet tint */
:root[data-palette="violet"] .cta {
  --c-subtle: #5E5A72;   /* violet-gray small text: 5.7 on the tint */
  background: var(--v-tint);
}

/* Pricing */
:root[data-palette="violet"] .price { border-top-color: var(--v-violet); }
:root[data-palette="violet"] .price__for { color: var(--v-ink); }
:root[data-palette="violet"] .price__amount,
:root[data-palette="violet"] .price__tier-amount { color: var(--v-indigo); }

/* Compare: the table's header rule, and Cadento's side of each "Choose X
   if / Choose Cadento if" pair (Cadento's row is already violet in
   site.css) */
:root[data-palette="violet"] .table thead th { border-bottom-color: var(--v-violet); }
:root[data-palette="violet"] .compare__choose .checks__item:last-child { border-top-color: var(--v-violet); }
@media (max-width: 900px) {
  :root[data-palette="violet"] .table--stack tbody tr.compare__us { border-top-color: var(--v-violet); }
}

/* Legal pages */
:root[data-palette="violet"] .summary { background: var(--v-wash); border-color: var(--v-line); }
:root[data-palette="violet"] .summary__item,
:root[data-palette="violet"] .summary__note { border-top-color: var(--v-rule); }

/* 404 */
:root[data-palette="violet"] .link-list__link svg { color: var(--v-violet); }

/* Footer */
:root[data-palette="violet"] .site-footer__link:hover { color: var(--v-ink); }

/* What you can skip: a 2px violet rule over each "No ___." item, like the
   price cards */
:root[data-palette="violet"] .skips__item { border-top: 2px solid var(--v-violet); }