/* ==========================================================================
   NEXICUS theme — a token retheme of the Broadsheet design system.
   Loaded AFTER the design-system stylesheet, so it only re-points the
   system's own custom properties. No parallel components, no layout classes:
   every page still builds with Broadsheet's classes and spacing scale.

   Palette: Teal #249D8F / Golden Yellow #E9C46A / Coral #E76F51 / Cream #FDF0D5
   ========================================================================== */

:root {
  /* ---- Ground & ink ---- */
  --color-bg: #ffffff;
  --color-surface: #fdf0d5;              /* Cream — infographic canvas, section bands */
  --color-text: #16211f;                 /* very dark neutral, faintly teal */
  --color-divider: color-mix(in srgb, #16211f 14%, transparent);

  /* ---- Brand roles ---- */
  --color-accent: #249d8f;               /* Teal — primary, interactive */
  --color-accent-2: #e76f51;             /* Coral — attention, second spot */
  --color-process-yellow: #e9c46a;       /* Golden Yellow — data & infographic accent */

  /* NEXICUS-specific aliases used by the diagrams */
  --nx-teal: #249d8f;
  --nx-gold: #e9c46a;
  --nx-coral: #e76f51;
  --nx-cream: #fdf0d5;

  /* ---- Neutral ramp ---- */
  --color-neutral-100: #f6f7f6;
  --color-neutral-200: #e9ebea;
  --color-neutral-300: #d5d9d8;
  --color-neutral-400: #b6bcba;
  --color-neutral-500: #949c9a;
  --color-neutral-600: #767e7c;
  --color-neutral-700: #5b6362;          /* 6.2:1 on white — muted body copy */
  --color-neutral-800: #3d4443;
  --color-neutral-900: #232c2a;

  /* ---- Teal ramp ---- */
  --color-accent-100: #e9f7f5;
  --color-accent-200: #c9ebe7;
  --color-accent-300: #9adbd3;
  --color-accent-400: #62c2b6;
  --color-accent-500: #249d8f;
  --color-accent-600: #1c8377;
  --color-accent-700: #14655c;           /* 6.4:1 on white — accent body text */
  --color-accent-800: #0e4a43;
  --color-accent-900: #0a332e;

  /* ---- Coral ramp ---- */
  --color-accent-2-100: #fdefeb;
  --color-accent-2-200: #fbdcd3;
  --color-accent-2-300: #f7bdaa;
  --color-accent-2-400: #f0977c;
  --color-accent-2-500: #e76f51;
  --color-accent-2-600: #cf5636;
  --color-accent-2-700: #a63d21;         /* 5.8:1 on white */
  --color-accent-2-800: #7c2e19;
  --color-accent-2-900: #552112;

  /* ---- Gold ramp (data visualisation) ---- */
  --color-gold-100: #fdf7e8;
  --color-gold-200: #faedcb;
  --color-gold-300: #f5dc9d;
  --color-gold-400: #efce80;
  --color-gold-500: #e9c46a;
  --color-gold-600: #c9a24a;
  --color-gold-700: #9a7729;             /* 4.9:1 on white */
  --color-gold-800: #71571d;
  --color-gold-900: #4b3a14;

  /* ---- Geometry: softened from the print-sharp original ---- */
  --radius-sm: 3px;
  --radius-md: 7px;
  --radius-lg: 14px;

  /* ---- Elevation, retuned to the white ground ---- */
  --shadow-sm: 0 1px 2px rgba(22, 33, 31, 0.07), 0 1px 1px rgba(22, 33, 31, 0.04);
  --shadow-md: 0 4px 14px rgba(22, 33, 31, 0.08), 0 1px 3px rgba(22, 33, 31, 0.05);
  --shadow-lg: 0 18px 44px rgba(22, 33, 31, 0.13), 0 2px 8px rgba(22, 33, 31, 0.06);

  /* Diagram stroke weights, so every schematic matches */
  --nx-stroke: 1.6;
  --nx-stroke-bold: 2.6;
}

/* The [hidden] attribute must win over inline display values.
   Carousel slides, tab panels and filterable cards carry an inline
   display:grid/flex for their internal layout; the UA's
   [hidden]{display:none} loses to that inline value, so toggling
   `el.hidden` would set the attribute without hiding anything. */
[hidden] { display: none !important; }

/* Interaction states — themed, never browser defaults. */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 26%, transparent); }

/* ==========================================================================
   Motion. Every animation below is opt-in via a class and every one of them
   is disabled under prefers-reduced-motion — no information lives only in
   an animation.
   ========================================================================== */

@keyframes nx-rise   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes nx-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes nx-draw   { from { stroke-dashoffset: var(--nx-len, 400); } to { stroke-dashoffset: 0; } }
@keyframes nx-flow   { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes nx-pulse  { 0%, 100% { opacity: 0.28; transform: scale(1); } 50% { opacity: 0.08; transform: scale(1.55); } }
@keyframes nx-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes nx-slide-in  { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes nx-menu-in   { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Scroll reveal: elements start hidden only once JS has confirmed it can
   observe them (the .nx-obs flag), so a no-JS visitor sees everything. */
.nx-obs .nx-reveal { opacity: 0; }
.nx-obs .nx-reveal.nx-in { animation: nx-rise 0.66s cubic-bezier(0.22, 0.7, 0.2, 1) both; }

.nx-dash { stroke-dasharray: 6 6; animation: nx-flow 1.1s linear infinite; }
.nx-halo { animation: nx-pulse 3.2s ease-in-out infinite; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .nx-obs .nx-reveal,
  .nx-obs .nx-reveal.nx-in { opacity: 1; animation: none; }
  .nx-dash { animation: none; }
  .nx-halo { animation: none; opacity: 0.22; }
  * { scroll-behavior: auto !important; }
}