/* ------------------------------------------------------------------ *
 * Råsta Lake — Gradient tokens (+ grain)
 * ------------------------------------------------------------------ *
 * The three vertical ramps and 15% monochrome noise mirror the design
 * manual. Components consume the gradient utilities or CSS variables.
 * ------------------------------------------------------------------ */

:root {
  --rl-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");

  --gradient-brand: linear-gradient(
    to bottom,
    var(--rl-brand-ink) 0%,
    var(--rl-gradient-deep) 18.2688%,
    var(--rl-gradient-lake) 37.9806%,
    var(--rl-gradient-cyan) 60.0963%,
    var(--rl-gradient-aqua) 81.2505%,
    var(--rl-brand-surface) 100%
  );

  --gradient-deep: linear-gradient(
    to bottom,
    var(--rl-brand-ink) 0%,
    var(--rl-gradient-deep) 50%,
    var(--rl-gradient-lake) 100%
  );

  --gradient-lake: linear-gradient(
    to bottom,
    var(--rl-gradient-lake) 0%,
    var(--rl-gradient-deep) 50%,
    var(--rl-brand-ink) 100%
  );
}

@utility gradient-brand {
  background-image: var(--rl-noise), var(--gradient-brand);
  background-size: 160px 160px, auto;
  background-blend-mode: multiply, normal;
}

@utility gradient-deep {
  background-image: var(--rl-noise), var(--gradient-deep);
  background-size: 160px 160px, auto;
  background-blend-mode: multiply, normal;
}

@utility gradient-lake {
  background-image: var(--rl-noise), var(--gradient-lake);
  background-size: 160px 160px, auto;
  background-blend-mode: multiply, normal;
}