@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400..900&family=Tilt+Warp&display=swap");
/* Toybox: bright, tactile and chunky. Committed colour, thick ink outlines, pressed-face buttons, die-cut sticker
 * rims; premium toy packaging and a great mobile game, never a children's page.
 *
 * 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, so ink always reads on the ground and on the paper, whatever
 * hue the coin brings. Fonts (style.json's fonts.url, which the builder imports at the top of the app's kit/style.css):
 * Tilt Warp for the mark, titles and big numbers; Figtree for everything people read and press.
 */
@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);

    /* static palette for browsers without relative colour: the default seeds, worked out */
    --ground: oklch(0.866 0.18 142);
    --ground-2: oklch(0.896 0.165 142);
    --ground-deep: oklch(0.666 0.17 142);
    --surface-1: oklch(0.985 0.012 142);
    --surface-2: oklch(0.955 0.024 142);
    --surface-3: oklch(0.922 0.04 142);
    --inverse: oklch(0.27 0.05 142);
    --inverse-2: oklch(0.33 0.055 142);
    --inverse-3: oklch(0.39 0.06 142);
    --on-inverse: oklch(0.97 0.015 142);
    --on-inverse-2: oklch(0.82 0.035 142);
    --on-inverse-3: oklch(0.68 0.04 142);
    --line-inverse: oklch(0.38 0.05 142);
    --ink-1: oklch(0.25 0.05 142);
    --ink-2: oklch(0.4 0.045 142);
    --ink-3: oklch(0.52 0.04 142);
    --on-ground-2: oklch(0.34 0.06 142);
    --line: oklch(0.9 0.03 142);
    --accent: oklch(0.723 0.19 358);
    --highlight: oklch(0.91 0.15 96);
    --field-inset: oklch(0.9 0.035 142);
    --scrim: oklch(0.25 0.05 142 / 0.5);
    --gloss: oklch(0.99 0.01 142 / 0.55);
    --shade: oklch(0.25 0.05 142);

    /* states keep their meaning whatever the coin */
    --good: oklch(0.84 0.15 158);
    --good-ink: oklch(0.46 0.12 158);
    --warn: oklch(0.88 0.15 88);
    --warn-ink: oklch(0.5 0.12 70);
    --bad: oklch(0.75 0.16 32);
    --bad-ink: oklch(0.5 0.19 28);

    /* type */
    --font-display: "Tilt Warp", ui-rounded, system-ui, sans-serif;
    --font-heading: var(--font-display);
    --font-text: "Figtree", system-ui, sans-serif;
    --font-mono: ui-monospace, monospace;
    --display-weight: 400;
    --display-tracking: 0.004em;
    --display-leading: 1.02;
    --text-weight: 500;
    --text-weight-strong: 700;
    --text-weight-heavy: 800;
    --title-fill: var(--surface-1);
    --title-stroke: 0.16em;
    --title-extrude: 0 0.075em 0 var(--outline);

    /* shape: chunky, never pill */
    --r-1: 8px;
    --r-2: 14px;
    --r-3: 22px;
    --r-4: 28px;
    --outline-w: 3px;
    --outline-w-sm: 2px;
    --line-w: 1.5px;
    --sticker-rim: 4px;

    /* depth: what you press has an ink base, what holds content sits on a base of the ground's own shade */
    --press-depth: 5px;
    --tile-depth: 6px;
    --shadow-1: none;
    --shadow-2: 0 18px 30px -22px oklch(0.25 0.05 142 / 0.55);
    --shadow-3: 0 26px 50px -18px oklch(0.2 0.05 142 / 0.5);
    --shadow-up: 0 -10px 24px -14px oklch(0.25 0.05 142 / 0.35);
    --sticker-lift: drop-shadow(0 2px 0 oklch(0.25 0.05 142 / 0.18)) drop-shadow(0 7px 7px oklch(0.25 0.05 142 / 0.28));

    /* motion: quick and springless */
    --d-1: 80ms;
    --d-2: 170ms;
    --d-3: 300ms;

    /* density: big, clear targets */
    --control-h-sm: 2.5rem;
    --control-h: 3rem;
    --control-h-lg: 3.75rem;
    --row-h: 3.25rem;
    --topbar-h: 4.5rem;
    --actionbar-h: 5.625rem;

    /* identicons: candy colours with an ink motif */
    --id-l: 0.82;
    --id-c: 0.14;
    --id-l2: 0.36;
    --id-c2: 0.09;

    /* medals */
    --medal-1: oklch(0.87 0.16 92);
    --medal-2: oklch(0.9 0.02 250);
    --medal-3: oklch(0.78 0.11 58);

    /* candy stripes in meters */
    --meter-texture: repeating-linear-gradient(-45deg, transparent 0 7px, oklch(0.99 0.01 142 / 0.28) 7px 13px);

    /* the ground: a soft light from above and a printed sunburst that fades out below the first screen */
    --ground-image:
      radial-gradient(130% 100% at 50% 0%, transparent 30%, var(--ground) 78%),
      repeating-conic-gradient(from -3deg at 50% -6%, var(--ground-2) 0deg 4.4deg, var(--ground) 4.9deg 9.5deg, var(--ground-2) 10deg);
  }

  /* roles that follow the others, declared wherever a palette is */
  :root, [data-palette] {
    --on-ground: var(--ink-1);
    --outline: var(--ink-1);
    --rim: var(--surface-1);
    --accent-side: var(--outline);
    --on-accent: var(--ink-1);
    --on-highlight: var(--ink-1);
    --on-good: var(--ink-1);
    --on-warn: var(--ink-1);
    --on-bad: var(--ink-1);
    --focus: var(--ink-1);
    --focus-inverse: var(--highlight);
    --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-*
     (a coin's tile on a launchpad) gets the palette of that coin inside it */
  @supports (color: oklch(from red l c h)) {
    :root, [data-palette] {
      /* the ground takes the art's main colour: lighter for yellows and greens, deeper for blues and violets, and only as
         much chroma as that hue holds at that lightness */
      --ground: oklch(from var(--coin-1) calc(0.815 + 0.06 * cos((h - 110) * 1deg)) min(c, calc(0.125 + 0.055 * max(0, cos((h - 138) * 1.6deg)))) h);
      --ground-2: oklch(from var(--ground) calc(l + 0.03) calc(c * 0.92) h);
      --ground-deep: oklch(from var(--ground) calc(l - 0.2) calc(c * 0.95) h);
      --surface-1: oklch(from var(--coin-1) 0.985 0.012 h);
      --surface-2: oklch(from var(--coin-1) 0.955 0.024 h);
      --surface-3: oklch(from var(--coin-1) 0.922 0.04 h);
      --inverse: oklch(from var(--coin-1) 0.27 min(c, 0.05) h);
      --inverse-2: oklch(from var(--coin-1) 0.33 min(c, 0.055) h);
      --inverse-3: oklch(from var(--coin-1) 0.39 min(c, 0.06) h);
      --on-inverse: oklch(from var(--coin-1) 0.97 0.015 h);
      --on-inverse-2: oklch(from var(--coin-1) 0.82 0.035 h);
      --on-inverse-3: oklch(from var(--coin-1) 0.68 0.04 h);
      --line-inverse: oklch(from var(--coin-1) 0.38 min(c, 0.05) h);
      --ink-1: oklch(from var(--coin-1) 0.25 min(c, 0.05) h);
      --ink-2: oklch(from var(--coin-1) 0.4 min(c, 0.045) h);
      --ink-3: oklch(from var(--coin-1) 0.52 min(c, 0.04) h);
      --on-ground-2: oklch(from var(--coin-1) 0.34 min(c, 0.06) h);
      --line: oklch(from var(--coin-1) 0.9 0.03 h);
      --field-inset: oklch(from var(--coin-1) 0.9 0.035 h);
      --scrim: oklch(from var(--coin-1) 0.25 min(c, 0.05) h / 0.5);
      --gloss: oklch(from var(--coin-1) 0.99 0.01 h / 0.55);
      --shade: oklch(from var(--coin-1) 0.25 min(c, 0.05) h);
      /* the accent takes the art's contrasting colour, light enough for ink to sit on it */
      --accent: oklch(from var(--coin-2) max(0.66, calc(0.74 + 0.08 * cos((h - 100) * 1deg))) min(c, 0.19) h);
      /* the highlight takes the third colour, pale enough to sit under text */
      --highlight: oklch(from var(--coin-3) max(0.84, calc(0.86 + 0.05 * cos((h - 100) * 1deg))) min(c, 0.15) h);
      --shadow-2: 0 18px 30px -22px oklch(from var(--shade) l c h / 0.55);
      --shadow-3: 0 26px 50px -18px oklch(from var(--shade) calc(l - 0.05) c h / 0.5);
      --shadow-up: 0 -10px 24px -14px oklch(from var(--shade) l c h / 0.35);
      --sticker-lift: drop-shadow(0 2px 0 oklch(from var(--shade) l c h / 0.18)) drop-shadow(0 7px 7px oklch(from var(--shade) l c h / 0.28));
      --meter-texture: repeating-linear-gradient(-45deg, transparent 0 7px, oklch(from var(--surface-1) l c h / 0.28) 7px 13px);
    }
  }

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

  /* the mark: the app's drawn sticker beside its name, a size up from the kit's */
  .k-mark { font-size: 1.375rem; }
  .k-mark__art { width: 2.75rem; height: 2.75rem; }
  @media (max-width: 767.98px) {
    :root { --topbar-h: 3.75rem; }
    .k-mark { font-size: 1.1875rem; gap: 6px; }
    .k-mark__art { width: 2.25rem; height: 2.25rem; }
  }

  /* stickers: a paper rim, a small lift, a slight tilt */
  .k-avatar { border-width: var(--outline-w-sm); }
  .k-coin__img { box-shadow: 0 0 0 var(--outline-w-sm) var(--outline); }

  /* panel titles set in the display face, a touch larger than the kit's */
  .k-panel__title, .k-sheet__title { font-size: 1.625rem; }

  /* the inverse surface (scoreboards, live feeds) keeps the ink outline and gets a deeper base */
  .k-inverse.k-panel { --tile-side: var(--shade); }
}