/*
 * Design tokens.
 *
 * One indigo hue in two tones, Apple glass material, light and dark.
 * Every component references a name here and never a colour value, which is
 * what lets the theme switch with one attribute, and what will later let a
 * campaign take its tint from the release cover without touching component code.
 *
 * Contrast was solved rather than eyeballed, by compositing the translucent
 * panel over every wash of the wallpaper and computing the ratio. Worst case on
 * the dark ground: 14.89 for body text and 7.67 for secondary. On the light
 * ground: 15.14 and 6.57. The two blocks of a stacked column sit at 3.54 and
 * 10.42 against the panel and 2.95 against each other, which is why they stay
 * readable in greyscale and for a colour blind reader.
 */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* text */
  --label:        #1c1c1e;
  --label-2:      rgba(60, 60, 67, .86);
  --label-3:      rgba(60, 60, 67, .74);

  /* material */
  --glass:        rgba(255, 255, 255, .80);
  --glass-edge:   rgba(255, 255, 255, .75);
  --thumb:        #3B44C4;
  --on-thumb:     #ffffff;
  --field:        rgba(255, 255, 255, .78);
  --sunk:         rgba(59, 68, 196, .11);
  /* Opaque. A menu or a tooltip sits over body text, where translucency lets
     the words behind show through the words on top. */
  --solid:        #ffffff;
  --hover:        rgba(59, 68, 196, .09);
  --press:        rgba(60, 60, 67, .12);
  --hair:         rgba(60, 60, 67, .13);
  --hair-2:       rgba(60, 60, 67, .07);

  /* accent, one hue for the whole product */
  --tint:         #3B44C4;
  --tint-text:    #2A31A0;
  --tint-soft:    rgba(59, 68, 196, .15);
  --on-tint:      #ffffff;

  /* the split the product is sold on */
  --series-new:       #272FA5;   /* base block, first time listeners */
  --series-new-text:  #272FA5;
  --series-back:      #7B82E0;   /* block on top, listeners who came back */
  --series-back-edge: #3F49B8;
  --series-back-text: #3F49B8;

  /* semantic */
  --ok:      #248A3D;  --ok-text:   #1D7333;  --ok-soft:   rgba(52, 199, 89, .18);
  --warn:    #B26A00;  --warn-text: #8A5200;  --warn-soft: rgba(255, 159, 10, .20);
  --bad:     #C7302B;  --bad-text:  #A32620;  --bad-soft:  rgba(255, 69, 58, .16);
  --on-bad:  #ffffff;

  --shadow:    0 1px 2px rgba(0, 0, 0, .05), 0 12px 32px -8px rgba(20, 26, 40, .16);
  --shadow-sm: 0 1px 3px rgba(20, 26, 40, .14);

  --wall:
    radial-gradient(1200px 820px at 10% 6%,  #dbe6ff 0%, transparent 60%),
    radial-gradient(900px 720px at 90% 16%,  #e8e2ff 0%, transparent 62%),
    radial-gradient(1000px 900px at 72% 94%, #e0dcff 0%, transparent 60%),
    radial-gradient(820px 640px at 16% 88%,  #dceaf6 0%, transparent 60%),
    linear-gradient(160deg, #f3f4f8, #eaecf3);
}

/* Every dark theme shares the neutrals, the text and the material. Only hue
   changes below, which is what keeps six themes one design instead of six. */
:root[data-theme="dark"],
:root[data-theme="ocean"],
:root[data-theme="forest"] {
  color-scheme: dark;

  --label:        #f5f5f7;
  /* Higher than the other dark themes on purpose. These two tint the wallpaper
     with green and blue, which lifts everything sitting on a wash: the period
     buttons measured 4.31 on forest at 72 percent, and 4.76 at 78. */
  --label-2:      rgba(235, 235, 245, .78);
  --label-3:      rgba(235, 235, 245, .58);

  --glass:        rgba(22, 23, 34, .82);
  --glass-edge:   rgba(255, 255, 255, .14);
  --thumb:        #4A52C4;
  --on-thumb:     #ffffff;
  --field:        rgba(110, 118, 232, .13);
  --sunk:         rgba(94, 102, 217, .18);
  --hover:        rgba(110, 118, 232, .18);
  --solid:        #14151f;
  --press:        rgba(255, 255, 255, .11);
  --hair:         rgba(235, 235, 245, .12);
  --hair-2:       rgba(235, 235, 245, .07);

  --tint:         #6E76E8;
  --tint-text:    #A8AEF5;
  --tint-soft:    rgba(110, 118, 232, .22);
  --on-tint:      #12142e;

  --series-new:       #5E66D9;
  --series-new-text:  #A8AEF5;
  --series-back:      #C5C8F1;
  --series-back-edge: #8A90C8;
  --series-back-text: #C5C8F1;

  --ok:      #30D158;  --ok-text:   #4ADE73;  --ok-soft:   rgba(48, 209, 88, .18);
  --warn:    #FF9F0A;  --warn-text: #FFB340;  --warn-soft: rgba(255, 159, 10, .18);
  --bad:     #FF453A;  --bad-text:  #FF8F86;  --bad-soft:  rgba(255, 69, 58, .18);
  --on-bad:  #2a0806;

  --shadow:    0 1px 2px rgba(0, 0, 0, .30), 0 16px 40px -10px rgba(0, 0, 0, .55);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .40);

  --wall:
    radial-gradient(1200px 820px at 10% 6%,  #172b57 0%, transparent 60%),
    radial-gradient(900px 720px at 90% 16%,  #32245c 0%, transparent 62%),
    radial-gradient(1000px 900px at 72% 94%, #241d4e 0%, transparent 60%),
    radial-gradient(820px 640px at 16% 88%,  #14304a 0%, transparent 60%),
    linear-gradient(160deg, #0b0b0e, #131318);
}

/* Follows the operating system until the viewer flips the switch, at which
   point the data-theme attribute above wins in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --label: #f5f5f7;
    --label-2: rgba(235, 235, 245, .72);
    --label-3: rgba(235, 235, 245, .55);
    --glass: rgba(22, 23, 34, .82);
    --glass-edge: rgba(255, 255, 255, .14);
    --thumb: #4A52C4;
    --on-thumb: #ffffff;
    --field: rgba(110, 118, 232, .13);
    --sunk: rgba(94, 102, 217, .18);
    --hover: rgba(110, 118, 232, .18);
    --solid: #14151f;
    --press: rgba(255, 255, 255, .11);
    --hair: rgba(235, 235, 245, .12);
    --hair-2: rgba(235, 235, 245, .07);
    --tint: #6E76E8;
    --tint-text: #A8AEF5;
    --tint-soft: rgba(110, 118, 232, .22);
    --on-tint: #12142e;
    --series-new: #5E66D9;
    --series-new-text: #A8AEF5;
    --series-back: #C5C8F1;
    --series-back-edge: #8A90C8;
    --series-back-text: #C5C8F1;
    --ok: #30D158; --ok-text: #4ADE73; --ok-soft: rgba(48, 209, 88, .18);
    --warn: #FF9F0A; --warn-text: #FFB340; --warn-soft: rgba(255, 159, 10, .18);
    --bad: #FF453A; --bad-text: #FF8F86; --bad-soft: rgba(255, 69, 58, .18);
    --on-bad: #2a0806;
    --shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 16px 40px -10px rgba(0, 0, 0, .55);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .40);
    --wall:
      radial-gradient(1200px 820px at 10% 6%,  #172b57 0%, transparent 60%),
      radial-gradient(900px 720px at 90% 16%,  #32245c 0%, transparent 62%),
      radial-gradient(1000px 900px at 72% 94%, #241d4e 0%, transparent 60%),
      radial-gradient(820px 640px at 16% 88%,  #14304a 0%, transparent 60%),
      linear-gradient(160deg, #0b0b0e, #131318);
  }
}

/*
 * The other four.
 *
 * Each one changes the hue and nothing else: the material, the spacing and the
 * two tone logic of the stacked column are the same everywhere, so a theme is
 * a set of colours rather than a second design. They inherit from the light or
 * dark block above and override only what carries hue.
 *
 * Every one was measured the same way as the first two, by compositing the
 * panel over each wash of its own wallpaper. At 82 percent opacity the worst
 * case body text is 15.65 on ocean, 15.72 on indigo, 17.18 on mono and 15.27
 * on sand. The two blocks of a column stay at least 2.8 apart from each other
 * in all of them, which is what keeps them readable in greyscale.
 *
 * The glass went from 60 to 82 percent because the wallpaper was reading
 * straight through the panels and the numbers were competing with it. The
 * material is still translucent and the blur still does its work, but the page
 * is now something you read rather than something you look at.
 *
 * The accent needed correcting rather than picking. White on the first ocean
 * and forest tints came out at 2.67, which fails on a pressed segment button,
 * so both were darkened until white cleared 5.5.
 */

:root[data-theme="ocean"] {
  color-scheme: dark;
  --tint:         #1B6E9E;
  --tint-text:    #7CC6EC;
  --tint-soft:    rgba(62, 168, 222, .20);
  --on-tint:      #ffffff;
  --thumb:        #1B6E9E;
  --on-thumb:     #ffffff;
  --field:        rgba(62, 168, 222, .13);
  --sunk:         rgba(62, 168, 222, .17);
  --hover:        rgba(62, 168, 222, .18);
  --glass:        rgba(15, 26, 36, .82);
  --solid:        #0d1721;

  --series-new:       #2E86C6;
  --series-new-text:  #7CC6EC;
  --series-back:      #B8E0F5;
  --series-back-edge: #6FA9C4;
  --series-back-text: #B8E0F5;

  --wall:
    radial-gradient(1200px 820px at 10% 6%,  #0d3350 0%, transparent 60%),
    radial-gradient(900px 720px at 90% 16%,  #10404f 0%, transparent 62%),
    radial-gradient(1000px 900px at 72% 94%, #0a2a44 0%, transparent 60%),
    radial-gradient(820px 640px at 16% 88%,  #123b56 0%, transparent 60%),
    linear-gradient(160deg, #070c11, #0d141b);
}

/*
 * One without any hue, and it is not a glass theme drained of colour.
 * The material changes as well: the wallpaper goes flat, the panels go opaque
 * and the blur is switched off, because translucency over a gradient is what
 * makes a page feel soft and this one is meant to feel like paper.
 *
 * Greyscale is also the honest test of the two column tones. If they separate
 * here they separate for a colour blind reader everywhere. They sit 5.28 apart.
 */
:root[data-theme="forest"] {
  color-scheme: dark;
  --tint:         #1C7552;
  --tint-text:    #7FD9B2;
  --tint-soft:    rgba(63, 177, 130, .20);
  --on-tint:      #ffffff;
  --thumb:        #1C7552;
  --on-thumb:     #ffffff;
  --field:        rgba(63, 177, 130, .13);
  --sunk:         rgba(63, 177, 130, .17);
  --hover:        rgba(63, 177, 130, .18);
  --glass:        rgba(16, 29, 24, .82);
  --solid:        #0e1a15;

  --series-new:       #2E9169;
  --series-new-text:  #7FD9B2;
  --series-back:      #BEE9D6;
  --series-back-edge: #79B49B;
  --series-back-text: #BEE9D6;

  --wall:
    radial-gradient(1200px 820px at 10% 6%,  #123d2e 0%, transparent 60%),
    radial-gradient(900px 720px at 90% 16%,  #164436 0%, transparent 62%),
    radial-gradient(1000px 900px at 72% 94%, #0f3428 0%, transparent 60%),
    radial-gradient(820px 640px at 16% 88%,  #1a4a3a 0%, transparent 60%),
    linear-gradient(160deg, #070d0b, #0d1512);
}

:root[data-theme="paper"] {
  color-scheme: light;
  --blur: 0px;
  --saturate: 100%;

  --label:        #111113;
  --label-2:      rgba(17, 17, 19, .74);
  /* This theme has no wash to sit against, only white, so the third label was
     the one that suffered: at 55 percent it measured 4.16 against the panel and
     took 32 pieces of text under the line with it. 60 gives 4.93. */
  --label-3:      rgba(17, 17, 19, .60);

  --glass:        #ffffff;
  --solid:        #ffffff;
  --glass-edge:   rgba(17, 17, 19, .10);
  --tint:         #111113;
  --tint-text:    #111113;
  --tint-soft:    rgba(17, 17, 19, .07);
  --on-tint:      #ffffff;
  --thumb:        #111113;
  --on-thumb:     #ffffff;
  --field:        #ffffff;
  --sunk:         #f1f1f3;
  --hover:        #ebebee;
  --press:        #e2e2e6;
  --hair:         rgba(17, 17, 19, .12);
  --hair-2:       rgba(17, 17, 19, .07);

  --series-new:       #16161A;
  --series-new-text:  #16161A;
  --series-back:      #8A8A94;
  --series-back-edge: #6f6f79;
  --series-back-text: #55555e;

  --ok:      #1D7333;  --ok-text:   #1D7333;  --ok-soft:   rgba(29, 115, 51, .12);
  --warn:    #8A5200;  --warn-text: #8A5200;  --warn-soft: rgba(138, 82, 0, .12);
  --bad:     #A32620;  --bad-text:  #A32620;  --bad-soft:  rgba(163, 38, 32, .10);
  --on-bad:  #ffffff;

  --shadow:    0 1px 2px rgba(17, 17, 19, .06);
  --shadow-sm: 0 1px 2px rgba(17, 17, 19, .08);
  --wall: linear-gradient(180deg, #fbfbfc, #f4f4f6);
}

/* The one light alternative. Its two column tones took searching rather than
   choosing: the first warm pair sat 1.96 apart and the blocks merged. */
:root[data-theme="sand"] {
  color-scheme: light;
  --solid:        #fdfaf6;
  --label:        #1c1c1e;
  --label-2:      rgba(60, 60, 67, .86);
  --label-3:      rgba(60, 60, 67, .74);
  --glass:        rgba(255, 255, 255, .80);
  --glass-edge:   rgba(255, 255, 255, .78);
  --tint:         #9A4E20;
  --tint-text:    #7E3E18;
  --tint-soft:    rgba(154, 78, 32, .14);
  --on-tint:      #ffffff;
  --thumb:        #9A4E20;
  --on-thumb:     #ffffff;
  --field:        rgba(255, 255, 255, .78);
  --sunk:         rgba(154, 78, 32, .11);
  --hover:        rgba(154, 78, 32, .09);
  --hair:         rgba(60, 60, 67, .13);
  --hair-2:       rgba(60, 60, 67, .07);

  --series-new:       #5E2A0E;
  --series-new-text:  #7E3E18;
  --series-back:      #B07C4E;
  --series-back-edge: #8A5D36;
  --series-back-text: #7E3E18;

  --shadow:    0 1px 2px rgba(0, 0, 0, .05), 0 12px 32px -8px rgba(60, 40, 20, .16);
  --shadow-sm: 0 1px 3px rgba(60, 40, 20, .14);

  --wall:
    radial-gradient(1200px 820px at 10% 6%,  #f6e6d5 0%, transparent 60%),
    radial-gradient(900px 720px at 90% 16%,  #f2ddd0 0%, transparent 62%),
    radial-gradient(1000px 900px at 72% 94%, #f7ead9 0%, transparent 60%),
    radial-gradient(820px 640px at 16% 88%,  #efe4d6 0%, transparent 60%),
    linear-gradient(160deg, #faf5ee, #f3ece2);
}

/* shape, spacing, motion. Theme independent. */
:root {
  --radius-lg: 26px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-xs: 7px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 32px;
  --space-7: 48px;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --duration: .16s;
  --ease: cubic-bezier(.32, .72, 0, 1);

  --blur: 34px;
  --saturate: 148%;
}

.tm-glass {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
  backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}