/* ==========================================================================
   Skin: MODERN — an alternative look, layered on top of main.css.
   EVERYTHING here is scoped under [data-skin="modern"], so when that attribute
   is absent the site renders exactly as the default ("Classic") design. This
   file can be deleted with zero effect on Classic.

   Approach: mostly re-tune the existing CSS variables (colour, radius) that the
   whole system already reads, plus a few decorative touches on known classes
   (softer shadows, pill buttons, gradient brand/hero, card hover-lift).
   No HTML changes — so it can never break structure or the backend.
   ========================================================================== */

:root[data-skin="modern"] {
  --bg: #F4F6FB;
  --surface: #FFFFFF;
  --surface-2: #F7F9FE;
  --border: #EAEEF6;
  --border-strong: #DCE3F0;

  --ink: #141A2E;
  --ink-soft: #414B63;
  --muted: #7A849C;

  /* Deeper, cooler teal-indigo primary for a fresher feel. */
  --primary: #2B6CB0;
  --primary-hover: #245C97;
  --primary-soft: #E8F0FB;

  --c-pt: #2FA37A;
  --c-ot: #E5713F;
  --c-slp: #2F80C4;
  --c-po: #8A5CD1;

  /* Rounder everything. */
  --r-sm: 9px;
  --r: 14px;
  --r-lg: 20px;

  --header-h: 64px;

  /* Soft depth tokens (used below). */
  --shadow-sm: 0 1px 2px rgba(20,26,46,.05), 0 2px 8px rgba(20,26,46,.05);
  --shadow: 0 4px 16px rgba(20,26,46,.08), 0 1px 3px rgba(20,26,46,.06);
  --shadow-lg: 0 12px 34px rgba(20,26,46,.13);
}

:root[data-skin="modern"][data-theme="dark"] {
  --bg: #0E1220;
  --surface: #171C2C;
  --surface-2: #1E2436;
  --border: #262D42;
  --border-strong: #36405C;

  --ink: #EAEEF7;
  --ink-soft: #B7C0D4;
  --muted: #808AA3;

  --primary: #6AA6E0;
  --primary-hover: #82B6E8;
  --primary-soft: #17223A;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow: 0 6px 20px rgba(0,0,0,.4);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.5);
}

/* ---- Typography: a touch larger and airier ---- */
[data-skin="modern"] body { line-height: 1.65; }
[data-skin="modern"] h1 { letter-spacing: -.02em; font-weight: 700; }
[data-skin="modern"] h2, [data-skin="modern"] h3 { letter-spacing: -.01em; }

/* ---- Header: sticky, translucent, soft shadow instead of a hard line ---- */
[data-skin="modern"] .site-header {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  box-shadow: var(--shadow-sm);
}
[data-skin="modern"] .brand__mark {
  background: linear-gradient(135deg, var(--primary), var(--c-po));
  color: #fff;
  border: none;
  box-shadow: var(--shadow-sm);
}

/* ---- Buttons: pill-shaped, gradient primary, gentle lift ---- */
[data-skin="modern"] .btn {
  border-radius: 999px;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
[data-skin="modern"] .btn--primary {
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--c-po)));
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
[data-skin="modern"] .btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
[data-skin="modern"] .btn--soft:hover, [data-skin="modern"] .btn--ghost:hover { transform: translateY(-1px); }

/* ---- Cards: shadow-based depth, more rounding, hover lift ---- */
[data-skin="modern"] .card,
[data-skin="modern"] .tool-card,
[data-skin="modern"] .course-card,
[data-skin="modern"] .program-card,
[data-skin="modern"] .email-card,
[data-skin="modern"] .product-card,
[data-skin="modern"] .manage-row {
  border-radius: var(--r-lg);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
  transition: transform .14s ease, box-shadow .18s ease;
}
[data-skin="modern"] a.tool-card:hover,
[data-skin="modern"] a.course-card:hover,
[data-skin="modern"] button.program-card:hover,
[data-skin="modern"] .product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
[data-skin="modern"] .tool-card__icon {
  background: linear-gradient(135deg, var(--primary-soft), color-mix(in srgb, var(--primary-soft) 60%, var(--surface)));
  border-radius: var(--r);
}

/* ---- Chips & pills: fully rounded ---- */
[data-skin="modern"] .chip,
[data-skin="modern"] .pill { border-radius: 999px; }

/* ---- Carousel slides & product images: rounder, deeper ---- */
[data-skin="modern"] .slide {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  border-color: transparent;
}
[data-skin="modern"] .plan-note {
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--primary-soft), color-mix(in srgb, var(--primary-soft) 55%, var(--surface)));
}

/* ---- Inputs: match the rounder language ---- */
[data-skin="modern"] .input,
[data-skin="modern"] .select,
[data-skin="modern"] .textarea,
[data-skin="modern"] .mini-select { border-radius: var(--r); }

/* ---- Section headings get a subtle accent underline ---- */
[data-skin="modern"] .plan-year { border-bottom-width: 2px; }