/* Marius Meadow: tokens.

   Layered on the brand's tokens (brand/tokens/tokens.css), never instead of them: import
   that first, then this. Meadow adds the sky, the cloud and the field, the grain, and the
   drift. Its type is the brand's (Trame Sérif, Inter). The day meadow is the light theme,
   the night meadow the dark one, switched the brand's way (data-theme, or the OS). The
   same values are in meadow.json and in the engine (engine/meadow-field.js, PALETTES). */

:root {
  /* The sky. The zenith is the brand blue: Meadow starts where Marius already is. */
  --meadow-zenith: #0067ff;
  --meadow-sky: #3f8cfa;
  --meadow-haze: #bcd8fb;

  /* The cloud */
  --meadow-cloud: #fbfaf6;
  --meadow-cloud-shade: #bcc8dc;
  --meadow-cloud-deep: #8497b6;

  /* The field, lit to shaded */
  --meadow-blade: #9bd85a;
  --meadow-grass: #78c234;
  --meadow-shade: #2b761e;
  --meadow-loam: #0e2414;

  /* Words on the meadow: on the sky, and on the grass */
  --meadow-on-sky: #fbfaf6;
  --meadow-on-field: #0e2414;

  /* The sky, as one gradient, for a page or a card's ground */
  --meadow-gradient-sky: linear-gradient(180deg, var(--meadow-zenith) 0%, var(--meadow-sky) 55%, var(--meadow-haze) 100%);

  /* Texture: how much grain and canvas weave sit over a Meadow picture (0 … 0.3) */
  --meadow-grain: 0.1;
  --meadow-stipple: 0.05;
  --meadow-weave: 0;

  /* Drift: Meadow's motion. Sine curves, slow loops, gusts that build and settle. No
     bounce, ever (the brand's --ease-standard is for the product's UI, not for Meadow). */
  --meadow-ease-drift: cubic-bezier(0.37, 0, 0.63, 1);
  --meadow-ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1);
  --meadow-ease-lift: cubic-bezier(0.55, 0, 0.75, 0.3);
  --meadow-duration-gust: 2400ms;
  --meadow-duration-drift: 9000ms;
  --meadow-duration-loop: 11000ms;

  /* Type on the meadow: large and airy */
  --meadow-display: clamp(48px, 8vw, 128px);
  --meadow-display-leading: 1.04;
  --meadow-display-tracking: -0.02em;
}

/* The night meadow */
[data-theme="dark"] {
  --meadow-zenith: #03050a;
  --meadow-sky: #0a1326;
  --meadow-haze: #1d2f52;
  --meadow-cloud: #b4c2dc;
  --meadow-cloud-shade: #4a5a7a;
  --meadow-cloud-deep: #26324b;
  --meadow-blade: #7fa6d9;
  --meadow-grass: #14322a;
  --meadow-shade: #0a1f1a;
  --meadow-loam: #04090a;
  --meadow-on-sky: #eef3ff;
  --meadow-on-field: #eef3ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --meadow-zenith: #03050a;
    --meadow-sky: #0a1326;
    --meadow-haze: #1d2f52;
    --meadow-cloud: #b4c2dc;
    --meadow-cloud-shade: #4a5a7a;
    --meadow-cloud-deep: #26324b;
    --meadow-blade: #7fa6d9;
    --meadow-grass: #14322a;
    --meadow-shade: #0a1f1a;
    --meadow-loam: #04090a;
    --meadow-on-sky: #eef3ff;
    --meadow-on-field: #eef3ff;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --meadow-duration-gust: 0ms;
    --meadow-duration-drift: 0ms;
  }
}