@import url("https://fonts.googleapis.com/css2?family=Saira:wdth,wght@90..110,400..700&family=Atkinson+Hyperlegible+Next:wght@300..800&family=Atkinson+Hyperlegible+Mono:wght@400..600&display=swap");
/* Deep: a dark ocean instrument. Deep blue-green water for the ground, opaque surfaces that rise lighter toward the
 * reader (no glass, no glow halos), and luminous colour spent only on state: the action, the chosen tab, live values,
 * up and down, the visitor's own row. For trackers, dashboards and night use.
 *
 * Only tokens and a few surface treatments: the kit's markup stays the same. Every colour role is derived from the
 * coin's three colours with a fixed lightness per role. Fonts (style.json's fonts.url, which the builder imports at the
 * top of the app's kit/style.css): Saira for the mark, titles and big numbers; Atkinson Hyperlegible Next for text;
 * Atkinson Hyperlegible Mono for addresses.
 */
@layer kit, style;

@layer style {
  :root {
    /* default seeds; the app sets its own from its coin's art */
    --coin-1: oklch(0.76 0.2 142);
    --coin-2: oklch(0.68 0.21 358);
    --coin-3: oklch(0.9 0.17 96);

    --scheme: dark;

    /* static palette for browsers without relative colour: the default seeds, worked out */
    --ground: oklch(0.21 0.034 180);
    --ground-2: oklch(0.245 0.038 180);
    --ground-deep: oklch(0.165 0.03 180);
    --surface-1: oklch(0.25 0.034 180);
    --surface-2: oklch(0.29 0.036 180);
    --surface-3: oklch(0.33 0.038 180);
    --inverse: oklch(0.16 0.03 180);
    --inverse-2: oklch(0.2 0.032 180);
    --inverse-3: oklch(0.245 0.034 180);
    --on-inverse: oklch(0.95 0.014 180);
    --on-inverse-2: oklch(0.81 0.024 180);
    --on-inverse-3: oklch(0.75 0.026 180);
    --line-inverse: oklch(0.29 0.032 180);
    --ink-1: oklch(0.95 0.014 180);
    --ink-2: oklch(0.81 0.024 180);
    --ink-3: oklch(0.75 0.026 180);
    --on-ground-2: oklch(0.83 0.024 180);
    --line: oklch(0.335 0.034 180);
    --outline: oklch(0.52 0.04 180);
    --accent: oklch(0.82 0.15 142);
    --accent-side: oklch(0.68 0.13 142);
    --accent-lift: oklch(0.87 0.14 142);
    --highlight: oklch(0.36 0.09 142);
    --scrim: oklch(0.1 0.02 180 / 0.62);
    --shade: oklch(0.1 0.025 180);
    --press-shade: oklch(0.1 0.025 180 / 0.35);
    --gloss: oklch(0.98 0.02 180 / 0.1);

    /* states keep their meaning whatever the coin: lit fills, lit inks */
    --good: oklch(0.8 0.14 160);
    --good-ink: oklch(0.83 0.13 160);
    --warn: oklch(0.85 0.13 82);
    --warn-ink: oklch(0.86 0.12 82);
    --bad: oklch(0.74 0.15 25);
    --bad-ink: oklch(0.8 0.12 25);

    /* type: a squared technical sans for readouts and titles, a hyperlegible text face for low light */
    --font-display: "Saira", "DIN Alternate", system-ui, sans-serif;
    --font-heading: var(--font-display);
    --font-text: "Atkinson Hyperlegible Next", system-ui, sans-serif;
    --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
    --display-weight: 600;
    --display-tracking: 0.004em;
    --display-leading: 1.04;
    --text-weight: 400;
    --text-weight-strong: 560;
    --text-weight-heavy: 680;
    --leading-body: 1.6;
    --title-fill: var(--ink-1);

    /* shape: instrument bezels */
    --r-1: 6px;
    --r-2: 10px;
    --r-3: 14px;
    --r-4: 20px;
    --outline-w: 1px;
    --outline-w-sm: 1px;
    --line-w: 1px;
    --sticker-rim: 0px;
    --focus-w: 2px;
    --focus-offset: 3px;
    --tilt: 0deg;

    /* depth: surfaces rise lighter; shadows only separate what floats */
    --press-depth: 0px;
    --tile-depth: 0px;
    --shadow-1: none;
    --shadow-2: 0 14px 30px -18px oklch(0.1 0.025 180 / 0.8);
    --shadow-3: 0 30px 60px -24px oklch(0.08 0.025 180 / 0.9);
    --shadow-up: 0 -10px 24px -14px oklch(0.08 0.025 180 / 0.8);
    --sticker-lift: drop-shadow(0 6px 10px oklch(0.08 0.025 180 / 0.6));
    --field-inset: oklch(0.1 0.025 180 / 0.3);

    /* motion: precise */
    --d-1: 80ms;
    --d-2: 160ms;
    --d-3: 280ms;

    /* density: an instrument, not a brochure */
    --control-h-sm: 2.25rem;
    --control-h: 2.75rem;
    --control-h-lg: 3.375rem;
    --row-h: 3rem;
    --topbar-h: 4rem;

    /* identicons: mid tones that sit on the dark */
    --id-l: 0.74;
    --id-c: 0.1;
    --id-l2: 0.32;
    --id-c2: 0.06;

    /* medals: lit metals */
    --medal-1: oklch(0.85 0.12 90);
    --medal-2: oklch(0.87 0.015 220);
    --medal-3: oklch(0.76 0.09 55);
    /* meters are graduated: a tick every tenth */
    --meter-texture: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), oklch(0.16 0.03 180 / 0.55) calc(10% - 1px) 10%);

    /* the water: lighter near the surface, deeper as the page goes down */
    --ground-image: radial-gradient(120% 60% at 50% -10%, var(--ground-2), transparent 70%);
  }

  /* roles that follow the others, declared wherever a palette is */
  :root, [data-palette] {
    --on-ground: var(--ink-1);
    --rim: var(--surface-1);
    --on-accent: var(--ground-deep);
    --on-highlight: var(--ink-1);
    --on-medal: var(--ground-deep);
    --on-good: var(--ground-deep);
    --on-warn: var(--ground-deep);
    --on-bad: var(--ground-deep);
    --focus: var(--accent);
    --focus-inverse: var(--accent);
    --link-line: var(--accent);
    --tile-side: var(--ground-deep);
    --skel-1: var(--surface-2);
    --skel-2: var(--surface-3);
  }

  /* the same palette, derived from whatever seeds the app sets; an element with data-palette and its own --coin-*
     gets the palette of that coin inside it */
  @supports (color: oklch(from red l c h)) {
    :root, [data-palette] {
      /* the water is always blue-green; the art's main colour turns it at most 28 degrees toward itself */
      --ground: oklch(from var(--coin-1) 0.21 0.034 calc(205 + 28 * sin((h - 205) * 1deg)));
      --ground-2: oklch(from var(--ground) 0.245 0.038 h);
      --ground-deep: oklch(from var(--ground) 0.165 0.03 h);
      --surface-1: oklch(from var(--ground) 0.25 0.034 h);
      --surface-2: oklch(from var(--ground) 0.29 0.036 h);
      --surface-3: oklch(from var(--ground) 0.33 0.038 h);
      --inverse: oklch(from var(--ground) 0.16 0.03 h);
      --inverse-2: oklch(from var(--ground) 0.2 0.032 h);
      --inverse-3: oklch(from var(--ground) 0.245 0.034 h);
      --on-inverse: oklch(from var(--ground) 0.95 0.014 h);
      --on-inverse-2: oklch(from var(--ground) 0.81 0.024 h);
      --on-inverse-3: oklch(from var(--ground) 0.75 0.026 h);
      --line-inverse: oklch(from var(--ground) 0.29 0.032 h);
      --ink-1: oklch(from var(--ground) 0.95 0.014 h);
      --ink-2: oklch(from var(--ground) 0.81 0.024 h);
      --ink-3: oklch(from var(--ground) 0.75 0.026 h);
      --on-ground-2: oklch(from var(--ground) 0.83 0.024 h);
      --line: oklch(from var(--ground) 0.335 0.034 h);
      --outline: oklch(from var(--ground) 0.52 0.04 h);
      --scrim: oklch(from var(--ground) 0.1 0.02 h / 0.62);
      --shade: oklch(from var(--ground) 0.1 0.025 h);
      --press-shade: oklch(from var(--ground) 0.1 0.025 h / 0.35);
      --gloss: oklch(from var(--ground) 0.98 0.02 h / 0.1);
      /* the lit colour: the art's main colour, bright enough to carry dark type, for the action and what is chosen;
         the same colour as a deep lit band (pale ink reads on it) for what is the visitor's own and for prizes */
      --accent: oklch(from var(--coin-1) max(0.78, calc(0.8 + 0.04 * cos((h - 100) * 1deg))) min(c, 0.15) h);
      --accent-side: oklch(from var(--coin-1) 0.68 min(c, 0.13) h);
      --accent-lift: oklch(from var(--coin-1) max(0.84, calc(0.86 + 0.03 * cos((h - 100) * 1deg))) min(c, 0.14) h);
      --highlight: oklch(from var(--coin-1) 0.36 min(c, 0.09) h);
      --shadow-2: 0 14px 30px -18px oklch(from var(--shade) l c h / 0.8);
      --shadow-3: 0 30px 60px -24px oklch(from var(--shade) calc(l - 0.02) c h / 0.9);
      --shadow-up: 0 -10px 24px -14px oklch(from var(--shade) calc(l - 0.02) c h / 0.8);
      --sticker-lift: drop-shadow(0 6px 10px oklch(from var(--shade) calc(l - 0.02) c h / 0.6));
      --field-inset: oklch(from var(--shade) l c h / 0.3);
      --meter-texture: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), oklch(from var(--ground) 0.16 0.03 h / 0.55) calc(10% - 1px) 10%);
    }
  }

  body { background-size: 100% max(64rem, 110vh); }

  /* the mark and titles */
  .k-mark { font-size: 1.3125rem; letter-spacing: 0.01em; }
  .k-panel__title, .k-sheet__title { font-size: 1.375rem; }
  @media (max-width: 767.98px) {
    :root { --topbar-h: 3.5rem; }
    .k-mark { font-size: 1.125rem; gap: 6px; }
    .k-mark__art { width: 2.25rem; height: 2.25rem; }
  }

  /* panels and floating parts edge in a soft line; controls keep the brighter outline */
  .k-panel, .k-sheet__panel, .k-toast, .k-select__list, .k-menu { border-color: var(--line); }

  /* live readouts: countdown tiles are lit digits on the deep screen */
  .k-countdown--tiles .k-countdown__unit { background: var(--inverse); color: var(--accent); border-color: var(--line); box-shadow: inset 0 1px 0 0 var(--gloss); }

  /* medals carry dark type (--on-medal) and no base */
  .k-rank[data-rank="1"], .k-rank[data-rank="2"], .k-rank[data-rank="3"] { box-shadow: none; }

  /* controls show state in light: hover lifts the face a step, pressed sinks it with a shade inside */
  @media (hover: hover) {
    .k-btn:where(:not(:disabled, [aria-disabled="true"], [data-state], [aria-busy="true"])):hover { --btn-face: var(--surface-3); }
    .k-btn--primary:where(:not(:disabled, [aria-disabled="true"], [data-state], [aria-busy="true"])):hover { --btn-face: var(--accent-lift); }
    .k-coin:hover, .k-wallet:hover { background: var(--surface-2); }
  }
  .k-btn:where(:not(:disabled, [aria-disabled="true"], [data-state])):active { --btn-face: var(--surface-2); --gloss: var(--press-shade); transform: translateY(1px); }
  .k-btn--primary:where(:not(:disabled, [aria-disabled="true"], [data-state])):active { --btn-face: var(--accent-side); }
  .k-coin:active, .k-wallet:active, .k-wallet[aria-expanded="true"] { background: var(--surface-3); }

  /* tabs: a lit bar under the chosen one; the current route is lit the same way */
  .k-tab::after { height: 3px; bottom: 2px; border-radius: 2px; }
  .k-tab[aria-selected="true"]::after { box-shadow: none; }
  .k-nav [aria-current="page"] { background: var(--surface-1); box-shadow: inset 0 -2px 0 0 var(--accent); }

  /* addresses in the mono */
  .k-who__addr, .k-wallet__addr, .k-copy { font-family: var(--font-mono); font-weight: 400; }

  /* the deep screen: live feeds sit below the water's surface */
  .k-inverse.k-panel { border-color: var(--line-inverse); }
}