/* Site themes. <html data-theme="..."> is set from the landing content (platform dashboard → المظهر).
   "brand" reproduces the original colours exactly; the others re-point the same roles:
   --night (dark sections), --ink (headings, dark cards), --accent (CTAs, highlights), --accent-deep (accent text
   on light backgrounds), --paper (light sections), --tint (soft accent background). */
html, html[data-theme="brand"] {
  --night: #071b3a; --night-deep: #06172f; --ink: #082557; --ink-2: #0b2c59; --accent: #1fd2c3; --accent-hover: #42dece;
  --accent-deep: #0d9f99; --accent-ink: #05274a; --paper: #f7f9f8; --paper-2: #eef4f1; --tint: #dff4ef; --tint-2: #e9f6f3;
  --muted-on-dark: #a8b8c9;
}
html[data-theme="clinical"] { /* Clinical blue: hospital-grade calm, white space, trusted blue */
  --night: #0a2547; --night-deep: #081d38; --ink: #0d2f5c; --ink-2: #123a6e; --accent: #3ba7ff; --accent-hover: #63b8ff;
  --accent-deep: #1769c7; --accent-ink: #062044; --paper: #f5f8fc; --paper-2: #eaf1f9; --tint: #e1edfb; --tint-2: #e8f1fc;
  --muted-on-dark: #a9bdd6;
}
html[data-theme="eucalyptus"] { /* Fresh green: wellness, family medicine, dental */
  --night: #0c2722; --night-deep: #091f1b; --ink: #12382f; --ink-2: #17453a; --accent: #4fd1a5; --accent-hover: #6fdcb7;
  --accent-deep: #12876b; --accent-ink: #062a22; --paper: #f4faf7; --paper-2: #e9f4ef; --tint: #ddf3ea; --tint-2: #e7f6f0;
  --muted-on-dark: #a3c2b8;
}
html[data-theme="rose"] { /* Warm care: women's health, IVF, dermatology, paediatrics */
  --night: #2a1433; --night-deep: #22102a; --ink: #3a1a45; --ink-2: #4a2257; --accent: #ff8fa8; --accent-hover: #ffa6ba;
  --accent-deep: #c2416b; --accent-ink: #3a0f22; --paper: #fbf7f8; --paper-2: #f6edf0; --tint: #fbe5ec; --tint-2: #fcecf1;
  --muted-on-dark: #c9b0cf;
}
html[data-theme="violet"] { /* Modern tech: multi-branch centres, a SaaS-first look */
  --night: #121032; --night-deep: #0e0c28; --ink: #1d1a4d; --ink-2: #26225f; --accent: #8f80ff; --accent-hover: #a597ff;
  --accent-deep: #5b4ae0; --accent-ink: #120d45; --paper: #f7f7fc; --paper-2: #eeeef9; --tint: #e9e6ff; --tint-2: #efedff;
  --muted-on-dark: #b2afd6;
}

/* ---- the roles applied to the page (same selectors as styles.css) ---- */
body, .section-light, .why, .how-section, .product-preview, .pricing-section, .demo-section { background-color: var(--paper); }
body { color: var(--ink); }
.site-header { background: color-mix(in srgb, var(--paper) 90%, transparent); }
.site-header.is-scrolled { background: color-mix(in srgb, var(--paper) 97%, transparent); }
.mobile-menu { background: var(--paper); }
.section-dark, .hero, .features-section, .faq-section { background-color: var(--night); }
.hero-grid:after { background: radial-gradient(circle at 62% 45%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 33%), linear-gradient(90deg, transparent 42%, var(--night) 87%); }
.site-footer { background: var(--night-deep); }
.logo-strip { background: var(--paper-2); }
.testimonials-section { background: var(--tint); }
.top-note, .button-primary, .popular-badge, .mini-check, .feature-row > a, .doctor-avatar, .testimonial-early-badge > span, .form-success > span,
.mobile-sticky-cta, .app-brand-mark, .app-action, .chart-bars i.active { background: var(--accent); color: var(--accent-ink); }
.button-primary:hover { background: var(--accent-hover); }
.button-dark, .demo-card, .feature-highlight, .featured-price, .testimonial-featured, .app-sidebar, .author-avatar, .mini-mark { background-color: var(--ink); }
.feature-highlight, .featured-price { background: linear-gradient(var(--ink-2), var(--ink)) padding-box, var(--edge-strong) border-box; }
.demo-card { background: linear-gradient(var(--ink), var(--ink)) padding-box, var(--edge-strong) border-box; }
.testimonial-featured { background: linear-gradient(var(--ink), var(--ink)) padding-box, var(--edge-strong) border-box; }
.hero h1 span, .features-heading h2 span, .demo-copy h2 span, .faq-intro h2 span, .feature-title h3 em, .eyebrow, .sparkle, .status-dot,
.feature-highlight .card-number, .feature-highlight .card-accent, .featured-price .price-annual b, .footer-links strong, .footer-made span,
.app-brand strong, .app-nav span.active .ico, .demo-contact-row a .ico, .foot-ico, .testimonial-quote-mark, .feature-highlight .card-icon { color: var(--accent); }
.section-intro h2 em, .how-heading h2 em, .pricing-heading h2 em, .preview-heading h2 em, .testimonials-intro h2 span, .eyebrow-dark,
.testimonials-section .eyebrow, .arrow-link, .step-top > span, .price-annual b, .price-list li:before, .pricing-footnote a, .report-number,
.app-breadcrumb strong, .strip-ico, .metric-icon, .plan-limit, .card-icon, .clinic-tab.active small, .preview-benefits > span b { color: var(--accent-deep); }
.featured-price .price-list li:before, .featured-price .plan-limit { color: var(--accent); }
.section-intro h2, .how-heading h2, .pricing-heading h2, .preview-heading h2, .testimonials-intro h2, .why-card h3, .price-card h3, .step h3 { color: var(--ink); }
.feature-highlight h3, .featured-price h3 { color: #fff; }
.card-icon, .signal-icon, .annual-pill, .billing-toggle button small { background: var(--tint-2); }
.annual-pill span { background: var(--accent-deep); }
.hero-lead, .features-heading p, .faq-intro p, .demo-copy p { color: var(--muted-on-dark); }
.scroll-progress { background: linear-gradient(90deg, var(--accent-hover), var(--accent)); }
.faq-list summary span { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent); }
.faq-list details[open] summary span { background: var(--accent); color: var(--accent-ink); }
.feature-symbol { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 36%, transparent); }
.hero-orbit { border-color: color-mix(in srgb, var(--accent) 26%, transparent); }
:root { --edge: linear-gradient(140deg, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent-hover) 30%, transparent) 40%, rgba(168, 147, 255, .28) 72%, rgba(248, 200, 121, .45));
        --edge-strong: linear-gradient(140deg, var(--accent), var(--accent-hover) 40%, #a893ff 72%, #f8c879); }
.button-outline { color: var(--accent-deep); }
.demo-form input:focus, .demo-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.desktop-nav a:hover, .text-link:hover { color: var(--accent-deep); }
.desktop-nav a::after { background: var(--accent); }
.brand-name { color: var(--ink); }
.brand-name em { color: var(--accent-deep); }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-name em { color: var(--accent); }
.shape-plus:not(.alt) { background: linear-gradient(var(--accent), var(--accent)) center / 100% 3px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 3px 100% no-repeat; }
.shape-dots { background-image: radial-gradient(color-mix(in srgb, var(--accent) 55%, transparent) 1.5px, transparent 2px); }