/* ============================================================================
   CATALYST — WATERCOLOR SYSTEM  ·  watercolor.css
   ----------------------------------------------------------------------------
   A pure CSS + SVG recipe for hyper-real watercolour, with NO image files.
   Everything here is generative: paper grain, pigment blooms, granulation,
   wet edges and gold leaf are all produced in code so any hue can plug in.

   The system has five "ingredients" — each is documented in the Brand Manual
   alongside live demos. This stylesheet is the single source of truth.

   Dependencies: the inline <svg> filter defs that ship in the HTML
   (#wc-edge, #wc-edge-soft, #wc-edge-rough). Keep them in the document.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0 · TOKENS
   --------------------------------------------------------------------------*/
:root {
  color-scheme: light;

  /* — Paper & ink — the only fixed brand colours ——————————————— */
  --paper:        #f4eddd;               /* warm cream canvas             */
  --paper-deep:   #ece1cb;               /* shadowed paper / wells        */
  --paper-edge:   #e4d6bb;               /* torn-edge, dividers           */
  --ink:          #2c2722;               /* near-black warm ink (text)    */
  --ink-soft:     #5b5347;               /* secondary text                */
  --ink-faint:    #8c8472;               /* captions, meta                */
  --hairline:     #d8c9ad;               /* crisp 1px lines on paper      */

  /* — Pigments — a flexible set. Topics map onto these later. ————— */
  --pig-indigo:   #2f4e86;
  --pig-teal:     #1f8a86;
  --pig-amber:    #d4912b;
  --pig-coral:    #d2674c;
  --pig-rose:     #b14e7c;
  --pig-plum:     #6b4a93;
  --pig-sage:     #6f8a4f;

  /* The "active pigment" — components read this. Re-set it per topic:
     e.g. <section style="--pigment: var(--pig-teal)"> … </section>          */
  --pigment:      var(--pig-indigo);

  /* — Gold leaf metallic accent (the one luxe move) ————————————— */
  --gold-1:       #9a7b2e;
  --gold-2:       #e9cd7a;
  --gold-3:       #b8902f;
  --gold-4:       #fff2c4;

  /* — Watercolour engine controls ——————————————————————————— */
  --wc-blend:     multiply;   /* light mode: pigment soaks INTO paper        */
  --wc-grain:     0.5;        /* paper grain strength (0–1)                  */
  --wc-edge:      url(#wc-edge);

  /* — Geometry / motion —————————————————————————————————————— */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px;
  --ease-paint: cubic-bezier(.22,.61,.36,1);
}

/* — Dark mode: "wet ink". Pigments now GLOW on a deep wet ground, so they
     must lighten the background instead of darkening it. ———————————————— */
:root.dark {
  color-scheme: dark;
  --paper:      #15181d;     /* deep wet-ink ground             */
  --paper-deep: #1c2027;
  --paper-edge: #262b34;
  --ink:        #ece3d2;     /* warm bone text                  */
  --ink-soft:   #b3ab9b;
  --ink-faint:  #837c6f;
  --hairline:   #2e333d;

  /* pigments lifted in luminosity so they sing on the dark ground */
  --pig-indigo: #6f93d8;
  --pig-teal:   #46c3bd;
  --pig-amber:  #ecbb5c;
  --pig-coral:  #e88a72;
  --pig-rose:   #dd7cab;
  --pig-plum:   #a98ad6;
  --pig-sage:   #a4c074;

  --wc-blend:   screen;      /* pigment glows OUT of the dark ground */
  --wc-grain:   0.6;
}

/* ----------------------------------------------------------------------------
   1 · PAPER  — the cream ground with cold-press grain.
   Two layers: a soft warmth field + a generative fibre/tooth noise.
   The noise is a data-URI feTurbulence so it costs zero requests.
   --------------------------------------------------------------------------*/
.wc-paper {
  background-color: var(--paper);
  background-image:
    /* gentle uneven warmth, like light across a sheet */
    radial-gradient(120% 90% at 18% 0%,  #fff7ea 0%, transparent 55%),
    radial-gradient(120% 90% at 100% 100%, var(--paper-deep) 0%, transparent 60%),
    /* the paper tooth */
    var(--paper-noise);
  background-blend-mode: normal, normal, multiply;
}
:root.dark .wc-paper {
  background-image:
    radial-gradient(120% 90% at 18% 0%,  #20252e 0%, transparent 55%),
    radial-gradient(120% 90% at 100% 100%, #0e1014 0%, transparent 60%),
    var(--paper-noise);
  background-blend-mode: normal, normal, soft-light;
}

/* The generative grain. Set once; opacity driven by --wc-grain.
   (Defined as a custom prop so .wc-paper can blend it.)                      */
:root {
  --paper-noise:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/></svg>");
}

/* ----------------------------------------------------------------------------
   2 · THE BLOOM  — a single pigment wash.
   A radial-gradient blob is pushed through an feDisplacementMap so its edges
   tear and feather like wet pigment hitting paper. mix-blend-mode lets washes
   build on top of one another (ingredient 3).
   --------------------------------------------------------------------------*/
.wc {
  --pig: var(--pigment);
  position: relative;
  background:
    radial-gradient(60% 60% at 42% 38%,
      var(--pig) 0%,
      color-mix(in oklab, var(--pig), transparent 22%) 42%,
      color-mix(in oklab, var(--pig), transparent 62%) 66%,
      transparent 80%);
  filter: var(--wc-edge);
  mix-blend-mode: var(--wc-blend);
  /* organic, never-circular silhouette */
  border-radius: 54% 62% 58% 46% / 56% 48% 62% 52%;
  isolation: isolate;
}

/* Pale wash variant — lots of water, low pigment load */
.wc--pale {
  background:
    radial-gradient(62% 58% at 45% 40%,
      color-mix(in oklab, var(--pig), transparent 55%) 0%,
      color-mix(in oklab, var(--pig), transparent 78%) 55%,
      transparent 82%);
}

/* Deep wash — heavy pigment, used sparingly for emphasis */
.wc--deep {
  background:
    radial-gradient(58% 56% at 40% 36%,
      color-mix(in oklab, var(--pig), black 14%) 0%,
      var(--pig) 38%,
      color-mix(in oklab, var(--pig), transparent 55%) 70%,
      transparent 82%);
}

/* Rough / splashy edge for hero washes */
.wc--rough { filter: url(#wc-edge-rough); }
/* Tighter edge for small elements & icons */
.wc--soft  { filter: url(#wc-edge-soft); }

/* — SHAPE VARIANTS — break out of the circle. ————————————————————————
   The blob silhouette reads as a circle once feathered. These give bands,
   strips and a strongly torn organic for variety in compositions.            */
.wc--band {              /* wide horizontal wash — headers, banners */
  border-radius: 30% 28% 32% 26% / 60% 64% 56% 62%;
  background:
    radial-gradient(80% 120% at 30% 45%,
      var(--pig) 0%,
      color-mix(in oklab, var(--pig), transparent 30%) 48%,
      transparent 78%);
}
.wc--strip {             /* thin painted streak — rules, underlines, the gold line */
  border-radius: 50% / 60%;
  background: linear-gradient(90deg,
    transparent 0%, var(--pig) 14%, var(--pig) 86%, transparent 100%);
}
.wc--organic {           /* heavily torn, asymmetric — illustration moments */
  border-radius: 38% 62% 56% 44% / 64% 40% 60% 36%;
}

/* — FILL PATTERN — the workhorse for UI. ————————————————————————————
   Clip an OVERSIZED layered wash inside a real UI shape (card, header, tile)
   so the silhouette is the component and the paint is the texture within.
   This is why the session card reads as product, not as a circle.
   <div class="wc-fill" style="--pig:var(--pig-sage)">
     <span class="wc wc--rough"></span><span class="wc wc--rough"></span>
   </div>                                                                     */
.wc-fill { position: relative; overflow: hidden; isolation: isolate; }
.wc-fill > .wc { position: absolute; }
.wc-fill > .wc:nth-child(1) { inset: -40% -25% auto -30%; height: 150%;
  transform: rotate(-4deg); }
.wc-fill > .wc:nth-child(2) { inset: auto -30% -45% -20%; height: 140%;
  transform: rotate(5deg); opacity: .85;
  --pig: color-mix(in oklab, var(--pigment), black 12%); }
.wc-fill > .wc:nth-child(3) { inset: -20% -40% -20% auto; width: 70%;
  --pig: color-mix(in oklab, var(--pigment), white 16%); opacity: .7; }

/* ----------------------------------------------------------------------------
   3 · PIGMENT BUILD-UP  — layered washes.
   .wc-wash is a stage that holds 2–3 .wc layers. Because each layer multiplies
   (or screens, in dark), overlaps darken/intensify exactly like real glazing.
   --------------------------------------------------------------------------*/
.wc-wash { position: relative; isolation: isolate; }
.wc-wash > .wc { position: absolute; inset: -6% ; }
.wc-wash > .wc:nth-child(1) { transform: translate(-4%, 2%)  rotate(-3deg) scale(1.02); }
.wc-wash > .wc:nth-child(2) { transform: translate( 6%, -3%) rotate(4deg)  scale(.96); opacity: .9; }
.wc-wash > .wc:nth-child(3) { transform: translate( 1%, 5%)  rotate(-1deg) scale(.9);  opacity: .8; }

/* ----------------------------------------------------------------------------
   4 · EDGE BLOOM + GRANULATION
   Real watercolour does NOT darken evenly around the rim — pigment collects
   where the puddle dries last: at a couple of edges and a low corner. So the
   bloom is intentionally UNEVEN — two off-centre pools, not a ring. Each
   composition reseeds, so no two washes pool the same way.
   --------------------------------------------------------------------------*/
.wc--bloom::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    /* main pool, low-right */
    radial-gradient(58% 44% at 80% 86%,
      color-mix(in oklab, var(--pig), black 28%) 0%, transparent 56%),
    /* secondary pool, lower-left */
    radial-gradient(46% 40% at 16% 74%,
      color-mix(in oklab, var(--pig), black 18%) 0%, transparent 52%);
  filter: var(--wc-edge);
  mix-blend-mode: multiply;
  opacity: .7;
}
:root.dark .wc--bloom::after { mix-blend-mode: screen; opacity: .5; }
/* Direction modifiers — point the pooling where the layout wants it */
.wc--bloom.pool-tl::after { background:
  radial-gradient(56% 44% at 18% 16%, color-mix(in oklab,var(--pig),black 28%) 0%, transparent 56%),
  radial-gradient(44% 40% at 70% 30%, color-mix(in oklab,var(--pig),black 16%) 0%, transparent 52%); }
.wc--bloom.pool-r::after { background:
  radial-gradient(46% 70% at 90% 52%, color-mix(in oklab,var(--pig),black 26%) 0%, transparent 54%),
  radial-gradient(40% 44% at 70% 88%, color-mix(in oklab,var(--pig),black 16%) 0%, transparent 52%); }
.wc--bloom.pool-b::after { background:
  radial-gradient(70% 42% at 50% 92%, color-mix(in oklab,var(--pig),black 26%) 0%, transparent 56%),
  radial-gradient(40% 36% at 22% 70%, color-mix(in oklab,var(--pig),black 15%) 0%, transparent 52%); }

/* Optional granulation freckle laid over any wash (subtle) */
.wc--grain { position: relative; }
.wc--grain::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background-image: var(--paper-noise);
  background-size: 140px 140px;
  mix-blend-mode: multiply;
  opacity: calc(var(--wc-grain) * 0.5);
  filter: var(--wc-edge);
}

/* ----------------------------------------------------------------------------
   5 · GOLD LEAF  — the single metallic accent. STATIC. Used rarely.
   Animated sheen was removed on purpose: in a calm learning context it reads
   as gaudy. Gold is now a quiet, still highlight — a hairline, a small fleck,
   or a wordmark on a cover. Never a large fill, never moving.
   --------------------------------------------------------------------------*/
.gold {
  background:
    linear-gradient(118deg,
      var(--gold-1) 0%, var(--gold-3) 26%, var(--gold-2) 46%,
      var(--gold-4) 54%, var(--gold-3) 70%, var(--gold-1) 100%);
}
.gold--leaf { filter: url(#wc-edge-soft); border-radius: 48% 56% 52% 50% / 54% 50% 56% 48%; }
/* the preferred gold usage: a fine hand-laid rule */
.gold-rule {
  height: 2px; border: 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-3) 18%, var(--gold-4) 50%, var(--gold-3) 82%, transparent);
  filter: url(#wc-edge-soft);
}

.gold-text {
  background:
    linear-gradient(118deg,
      var(--gold-1) 0%, var(--gold-3) 24%, var(--gold-2) 46%,
      var(--gold-4) 54%, var(--gold-3) 72%, var(--gold-1) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ----------------------------------------------------------------------------
   6 · MOTION  — "bloom in": pigment spreading on wet paper.
   Scale + clip + fade, on the paint easing. Cheap, GPU-friendly.
   --------------------------------------------------------------------------*/
@keyframes wc-bloom-in {
  from { opacity: 0; transform: scale(.86); filter: var(--wc-edge) blur(6px); }
  to   { opacity: 1; transform: scale(1);   filter: var(--wc-edge) blur(0);   }
}
.wc-bloom-in { animation: wc-bloom-in 1.1s var(--ease-paint) both; }
@media (prefers-reduced-motion: reduce) {
  .wc-bloom-in { animation: none; }
}

/* ----------------------------------------------------------------------------
   7 · CRISP UI ON PAPER — controls stay legible (never painted text).
   These are the "do" patterns: watercolour lives behind, controls read clean.
   --------------------------------------------------------------------------*/
.wc-chip {
  display: inline-flex; align-items: center; gap: .5em;
  font: 600 .82rem/1 var(--font-sans, system-ui);
  letter-spacing: .02em;
  padding: .5em .85em; border-radius: 999px;
  color: color-mix(in oklab, var(--pigment), var(--ink) 55%);
  background: color-mix(in oklab, var(--pigment), var(--paper) 80%);
  border: 1px solid color-mix(in oklab, var(--pigment), transparent 70%);
}