/* ============================================================
   Handova — Vector illustrations
   ------------------------------------------------------------
   Geometric line-and-flat-colour scenes for the landing page and
   the auth screens. Deliberately NOT a cartoon: the thin-stroke,
   rounded-cap language of the 24x24 icon sprite, drawn at
   illustration scale and filled with flat colour.

   The scenes are peopled. Handova is about a child leaving with
   the right adult, and a diagram of cards and shields cannot say
   that. Figures are built from five parts (see THE CAST below)
   and have NO faces -- silhouette and posture carry them. Eyes
   and mouths are the line between an editorial vector and the
   cartoon this set replaced.

   Link AFTER tokens.css:

       <link rel="stylesheet" href="../design-system/tokens.css">
       <link rel="stylesheet" href="../design-system/illustrations.css">

   ------------------------------------------------------------
   HOW AN ILLUSTRATION IS BUILT

   Illustrations are inlined into the page as a plain <svg>, NOT
   pulled from a <symbol> sprite. That is deliberate:

     - each scene appears once per page, so a sprite buys nothing
     - <use> renders into a shadow tree that document rules
       cannot reach, so a multi-colour scene could not be themed
     - inline means it still draws with JavaScript disabled

   Every shape carries one of the classes below and NO fill,
   stroke or stroke-width of its own, so this file restyles the
   whole set — including the dark-panel inversion — in one place.

       .il-l    line              1  outline, brand ink
       .il-la   line accent       2  the one thing to look at
       .il-lg   line good         3  confirmation / verified
       .il-lf   line faint        4  ground, rules, scaffolding
       .il-dash line dashed       +  combine with any line class
       .il-f    fill soft            tinted body of a shape
       .il-fm   fill mid             placeholder bars and chips
       .il-fa   fill accent soft     tinted body, accent hue
       .il-fg   fill good soft       tinted body, success hue
       .il-fs   fill surface         opaque card behind lines
       .il-fl   fill ink             solid marks, arrow heads

       .il-c1 .. .il-c6              flat colour, saturated
       .il-t1 .. .il-t6              the same six, as soft tints
       .il-s1 .. .il-s6              the same six, on the stroke
       .il-fo   fill on-colour       a mark ON a saturated fill
       .il-lo   line on-colour       ditto, drawn as a stroke
       .il-skin-1 .. .il-skin-4      figures
       .il-hair-1 .. .il-hair-4      figures

   Numbers 1-4 are the reading order: at most one .il-la focal
   point per scene, or the eye has nowhere to land.

   A line class and a fill class COMBINE on one element, because
   every shape starts from fill:none / stroke:none and each class
   sets exactly one of the two:

       <rect class="il-fs il-l" .../>   white card, ink outline
   ============================================================ */


/* ------------------------------------------------------------
   PALETTE
   Light ground — the landing page. Values are the shared tokens,
   with fallbacks so an illustration still renders correctly if a
   page forgets to link tokens.css.
   ------------------------------------------------------------ */
:root {
  --il-line:    var(--navy-800, #162034);
  --il-faint:   var(--border-strong, #D6DBE2);
  --il-accent:  var(--accent, #7B3FD4);
  --il-good:    var(--success, #256B4D);

  --il-fill:    rgba(22, 32, 52, 0.05);
  --il-fill-m:  rgba(22, 32, 52, 0.13);
  --il-fill-a:  rgba(123, 63, 212, 0.10);
  --il-fill-g:  rgba(37, 107, 77, 0.10);
  --il-surface: var(--surface, #FFFFFF);

  /* White on both grounds. Anything drawn ON a saturated fill --
     the tick inside a shield, the keyhole in a lock -- belongs to
     that fill, not to the page, so it must NOT flip with the
     ground the way --il-surface does. */
  --il-on-color: #FFFFFF;

  --il-stroke:  2;

  /* --------------------------------------------------------
     THE COLOUR SCALE

     Six mid-tone hues, chosen to sit on white AND on navy
     without either ground washing them out -- so one set of
     values serves the landing page and the auth panels, and a
     figure does not change colour when it moves between them.

     Mid-tone is the whole trick. The retired playful layer used
     fully saturated brights, which is why it read as a cartoon
     and why its text kept needing deeper siblings to stay
     legible. These are the same hues pulled back to where they
     can carry an outline on either ground.

     Colour SEPARATES here, it does not encode: nothing in a
     scene means anything by virtue of being amber.
     -------------------------------------------------------- */
  --il-c1: #E8785B;   /* coral  */
  --il-c2: #E9A947;   /* amber  */
  --il-c3: #35A093;   /* teal   */
  --il-c4: #4B7BE5;   /* blue, the brand accent lifted a step */
  --il-c5: #8770DC;   /* violet */
  --il-c6: #DB769D;   /* rose   */

  /* Tints of the same six, for the body of a shape sitting
     behind the line work. */
  --il-t1: rgba(232, 120, 91, 0.18);
  --il-t2: rgba(233, 169, 71, 0.20);
  --il-t3: rgba(53, 160, 147, 0.18);
  --il-t4: rgba(75, 123, 229, 0.16);
  --il-t5: rgba(135, 112, 220, 0.17);
  --il-t6: rgba(219, 118, 157, 0.17);

  /* --------------------------------------------------------
     THE CAST

     Four skin tones and four hair tones, mixed freely across
     the scenes. The product is sold to South African schools; a
     set of illustrations in which every family is the same
     colour would be describing a different country.
     -------------------------------------------------------- */
  --il-skin-1: #F2C9A6;
  --il-skin-2: #D19B6E;
  --il-skin-3: #A86B44;
  --il-skin-4: #7A4A2E;

  --il-hair-1: #2F2A36;
  --il-hair-2: #4A3324;
  --il-hair-3: #7A5230;
  --il-hair-4: #1E1B24;
}

/* Dark ground — the auth brand panel and the closing CTA.
   Opt in by putting .il-on-dark on the illustration or on any
   ancestor of it. Lines lift off navy instead of sinking into
   it, and both accents move to their light-on-dark siblings. */
.il-on-dark,
.il-on-dark .illus {
  --il-line:    rgba(255, 255, 255, 0.82);
  --il-faint:   rgba(255, 255, 255, 0.20);
  --il-accent:  #93B4FF;
  --il-good:    #6EE7A8;

  --il-fill:    rgba(255, 255, 255, 0.06);
  --il-fill-m:  rgba(255, 255, 255, 0.16);
  --il-fill-a:  rgba(147, 180, 255, 0.16);
  --il-fill-g:  rgba(110, 231, 168, 0.14);
  --il-surface: rgba(255, 255, 255, 0.04);

  /* The six hues hold on navy exactly as they are -- that is
     what mid-tone bought, and why a figure keeps its clothes
     when it moves from the landing page to an auth panel. Only
     the tints are rebuilt, because a dark ground swallows an
     18% wash of colour. */
  --il-t1: rgba(232, 120, 91, 0.26);
  --il-t2: rgba(233, 169, 71, 0.26);
  --il-t3: rgba(53, 160, 147, 0.28);
  --il-t4: rgba(75, 123, 229, 0.30);
  --il-t5: rgba(135, 112, 220, 0.30);
  --il-t6: rgba(219, 118, 157, 0.26);
}


/* ------------------------------------------------------------
   THE SVG ITSELF
   ------------------------------------------------------------ */
.illus {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}


/* ------------------------------------------------------------
   SHAPE CLASSES
   Every shape starts blank, so a line class and a fill class can
   sit on the same element without one cancelling the other.
   ------------------------------------------------------------ */
.illus path,
.illus rect,
.illus circle,
.illus ellipse,
.illus polygon,
.illus polyline,
.illus line {
  fill: none;
  stroke: none;
}

.illus .il-l,
.illus .il-la,
.illus .il-lg,
.illus .il-lf {
  stroke-width: var(--il-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.illus .il-l  { stroke: var(--il-line); }
.illus .il-la { stroke: var(--il-accent); }
.illus .il-lg { stroke: var(--il-good); }
.illus .il-lf { stroke: var(--il-faint); }

/* Dashes are in user units, so they scale with the artwork
   rather than with the viewport. */
.illus .il-dash { stroke-dasharray: 7 7; }

.illus .il-f  { fill: var(--il-fill); }
.illus .il-fm { fill: var(--il-fill-m); }
.illus .il-fa { fill: var(--il-fill-a); }
.illus .il-fg { fill: var(--il-fill-g); }
.illus .il-fs { fill: var(--il-surface); }
.illus .il-fl { fill: var(--il-line); }

.illus .il-c1 { fill: var(--il-c1); }
.illus .il-c2 { fill: var(--il-c2); }
.illus .il-c3 { fill: var(--il-c3); }
.illus .il-c4 { fill: var(--il-c4); }
.illus .il-c5 { fill: var(--il-c5); }
.illus .il-c6 { fill: var(--il-c6); }
.illus .il-c-ink { fill: var(--il-line); }
.illus .il-fo { fill: var(--il-on-color); }
.illus .il-lo {
  stroke: var(--il-on-color);
  stroke-width: var(--il-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.illus .il-t1 { fill: var(--il-t1); }
.illus .il-t2 { fill: var(--il-t2); }
.illus .il-t3 { fill: var(--il-t3); }
.illus .il-t4 { fill: var(--il-t4); }
.illus .il-t5 { fill: var(--il-t5); }
.illus .il-t6 { fill: var(--il-t6); }

/* Stroke-side twins, for a rule or an arrow in a scene colour. */
.illus .il-s1 { stroke: var(--il-c1); }
.illus .il-s2 { stroke: var(--il-c2); }
.illus .il-s3 { stroke: var(--il-c3); }
.illus .il-s4 { stroke: var(--il-c4); }
.illus .il-s5 { stroke: var(--il-c5); }
.illus .il-s6 { stroke: var(--il-c6); }
.illus .il-s1, .illus .il-s2, .illus .il-s3,
.illus .il-s4, .illus .il-s5, .illus .il-s6 {
  stroke-width: var(--il-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ------------------------------------------------------------
   THE CAST

   Five parts, two heights, no faces:

       head    circle, skin tone
       hair    cap over the top of the head, hair tone
       torso   rounded-shoulder path, garment colour
       legs    two rounded bars, trouser colour
       arms    stroked, skin tone

   A pose only ever moves the arms, so a parent in one scene is
   the same drawing as the parent in the next. Figures carry the
   normal ink outline, which is what keeps them in the same
   family as the line work around them -- and what makes them
   invert correctly on the navy panels.
   ------------------------------------------------------------ */
.illus .il-skin-1 { fill: var(--il-skin-1); }
.illus .il-skin-2 { fill: var(--il-skin-2); }
.illus .il-skin-3 { fill: var(--il-skin-3); }
.illus .il-skin-4 { fill: var(--il-skin-4); }

.illus .il-hair-1 { fill: var(--il-hair-1); }
.illus .il-hair-2 { fill: var(--il-hair-2); }
.illus .il-hair-3 { fill: var(--il-hair-3); }
.illus .il-hair-4 { fill: var(--il-hair-4); }

/* An arm is the one part drawn as a stroke, so the skin tone has
   to reach the stroke side too. Round-capped and weighted so it
   reads as a limb rather than as a wire -- but a child is drawn
   at the same coordinate scale as an adult, so an arm that is
   right on a 101-unit figure is a sausage on a 63-unit one. */
.illus .il-fig-arm {
  fill: none;
  stroke-width: 6.5;
  stroke-linecap: round;
}
.illus .il-fig-arm-sm { stroke-width: 5.5; }
.illus .il-fig-arm.il-skin-1 { stroke: var(--il-skin-1); }
.illus .il-fig-arm.il-skin-2 { stroke: var(--il-skin-2); }
.illus .il-fig-arm.il-skin-3 { stroke: var(--il-skin-3); }
.illus .il-fig-arm.il-skin-4 { stroke: var(--il-skin-4); }


/* ------------------------------------------------------------
   PLACEMENTS — LANDING PAGE
   ------------------------------------------------------------ */

/* A quiet vector field behind the hero: concentric arcs, a dot
   grid and a long sweep. Purely decorative, sits under the copy
   and the mockup, never intercepts a click. */
.hero-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-backdrop .illus {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1500px, 165%);
  transform: translate(-50%, -50%);
  opacity: 0.5;
}

/* Everything the reader actually reads sits above the backdrop. */
.hero-grid { position: relative; z-index: 1; }

/* A scene that carries a section rather than decorating it.
   Capped well below the text column so it never dominates. */
.section-illus {
  max-width: 560px;
  margin: 0 auto var(--space-7, 2.5rem);
}
.section-illus-sm   { max-width: 420px; }
.section-illus-wide { max-width: 660px; }

/* Sitting inside a .split, the scene replaces a mockup. */
.split-visual > .illus { max-width: 520px; margin-inline: auto; }


/* ------------------------------------------------------------
   PLACEMENTS — AUTH SCREENS
   The brand panel is a column: logo, pitch, foot. The scene
   belongs with the pitch, between the copy and the footnote,
   and is the first thing to go when the panel gets short.
   ------------------------------------------------------------ */
.auth-illus {
  max-width: 286px;
  margin-top: var(--space-6, 2rem);
}

/* .auth-brand is a space-between column of three children. Putting a
   scene in the pitch is only safe while the whole column still fits
   the viewport -- past that the panel grows, the page scrolls, and the
   sign-in form stops being the first thing on screen. Below this
   height the scene is the part that goes. */
@media (max-height: 860px) {
  .auth-illus { display: none; }
}


/* ------------------------------------------------------------
   MOTION
   One shared idle: the focal badge of a scene breathes. Anything
   marked .il-float drifts. Both stop dead under reduced motion.
   ------------------------------------------------------------ */
@keyframes il-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes il-draw {
  from { stroke-dashoffset: 240; }
  to   { stroke-dashoffset: 0; }
}

.illus .il-float {
  animation: il-float 6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.illus .il-float-slow { animation-duration: 8.5s; animation-delay: -2.5s; }

@media (prefers-reduced-motion: reduce) {
  .illus .il-float,
  .illus .il-float-slow {
    animation: none !important;
    transform: none !important;
  }
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .section-illus { max-width: 440px; }
  .hero-backdrop .illus { opacity: 0.35; }
}

@media (max-width: 620px) {
  .auth-illus { display: none; }
  :root { --il-stroke: 2.4; }   /* holds up when the art shrinks */
}

/* ------------------------------------------------------------
   FLAT ILLUSTRATIONS
   ------------------------------------------------------------
   Clean, flat scenes: muted greys and ink, real skin tones, one
   purple accent. Every fill is a class bound to a variable so the
   whole scene re-themes from this one block.
   ------------------------------------------------------------ */
.fl {
  --fl-acc:      #9B5DE5;
  --fl-acc-dark: #7B3FD4;
  --fl-tint:     #DCCBF7;
  --fl-ok:       #06B88A;
  --fl-ink:      #2F2E41;
  --fl-ink2:     #3F3D56;
  --fl-wall:     #FFFFFF;
  --fl-grey:     #E6E6E6;
  --fl-window:   #EFE8FC;
  --fl-blob:     #F3ECFD;
  --fl-shirt:    #FFC857;
  --fl-skin1:    #8B5A3C;
  --fl-skin2:    #C68642;
  --fl-skin3:    #E8B48A;
  --fl-teal:     #22B5D9;
  --fl-teal-dark:#1590B0;
  --fl-coral:    #FF8A65;
  --fl-coral-dark:#E06C48;
  --fl-amber:    #F5A524;
  --fl-hair-grey:#C9C7D6;
  --fl-wall-dk:  #3F3D56;
  display: block;
  width: 100%;
  height: auto;
}

.f-acc      { fill: var(--fl-acc); }
.f-acc-dark { fill: var(--fl-acc-dark); }
.f-tint     { fill: var(--fl-tint); }
.f-ok       { fill: var(--fl-ok); }
.f-ink      { fill: var(--fl-ink); }
.f-ink2     { fill: var(--fl-ink2); }
.f-wall     { fill: var(--fl-wall); }
.f-grey     { fill: var(--fl-grey); }
.f-window   { fill: var(--fl-window); }
.f-blob     { fill: var(--fl-blob); }
.f-shirt    { fill: var(--fl-shirt); }
.f-skin1    { fill: var(--fl-skin1); }
.f-skin2    { fill: var(--fl-skin2); }
.f-skin3    { fill: var(--fl-skin3); }
.f-teal     { fill: var(--fl-teal); }
.f-teal-dark{ fill: var(--fl-teal-dark); }
.f-coral    { fill: var(--fl-coral); }
.f-coral-dark { fill: var(--fl-coral-dark); }
.f-amber    { fill: var(--fl-amber); }
.f-hair-grey{ fill: var(--fl-hair-grey); }
.f-wall-dk  { fill: var(--fl-wall-dk); }

/* Cards in a scene get the faint edge a white card needs on a
   white-ish blob. */
.fl rect.f-wall[rx="12"],
.fl rect.f-wall[rx="10"] { stroke: var(--fl-grey); stroke-width: 1.5; }

:root[data-theme="dark"] .fl {
  --fl-tint:   #4A3A78;
  --fl-ink:    #4A4872;
  --fl-ink2:   #8E8BB0;
  --fl-wall:   #1B2338;
  --fl-grey:   #2B3552;
  --fl-window: #2E2A52;
  --fl-blob:   rgba(155, 93, 229, 0.10);
}