/* korriwan.com: every colour, the type and the measures the page is built from, as custom properties.
   Day is in :root. Dusk is written twice, once for the system's setting and once for the button, and the
   two blocks hold the same values: change them together. tests/styles/styles.test.js checks that they agree.

   This file is linked first, because it also names the order of the layers the other stylesheets fill.
   A later layer wins over an earlier one whatever the selectors, so a page's own rules have the last word
   over the header's and the clearing's, and those over a component's. */
@layer tokens, base, components, clearing, header, page;

@layer tokens {
  :root {
    color-scheme: light;

    /* ground and ink */
    --ground: #EDF2EE;
    --ink: #15211A;
    --ink-2: rgba(21, 33, 26, .68);
    --line: rgba(21, 33, 26, .11);
    --tint: .6;                 /* how tinted the glass is, from 0 (clear) to 1 (solid); the slider in the header sets it */
    --tint-mix: 17%;            /* a link's share of its fairy colour at that tint */
    --tint-mix-strong: 28%;
    --glass: rgba(244, 248, 244, calc(.12 + var(--tint) * .8));
    --glass-strong: rgba(248, 250, 247, calc(.34 + var(--tint) * .8));
    --sheen: rgba(255, 255, 255, .6);
    --shade: rgba(21, 33, 26, .24);
    --spark: #FFFFFF;
    --edge: #1D2823;
    --focus: #2C6A4F;

    /* the clearing */
    --sky-1: #CCD8F2;
    --sky-2: #E0EBEA;
    --sky-3: #F6E8DB;
    --sky-4: #F3EBDD;
    --ridge-1: #B6C7DA;
    --ridge-2: #9DBBB8;
    --ridge-3: #80A594;
    --ridge-4: #628A72;
    --orb: #FFFCEF;
    --orb-bloom: rgba(255, 238, 200, .95);
    --orb-far: rgba(255, 243, 220, .6);
    --mote: #B98E2E;
    --star: #F3F0FF;
    --night: 0;

    /* the butterflies: one for each Winx fairy, in her colours. The first colour of
       each set is her signature one; it also tints a link and the glow at dusk. */
    --bloom: #2FA4E7;
    --bloom-flame: #F26B21;
    --bloom-ember: #D62E2E;
    --bloom-gold: #FFC83D;
    --stella: #F7931E;
    --stella-gold: #FFD447;
    --stella-pink: #F06BA8;
    --flora: #F173AC;
    --flora-rose: #D23F8E;
    --flora-leaf: #56B947;
    --musa: #E1273D;
    --musa-magenta: #C3298E;
    --musa-night: #1F2B7A;
    --tecna: #9A6BE1;
    --tecna-green: #3FD18C;
    --tecna-pink: #E052A2;
    --aisha: #17B6A0;
    --aisha-aqua: #8DE8DC;
    --aisha-deep: #0C6C74;
    --aisha-pink: #F58EC4;
    --roxy: #8FD64F;
    --roxy-mint: #4FCFA0;
    --roxy-lime: #E6EE62;
    --roxy-berry: #C4409E;
    --roxy-plum: #4A2A7A;
    --roxy-pink: #F7A7CF;
    /* the pixies, each in the colours she wears */
    --lockette: #F25CA2;
    --lockette-deep: #B4247A;
    --lockette-teal: #2DB5A3;
    --lockette-sky: #A8DCF7;
    --lockette-key: #D4E552;
    --amore: #F9A9C6;
    --amore-wine: #A21D5B;
    --amore-rose: #E2334F;
    --amore-leaf: #5EBB66;
    --chatta: #F4A928;
    --chatta-mint: #A9E57A;
    --chatta-sky: #4AA8EA;
    --chatta-plum: #9A68D6;
    --tune: #C8A6F0;
    --tune-violet: #5C3BB0;
    --tune-blue: #4A7FE6;
    --tune-rose: #E052A6;
    --digit: #3A86E8;
    --digit-ice: #AEDDFF;
    --digit-deep: #1B3C9C;
    --digit-volt: #FFE24A;
    --piff: #E8689B;
    --piff-cream: #FFF0CF;
    --piff-wine: #9A2948;
    --cherie: #6A7BE0;
    --cherie-sky: #A9D6FA;
    --cherie-pink: #F8AFCB;
    --cherie-rose: #EE5A80;
    --cherie-sun: #F6D472;
    --cherie-mint: #8EDDA2;
    --caramel: #F28A2E;
    --caramel-toffee: #6E4322;
    --caramel-lime: #B8E245;
    --caramel-gold: #FFD64F;
    --caramel-candy: #F06BA8;
    /* the flowers along the foot of the clearing, in pastels that sit quietly against the land: their
       stems and leaves, then each kind's own colours. At dusk they take on some of the night: every
       one of these is mixed with --nightfall, by the share --veil, which is nothing by day. */
    --nightfall: #1B1D47;
    --veil: 0%;
    --stem: color-mix(in srgb, #7C9F86, var(--nightfall) var(--veil));
    --leaf: color-mix(in srgb, #AECFAC, var(--nightfall) var(--veil));
    --sakura: color-mix(in srgb, #FBDAE4, var(--nightfall) var(--veil));
    --sakura-heart: color-mix(in srgb, #EE9DBA, var(--nightfall) var(--veil));
    --sakura-twig: color-mix(in srgb, #A48A86, var(--nightfall) var(--veil));
    --bluebell: color-mix(in srgb, #A9C2F6, var(--nightfall) var(--veil));
    --bluebell-deep: color-mix(in srgb, #7F9BE3, var(--nightfall) var(--veil));
    --amaryllis: color-mix(in srgb, #F6BFD3, var(--nightfall) var(--veil));
    --amaryllis-deep: color-mix(in srgb, #EA98B6, var(--nightfall) var(--veil));
    --amaryllis-throat: color-mix(in srgb, #FFF7EE, var(--nightfall) var(--veil));
    --amaryllis-anther: color-mix(in srgb, #9A5C72, var(--nightfall) var(--veil));
    --amaryllis-stem: color-mix(in srgb, #A98A97, var(--nightfall) var(--veil));
    --hortensia: color-mix(in srgb, #B7BCF2, var(--nightfall) var(--veil));
    --hortensia-lilac: color-mix(in srgb, #CEB7EE, var(--nightfall) var(--veil));
    --hortensia-deep: color-mix(in srgb, #9390D6, var(--nightfall) var(--veil));
    /* the signs: the infinity's two colours, the schnauzer's silver, the beagle's brownish orange and the ducks' white */
    --sign-blue: #3F9BE2;
    --sign-pink: #E85FA3;
    --sign-silver: #7F8A9C;
    --sign-amber: #BF7235;
    --sign-white: #FFFFFF;
    --halo-o: .12;

    /* type: Apple's 17-point body under a storybook serif */
    --display: "Cormorant Infant", "Cormorant Garamond", ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

    --gutter: clamp(20px, 5vw, 40px);
    --column: 1040px;
    --land: clamp(210px, 28vw, 320px);
    --ease: cubic-bezier(.2, .8, .2, 1);

    /* frosted glass, shared by the links, the toggles and the footer bar */
    --frost: blur(18px) saturate(1.6);
    --lift: inset 0 1px 0 var(--sheen), 0 10px 24px -16px var(--shade);
    --under: 400px;   /* how far the sky and land run on below the clearing, behind the footer bar */
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground: #0D1512;
      --ink: #EAF0EA;
      --ink-2: rgba(234, 240, 234, .7);
      --line: rgba(234, 240, 234, .12);
      --glass: rgba(16, 25, 21, calc(.08 + var(--tint) * .7));
      --glass-strong: rgba(19, 29, 25, calc(.32 + var(--tint) * .7));
      --sheen: rgba(255, 255, 255, .12);
      --shade: rgba(2, 5, 4, .6);
      --edge: #141A30;
      --focus: #8FE3CF;
      --sky-1: #0C122E;
      --sky-2: #24224A;
      --sky-3: #523E5E;
      --sky-4: #87596A;
      --ridge-1: #3A345C;
      --ridge-2: #2A2C4B;
      --ridge-3: #1B2637;
      --ridge-4: #121E21;
      --veil: 30%;
      --orb: #F2F0E4;
      --orb-bloom: rgba(170, 162, 255, .22);
      --orb-far: rgba(150, 140, 255, .1);
      --mote: #F7E8A6;
      --sign-blue: #9BD6FF;
      --sign-pink: #FFA6D1;
      --sign-silver: #DCE2EC;
      --sign-amber: #F0A868;
      --night: 1;
      --halo-o: .36;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --ground: #0D1512;
    --ink: #EAF0EA;
    --ink-2: rgba(234, 240, 234, .7);
    --line: rgba(234, 240, 234, .12);
    --glass: rgba(16, 25, 21, calc(.08 + var(--tint) * .7));
    --glass-strong: rgba(19, 29, 25, calc(.32 + var(--tint) * .7));
    --sheen: rgba(255, 255, 255, .12);
    --shade: rgba(2, 5, 4, .6);
    --edge: #141A30;
    --focus: #8FE3CF;
    --sky-1: #0C122E;
    --sky-2: #24224A;
    --sky-3: #523E5E;
    --sky-4: #87596A;
    --ridge-1: #3A345C;
    --ridge-2: #2A2C4B;
    --ridge-3: #1B2637;
    --ridge-4: #121E21;
    --veil: 30%;
    --orb: #F2F0E4;
    --orb-bloom: rgba(170, 162, 255, .22);
    --orb-far: rgba(150, 140, 255, .1);
    --mote: #F7E8A6;
    --sign-blue: #9BD6FF;
    --sign-pink: #FFA6D1;
    --sign-silver: #DCE2EC;
    --sign-amber: #F0A868;
    --night: 1;
    --halo-o: .36;
    color-scheme: dark;
  }
}