@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&family=Nunito+Sans:opsz,wght@6..12,300..900&family=Sometype+Mono:wght@400..700&display=swap");
/* Linen: a warm textile. Soft off-white linen with a visible weave, rounded but firm forms, and one muted colour dyed
 * from the coin that carries the actions and the deep panels. Calm, tactile, never cute. For communities and calm tools.
 *
 * 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): Zen Maru Gothic for the mark, titles and big numbers; Nunito Sans for text; Sometype
 * 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);

    /* static palette for browsers without relative colour: the default seeds, worked out */
    --ground: oklch(0.953 0.013 102);
    --ground-2: oklch(0.968 0.01 102);
    --ground-deep: oklch(0.88 0.018 102);
    --surface-1: oklch(0.983 0.007 102);
    --surface-2: oklch(0.958 0.012 102);
    --surface-3: oklch(0.93 0.016 102);
    --inverse: oklch(0.33 0.06 142);
    --inverse-2: oklch(0.38 0.06 142);
    --inverse-3: oklch(0.43 0.058 142);
    --on-inverse: oklch(0.97 0.01 102);
    --on-inverse-2: oklch(0.86 0.02 102);
    --on-inverse-3: oklch(0.79 0.025 102);
    --line-inverse: oklch(0.44 0.05 142);
    --ink-1: oklch(0.27 0.03 142);
    --ink-2: oklch(0.42 0.03 142);
    --ink-3: oklch(0.49 0.025 142);
    --on-ground-2: oklch(0.4 0.03 142);
    --line: oklch(0.885 0.016 102);
    --outline: oklch(0.63 0.028 142);
    --accent: oklch(0.46 0.08 142);
    --accent-side: oklch(0.39 0.075 142);
    --accent-press: oklch(0.33 0.07 142);
    --highlight: oklch(0.915 0.06 96);
    --scrim: oklch(0.27 0.03 142 / 0.45);
    --shade: oklch(0.3 0.03 102);
    --press-shade: oklch(0.27 0.03 142 / 0.2);

    /* states keep their meaning whatever the coin: plant-dyed tints */
    --good: oklch(0.88 0.075 152);
    --good-ink: oklch(0.45 0.1 152);
    --warn: oklch(0.9 0.08 85);
    --warn-ink: oklch(0.5 0.1 70);
    --bad: oklch(0.86 0.065 30);
    --bad-ink: oklch(0.5 0.15 30);

    /* type: a rounded gothic for display, a soft humanist sans for text */
    --font-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", ui-rounded, system-ui, sans-serif;
    --font-heading: var(--font-display);
    --font-text: "Nunito Sans", system-ui, sans-serif;
    --font-mono: "Sometype Mono", ui-monospace, monospace;
    --display-weight: 700;
    --display-tracking: -0.005em;
    --display-leading: 1.12;
    --text-weight: 420;
    --text-weight-strong: 620;
    --text-weight-heavy: 740;
    --leading-body: 1.55;
    --title-fill: var(--ink-1);

    /* shape: rounded but firm, never pill */
    --r-1: 8px;
    --r-2: 12px;
    --r-3: 18px;
    --r-4: 24px;
    --outline-w: 1.5px;
    --outline-w-sm: 1.5px;
    --line-w: 1px;
    --sticker-rim: 0px;
    --focus-w: 2.5px;
    --focus-offset: 3px;

    /* depth: cloth lying on a table, a soft shade under it */
    --press-depth: 0px;
    --tile-depth: 0px;
    --shadow-1: 0 1px 2px oklch(0.3 0.03 102 / 0.08);
    --shadow-2: 0 1px 2px oklch(0.3 0.03 102 / 0.07), 0 12px 26px -16px oklch(0.3 0.03 102 / 0.32);
    --shadow-3: 0 2px 6px oklch(0.3 0.03 102 / 0.08), 0 28px 56px -22px oklch(0.3 0.03 102 / 0.42);
    --shadow-up: 0 -8px 22px -14px oklch(0.3 0.03 102 / 0.3);
    --sticker-lift: drop-shadow(0 4px 6px oklch(0.3 0.03 102 / 0.18));
    --gloss: transparent;
    --field-inset: oklch(0.3 0.03 102 / 0.05);

    /* motion: soft and unhurried */
    --d-1: 100ms;
    --d-2: 220ms;
    --d-3: 380ms;

    /* density: comfortable */
    --control-h-sm: 2.5rem;
    --control-h: 3rem;
    --control-h-lg: 3.625rem;
    --row-h: 3.25rem;
    --topbar-h: 4.5rem;
    --actionbar-h: 5.25rem;

    /* identicons: plant dyes */
    --id-l: 0.8;
    --id-c: 0.08;
    --id-l2: 0.42;
    --id-c2: 0.07;

    /* medals: brass, pewter, copper thread */
    --medal-1: oklch(0.86 0.1 88);
    --medal-2: oklch(0.89 0.012 102);
    --medal-3: oklch(0.79 0.07 55);
    --meter-texture: repeating-linear-gradient(90deg, transparent 0 3px, oklch(0.99 0.01 102 / 0.18) 3px 4px);

    /* the weave: warp and weft threads, drawn once as a tile */
    --weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.27 0 0 0 0 0.2 0.62 0 0 0 -0.25'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.012' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.27 0 0 0 0 0.2 0.62 0 0 0 -0.25'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23a)'/%3E%3Crect width='220' height='220' filter='url(%23b)'/%3E%3C/svg%3E");
    --ground-image: var(--weave);
    --panel-image: none;
  }

  /* 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(--on-inverse);
    --on-highlight: var(--ink-1);
    --on-good: var(--ink-1);
    --on-warn: var(--ink-1);
    --on-bad: var(--ink-1);
    --focus: var(--accent);
    --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-*
     gets the palette of that coin inside it */
  @supports (color: oklch(from red l c h)) {
    :root, [data-palette] {
      /* undyed linen: a warm off-white that leans a little toward the art's main colour (the hue moves at most 25
         degrees from a warm 80 toward it) */
      --ground: oklch(from var(--coin-1) 0.953 0.013 calc(80 + 25 * sin((h - 80) * 1deg)));
      --ground-2: oklch(from var(--ground) 0.968 0.01 h);
      --ground-deep: oklch(from var(--ground) 0.88 0.018 h);
      --surface-1: oklch(from var(--ground) 0.983 0.007 h);
      --surface-2: oklch(from var(--ground) 0.958 0.012 h);
      --surface-3: oklch(from var(--ground) 0.93 0.016 h);
      --line: oklch(from var(--ground) 0.885 0.016 h);
      --on-inverse: oklch(from var(--ground) 0.97 0.01 h);
      --on-inverse-2: oklch(from var(--ground) 0.86 0.02 h);
      --on-inverse-3: oklch(from var(--ground) 0.79 0.025 h);
      --shade: oklch(from var(--ground) 0.3 0.03 h);
      /* the dye: the art's main colour, muted; deep for the inverse cloth, mid for the actions, dark for the thread */
      --inverse: oklch(from var(--coin-1) 0.33 min(c, 0.06) h);
      --inverse-2: oklch(from var(--coin-1) 0.38 min(c, 0.06) h);
      --inverse-3: oklch(from var(--coin-1) 0.43 min(c, 0.058) h);
      --line-inverse: oklch(from var(--coin-1) 0.44 min(c, 0.05) h);
      --ink-1: oklch(from var(--coin-1) 0.27 min(c, 0.03) h);
      --ink-2: oklch(from var(--coin-1) 0.42 min(c, 0.03) h);
      --ink-3: oklch(from var(--coin-1) 0.49 min(c, 0.025) h);
      --on-ground-2: oklch(from var(--coin-1) 0.4 min(c, 0.03) h);
      --outline: oklch(from var(--coin-1) 0.63 min(c, 0.028) h);
      --accent: oklch(from var(--coin-1) 0.46 min(c, 0.08) h);
      --accent-side: oklch(from var(--coin-1) 0.39 min(c, 0.075) h);
      --accent-press: oklch(from var(--coin-1) 0.33 min(c, 0.07) h);
      --scrim: oklch(from var(--coin-1) 0.27 min(c, 0.03) h / 0.45);
      --press-shade: oklch(from var(--coin-1) 0.27 min(c, 0.03) h / 0.2);
      /* the highlight: the third colour as a pale natural dye */
      --highlight: oklch(from var(--coin-3) 0.915 min(c, 0.06) h);
      --shadow-1: 0 1px 2px oklch(from var(--shade) l c h / 0.08);
      --shadow-2: 0 1px 2px oklch(from var(--shade) l c h / 0.07), 0 12px 26px -16px oklch(from var(--shade) l c h / 0.32);
      --shadow-3: 0 2px 6px oklch(from var(--shade) l c h / 0.08), 0 28px 56px -22px oklch(from var(--shade) l c h / 0.42);
      --shadow-up: 0 -8px 22px -14px oklch(from var(--shade) l c h / 0.3);
      --sticker-lift: drop-shadow(0 4px 6px oklch(from var(--shade) l c h / 0.18));
      --field-inset: oklch(from var(--shade) l c h / 0.05);
    }
  }

  /* the weave repeats across the whole page */
  body { background-repeat: repeat; background-size: 220px 220px; }

  /* the mark and titles */
  .k-mark { font-size: 1.375rem; }
  .k-panel__title, .k-sheet__title { font-size: 1.5rem; }
  @media (max-width: 767.98px) {
    :root { --topbar-h: 3.875rem; }
    .k-mark { font-size: 1.1875rem; gap: 6px; }
    .k-mark__art { width: 2.25rem; height: 2.25rem; }
  }

  /* soft controls show their states in the cloth: a shade darker on hover, a fold of shade inside when pressed */
  @media (hover: hover) {
    .k-btn:where(:not(:disabled, [aria-disabled="true"], [data-state], [aria-busy="true"])):hover { --btn-face: var(--surface-2); }
    .k-btn--primary:where(:not(:disabled, [aria-disabled="true"], [data-state], [aria-busy="true"])):hover { --btn-face: var(--accent-side); }
    .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-3); --gloss: var(--press-shade); transform: translateY(1px); }
  .k-btn--primary:where(:not(:disabled, [aria-disabled="true"], [data-state])):active { --btn-face: var(--accent-press); }
  .k-coin:active, .k-wallet:active, .k-wallet[aria-expanded="true"] { background: var(--surface-3); }

  /* tabs: a soft dyed bar */
  .k-tab::after { height: 3px; bottom: 4px; }
  .k-tab[aria-selected="true"]::after { box-shadow: none; }
  .k-nav [aria-current="page"] { background: var(--surface-1); box-shadow: 0 0 0 var(--outline-w-sm) var(--outline); }

  /* stickers are woven labels: a stitched line just inside the edge, straight or barely tilted */
  .k-sticker { outline: 1.5px dashed color-mix(in oklch, currentColor 45%, transparent); outline-offset: -4px; }

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

  /* the dyed cloth keeps its own edge */
  .k-inverse.k-panel { border-color: var(--inverse); }
}