/* Yudicon — "YUD Visual" background system
 * ---------------------------------------------------------------------------
 * The brand visual is a soft, atmospheric MESH GRADIENT — organic blobs that
 * always move between three families: deep sea BLUE, cool GREY/silver and a
 * warm CORAL/peach. Colours vary strongly from field to field, but the trio
 * is constant. A fine paper-grain ("etwas Noise") sits on top via color-burn.
 *
 * Reference: Figma "YUD_Visual-clean / -grainy" (node 385:715 / 343:2330).
 *
 * The field is driven by --vis-* tokens so a single field can be re-tinted
 * without touching the gradient geometry. Base values live on :root; the
 * colourways are [data-vis] theme scopes.
 *
 * Usage:
 *   <div class="yud-visual"><div class="yud-grain"></div> …content… </div>
 *   colourways: data-vis="silver" (grey-led) · "coral" (warm-led)
 *               "deep" (dark sea). "brown" is a legacy alias of "coral".
 */
:root {
  /* Canonical blue · grey · coral mesh (matches YUD_Visual-clean) */
  --vis-navy:       #1f3147;
  --vis-blue:       #38506b;
  --vis-coral:      #cf9d7e;
  --vis-coral-deep: #9f6f56;
  --vis-silver:     #c3c9cf;
  --vis-mist:       #93a4b5;
  --vis-base:       #4a5e73;
  --vis-grain:      0.55; /* grain overlay opacity multiplier */
}

.yud-visual {
  position: relative;
  isolation: isolate;
  background-color: var(--vis-base);
  background-image:
    /* coral diffuse mass, upper-left of centre */
    radial-gradient(58% 52% at 41% 23%, var(--vis-coral)      0%, transparent 58%),
    /* warmer depth tucked under the coral */
    radial-gradient(42% 40% at 21% 42%, var(--vis-coral-deep) 0%, transparent 62%),
    /* cool silver wash down the right */
    radial-gradient(56% 64% at 91% 44%, var(--vis-silver)     0%, transparent 63%),
    /* deep navy in the top-left corner */
    radial-gradient(46% 44% at 3% 5%,   var(--vis-navy)       0%, transparent 55%),
    /* sea-blue rising from bottom-left */
    radial-gradient(58% 52% at 1% 97%,  var(--vis-blue)       0%, transparent 60%),
    /* blue-grey mist along the bottom */
    radial-gradient(78% 46% at 57% 105%, var(--vis-mist)      0%, transparent 60%),
    /* base diagonal wash */
    linear-gradient(135deg, var(--vis-blue) 0%, var(--vis-base) 52%, var(--vis-mist) 100%);
  color: var(--text-on-dark, #F4F4F4);
}

/* Grey-led: silver dominant, coral kept as a quiet accent (light surfaces) */
[data-vis="silver"] {
  --vis-navy:       #aeb6bf;
  --vis-blue:       #c2c8ce;
  --vis-coral:      #d8b6a2;
  --vis-coral-deep: #c49f88;
  --vis-silver:     #e6e8ea;
  --vis-mist:       #b9c0c7;
  --vis-base:       #d2d6da;
  color: var(--yud-sea, #244061);
}

/* Warm-led: coral forward, blue + grey supporting */
[data-vis="coral"],
[data-vis="brown"] {
  --vis-navy:       #5d4636;
  --vis-blue:       #6f8298;
  --vis-coral:      #d9a585;
  --vis-coral-deep: #b07a5c;
  --vis-silver:     #c9cdd0;
  --vis-mist:       #9a8576;
  --vis-base:       #9a7b66;
  color: var(--text-on-dark, #F4F4F4);
}

/* Deep sea: dark, low-key — blue dominant with a faint coral ember */
[data-vis="deep"] {
  --vis-navy:       #142435;
  --vis-blue:       #213a54;
  --vis-coral:      #6f4f3e;
  --vis-coral-deep: #4a3a30;
  --vis-silver:     #4c5f72;
  --vis-mist:       #2c4660;
  --vis-base:       #1c3149;
  --vis-grain:      0.6;
  color: var(--text-on-dark, #F4F4F4);
}

/* Grain overlay — add as the FIRST child of any .yud-visual
 * NOTE: path points at ../../img/ — the only change from the design-system
 * original, which resolves it as ../assets/textures/grain.jpg.
 */
.yud-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("../../img/grain.jpg") center / cover repeat;
  mix-blend-mode: color-burn;
  opacity: var(--vis-grain, 0.55);
  z-index: 0;
}
.yud-visual > *:not(.yud-grain) { position: relative; z-index: 1; }