/* =========================================================================
   CERTIFY — DARK TECH theme override
   Loaded AFTER styles.css. Flips the token palette to a deep blue-black
   surface system with an electric cyan accent, plus fixes for the few
   spots that hardcoded light-on-light values for the original paper theme.
   ========================================================================= */

:root {
  --paper:      #0b0f17;   /* base surface (near-black blue) */
  --paper-warm: #111725;   /* slightly raised panel          */
  --paper-deep: #06080d;   /* deepest inverse block          */
  --ink:        #e8edf6;   /* primary text (cool white)      */
  --ink-soft:   #9aa6bd;   /* muted body                     */
  --ink-faint:  #6b7790;   /* mono labels                    */
  --line:       #1e2636;   /* subtle borders                 */
  --line-strong:#2c3850;

  /* violet accent trio (default) */
  --accent:     #7c5cff;
  --accent-deep:#5a3fd6;
  --accent-tint:#1a1733;

  --v-true:  #34d399;
  --v-false: #f6685e;
  --v-warn:  #f0b429;

  color-scheme: dark;
}

/* Base canvas: radial accent glow behind hero (grid lives only in Vision + Contact) */
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(900px 520px at 78% -8%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 70%);
  background-repeat: no-repeat;
}

/* NAV — solid dark surface (no grid showing through) + hairline */
.nav { border-bottom-color: var(--line); background: var(--paper); }
.nav--scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 30px -20px rgba(0,0,0,.8); }

/* Language dropdown menu surface */
.lang__list { background: var(--paper-warm); border-color: var(--line-strong);
  box-shadow: 0 24px 50px -22px rgba(0,0,0,.8); }
.lang__item:hover { background: #18202f; }

/* Primary (inverted) button reads as bright chip on dark */
.btn { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
/* All accent buttons + Vous chip: base follows the selected palette accent */
.btn--accent, .chip--you { background: var(--accent); border-color: var(--accent); color: oklab(0.999994 0.0000455677 0.0000200868 / 0.8); }
.btn--accent:hover { color: #111; }        /* hover: white bg, black text */

/* Cards / panels: raised dark glass with a faint cyan edge-glow */
.factcheck {
  background: var(--paper-warm); border-color: var(--line-strong);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 6%, transparent), 0 30px 60px -38px rgba(0,0,0,.9);
}
.factcheck__media { background: #0c1320; }
.how__card, .feature, .media-card, .notice { background: var(--paper-warm); border-color: var(--line-strong); }
.media-card:hover, .how__card:hover { border-color: var(--accent); }
.media-card__preview, .media-card__preview-bg { background: #0c1320; }
.media-card__preview-bg { color: var(--ink); }

/* IO diagram nodes */
.io__node--in { background: #0c1320; border-color: var(--line-strong); }
.io__node--c { background: var(--ink); color: var(--paper); box-shadow: 0 6px 18px -8px rgba(0,0,0,.7); }
.io__node--out { color: #04181a; }
.io__link { background: var(--line-strong); }

/* Ticker — pure black band, cyan-tinted tags */
.ticker { background: var(--paper-deep); border-block-color: var(--line); }
.ticker:hover { background: #04060a; }
.tick-tag, .tick-tag--vision, .tick-tag--edu {
  background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent); }
.tick-item em, .tick-msg { color: var(--ink); }

/* Media: deepest black fill, matching the Origins section */
#media.section { background: var(--paper-deep); }

/* Process cards: fully static like the programme éducatif card */
#project .how__card,
#project .how__card:hover,
#project .how__card.reveal,
#project .how__card.reveal.is-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

/* ── IO flow refinement (INFORMATION → CERTIFY → CERTIFICATION) ── */
/* arrows no longer touch the circles */
.io__flow { gap: 10px; }
.io__link { margin-inline: 8px; }
/* CERTIFY hub: toned down — dark disc with an accent ring instead of bright white */
.io__node--c { background: var(--paper-warm); border: 2px solid var(--accent); color: var(--ink); box-shadow: none; }
/* CERTIFICATION: refined outlined disc with a soft accent tint (no heavy solid violet) */
.io__node--out { background: color-mix(in oklab, var(--accent) 14%, #0a0e16); border: 2px solid var(--accent); color: var(--accent); box-shadow: none; }

/* Project + Why: tech grid + top accent glow (feature backdrop) */
#project.section,
#why.section,
.first-screen .hero {
  background-color: #0a0e16;
  background-image:
    radial-gradient(800px 460px at 50% 0%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: auto, 46px 46px, 46px 46px;
  background-blend-mode: normal, soft-light, soft-light;
}

/* Sections that were already "dark/warm" in the paper theme */
.section--warm { background: #0c111b; }
/* Vision + Contact: let the tech grid show through as a feature backdrop */
#vision.section--warm,
#contact.section--warm {
  background-color: #0a0e16;
  background-image:
    radial-gradient(800px 460px at 50% 0%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: auto, 46px 46px, 46px 46px;
  background-blend-mode: normal, soft-light, soft-light;
}
.section--dark { background: var(--paper-deep); border-color: var(--line); }
.section--dark .feature { background: var(--paper-warm); border-color: var(--line-strong); }
.section--dark .feature__bar { border-color: var(--line-strong); }

/* Quote block — deep, flat (no top vignette) */
.quoteblock { background: #06080d; color: var(--ink); }

/* Creed band: tinted from the active accent so it follows the palette */
.creed { background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 24%, #07090e),
    color-mix(in oklab, var(--accent) 8%, #06080d));
  border-block: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); color: var(--ink); }
.creed__kicker { color: var(--accent); }
.creed__line .pt { color: var(--accent); }

/* Newsletter notice already styled for dark input fields — ensure border */
.notice { box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 5%, transparent); }

/* Footer */
.footer { background: var(--paper-deep); color: var(--ink-soft); }
.footer__brand { color: var(--ink); }

/* Modals: dark glass */
.modal__backdrop { background: rgba(2,4,8,.66); }
.modal__panel { background: var(--paper-warm); border-color: var(--line-strong);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.95); }
.field input, .field textarea { background: #0c1320; color: var(--ink);
  border-color: var(--line-strong); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.modal__close:hover { background: var(--ink); color: var(--paper); }

/* Cookie banner */
.cookie { background: var(--paper-warm); border: 1px solid var(--line-strong);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 6%, transparent), 0 30px 60px -30px rgba(0,0,0,.9); }

/* Newsletter input matches the dark form fields */
.news-form__input { background: #0c1320; border-color: var(--line-strong); color: var(--ink); }
.news-form__input::placeholder { color: var(--ink-faint); }

/* Newsletter tag follows the accent palette */
.notice__tag { color: color-mix(in oklab, var(--accent) 70%, #fff);
  border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.notice__tag::before { background: color-mix(in oklab, var(--accent) 70%, #fff);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); }

/* Timeline link follows the accent palette */
.timeline__link { color: color-mix(in oklab, var(--accent) 75%, #fff);
  border-bottom-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.timeline__link:hover { color: color-mix(in oklab, var(--accent) 40%, #fff);
  border-bottom-color: color-mix(in oklab, var(--accent) 55%, #fff); }

/* Scroll cue arrow */
.cue-band__arw { color: var(--accent); }

/* Selection */
::selection { background: color-mix(in oklab, var(--accent) 32%, transparent); color: #fff; }

/* =========================================================================
   Editorial detail — section-level accents
   ========================================================================= */

/* Section numbers read as quiet labels, not the loud accent */
.section__num { color: var(--ink); }
.section--dark .section__num,
.feature__tag,
.timeline__year { color: #fff; }

/* Hero eyebrow sits a touch brighter than the mono labels */
.hero .eyebrow { color: var(--ink-soft); }

/* Title clause tones */
#why .section__title .soft { color: var(--ink); }
#contact .section__title .soft { color: var(--accent); }

/* Origins & Contact heads size to their own text on desktop */
#story .section__title,
#contact .section__title { max-width: max-content; }
#story .section__title span,
#contact .section__title > span:first-child { white-space: nowrap; }

/* Vision headline */
.vision__title { margin-top: 16px; max-width: 675px; }

/* Mission opening keeps its authored line breaks */
.lede-lg--pre { white-space: pre-line; margin-bottom: 18px; }

/* Project lede second paragraph */
.prose__p2 { font-size: 18px; }

/* Fact-check "unreliable" verdict → soft accent-tinted pill */
.factcheck .verdict--false {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: color-mix(in oklab, var(--accent) 78%, var(--ink));
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  font-size: 10px;
}

/* Byline rosette as an outlined accent chip */
.byline__rosette {
  background: transparent; color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
}

/* Creed band: deep black with accent punctuation */
.creed { background: #000; }
.creed__line .pt { color: var(--accent); }

/* Newsletter copy on the dark notice card */
.notice__h { color: rgba(255, 255, 255, .92); }
.notice__p { color: rgba(255, 255, 255, .75); }

/* Footer tagline */
.footer__made { font-size: 15px; }