/*
 * ATOP — the site's colours, from ATOP's design system (studio/brands/atop/DESIGN.md, brand.json), 2026-10-22.
 * Loaded AFTER the Evente theme's main.css; removing this one file gives the current site back.
 * Changes colours only: no font, no text-transform, no mix-blend-mode (the owner's decision).
 *
 * ATOP's four colours: navy #194F73 · red #CF262E · sky #54BEE1 · green #8BB944; their tones (Material's tonal
 * palettes, brand.json): navy 10 #001E31 · navy 20 #003351 · navy 25 #003F61 · navy 95 #E7F2FF ·
 * red 95 #FFEDEB · sky 90 #B8EAFF.
 * Contrast of white text: on navy #194F73 ≈ 8.7:1; on red #CF262E ≈ 5.3:1 (both pass AA for the buttons' words).
 */

:root {
  /* The template's violet → ATOP's navy: buttons, pills, active menu, links, back-to-top, icons (currentColor). */
  --td-theme-primary: #194F73;
  /* The template's pink → ATOP's red, the association's colour: « Become a member », the countdown box, accents. */
  --td-theme-secondary: #CF262E;
  /* The dark violet band (partners, `.blue`) → ATOP's navy 20, deeper than the buttons, lighter than the footer. */
  --td-common-blue: #003351;
  /* The ticker's yellow (not an ATOP colour) → sky 90: a light band where the four shapes keep their colours. */
  --td-common-yellow: #B8EAFF;
  /* The titles' near-black → navy 10, ATOP's darkest navy (the footer's ground). */
  --td-common-black: #001E31;
}

/* The page loader's two dots. */
.loader::before,
.loader::after { --c: no-repeat radial-gradient(farthest-side, #194F73 92%, #0000); }

/* The section pills (« ABOUT ATOP », « WHAT WE DO »…): lavender → navy 95 under the navy words. */
.td-section-subtitle-2 { background: #E7F2FF; }
.td-section-subtitle-3 { border-color: #194F73; }

/* The icon boxes: lavender → navy 95; pink tint → red 95. */
.td-about-3-clients .icon,
.td-counter-5-wrap .td-counter-2-icon i { background: #E7F2FF; }
.td-about-7-clients .icon { background: #FFEDEB; }

/* The counters' icons: pink → red. */
.td-counter-2-icon i { color: #CF262E; }

/* The hero's second blur: pink → sky, the one glow of ATOP's site sections (DESIGN.md § 12). */
.td-hero-6-blur-2 { background: #54BEE1; }

/* The soft buttons (« Details »…): pink tint → red 95 under the red words (≈ 4.7:1). */
.td-schedule-2-content .td-btn-square,
.td-schedule-4-content .td-btn,
.td-blog-tag-widget .tagcloud a,
.td-postbox-content .td-btn { background: #FFEDEB; }

/* The tabs' pink shadow → a red one. */
.td-schedule-3-tab-btn button.active,
.td-schedule-3-tab-btn button:hover { box-shadow: 0 4px 8px 0 rgba(207, 38, 46, 0.35); }

/* Violet lines and overlays → navy. */
.td-schedule-team-border,
.td-gallery-thumb::before { background: #194F73; }
.td-postbox-blockquote { border-left-color: #194F73; }
.td-testimonial-4-navigation span { background: #E7F2FF; }

/* The footer's dark violet lines → navy 25, on the footer's navy 10. */
.td-footer-form input { border-bottom-color: #003F61; }
.td-footer-bottom { border-top-color: #003F61; }
.td-footer-4-top { border-bottom-color: #003F61; }

/* ---- Second pass (2026-10-22), from the preview's screenshots: the last hard-coded violets and pinks. ---- */

/* The violet underline under every dark pill (« LAST WEBINAR », « OUR BOARD », « OUR PARTNERS »…) → navy 20.
   Scoped to the dark pills: the light ones (-2, -3: « ABOUT ATOP », « WHAT WE DO »…) keep no underline, as in the theme. */
.td-section-subtitle:not(.td-section-subtitle-2):not(.td-section-subtitle-3) { box-shadow: 0 4px 0 0 #003351; }

/* The lavender « WELCOME! » pill in the home hero → navy 95, as the other pills. */
.td-hero-4-subtittle { background: #E7F2FF; }

/* The soft glows behind the hero: lavender → sky 90 (top left); peach → red 95 (bottom right). */
.td-hero-4-blur { background: #B8EAFF; }
.td-hero-4-blur-2 { background: #FFEDEB; }

/* The glows behind « Our Activities » and the top of /webinars/: pink → sky 90, violet → navy 90 — ATOP's sky glow. */
.td-team-5-blur { background: #B8EAFF; }
.td-team-5-blur-2 { background: #CCE5FF; }