/* Theme values the design package leaves to the app. Linked from index.html so
   they land before the first paint, as surstromming's demo does. */

:root {
  /* A game tile's identity is a hue, carried as data; its lightness and
     chroma come from the tone it is drawn in, and the tone's values come from
     the theme. So one palette of hues reads in light and dark alike. Each tone
     has a face, an edge (the tile's lower lip) and a label. */
  --tile-soft-l: 0.9;
  --tile-soft-c: 0.075;
  --tile-soft-edge-l: 0.79;
  --tile-soft-label-l: 0.42;
  --tile-soft-label-c: 0.12;

  --tile-vivid-l: 0.68;
  --tile-vivid-c: 0.17;
  --tile-vivid-edge-l: 0.56;
  --tile-vivid-label-l: 0.99;
  --tile-vivid-label-c: 0.01;

  --tile-gold-l: 0.84;
  --tile-gold-c: 0.15;
  --tile-gold-edge-l: 0.71;
  --tile-gold-label-l: 0.38;
  --tile-gold-label-c: 0.09;

  --tile-deep-l: 0.38;
  --tile-deep-c: 0.1;
  --tile-deep-edge-l: 0.28;
  --tile-deep-label-l: 0.94;
  --tile-deep-label-c: 0.05;

  --tile-plain-l: 0.88;
  --tile-plain-c: 0.025;
  --tile-plain-edge-l: 0.77;
  --tile-plain-label-l: 0.48;
  --tile-plain-label-c: 0.04;
}

[data-theme='dark'] {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.64 0.18 258);
  --chart-2: oklch(0.655 0.14 162);
  --chart-3: oklch(0.6 0.19 30);
  --chart-4: oklch(0.63 0.2 305);
  --chart-5: oklch(0.655 0.13 85);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);

  /* Tones are chosen against the dark surface rather than flipped: pale faces
     would glow, so soft tiles darken and their labels lighten instead. */
  --tile-soft-l: 0.46;
  --tile-soft-c: 0.075;
  --tile-soft-edge-l: 0.36;
  --tile-soft-label-l: 0.94;
  --tile-soft-label-c: 0.05;

  --tile-vivid-l: 0.64;
  --tile-vivid-c: 0.16;
  --tile-vivid-edge-l: 0.52;
  --tile-vivid-label-l: 0.99;
  --tile-vivid-label-c: 0.01;

  --tile-gold-l: 0.78;
  --tile-gold-c: 0.15;
  --tile-gold-edge-l: 0.64;
  --tile-gold-label-l: 0.3;
  --tile-gold-label-c: 0.07;

  --tile-deep-l: 0.32;
  --tile-deep-c: 0.09;
  --tile-deep-edge-l: 0.24;
  --tile-deep-label-l: 0.9;
  --tile-deep-label-c: 0.06;

  --tile-plain-l: 0.42;
  --tile-plain-c: 0.02;
  --tile-plain-edge-l: 0.33;
  --tile-plain-label-l: 0.86;
  --tile-plain-label-c: 0.02;
}

/* Text that must reach a screen reader but not the layout: a board is read
   by its tiles, and a moved tile says nothing on its own. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}