/* =============================================================================
   AI components — Styles
   -----------------------------------------------------------------------------
   The Snaptek "Vibe" system, carried over. Three independent choices, each an
   attribute that works on <html> (the whole page) or on any element (a scope):

     data-pw-style="calm | vivid"                  how loud the canvas is
     data-pw-accent="black | indigo | ember | electric | grape | fuchsia | lime"
     data-pw-face="expanded | rounded"             the typeface

   plus `data-pw-card-tone="lime | cream | lemon | sky | blush | mint | peach | lilac"`
   on any card. With none of them set nothing here applies: the library looks as it
   always has. Generated by ds/gen/styles.py from Screena/DesignSystem/Vibe.swift —
   change the generator, not this file.

   Rules the original system holds, kept here:
   - Sections live on the canvas; cards are for objects you can pick up.
   - Calm is a warm off-white (or near-black) canvas with the colour kept for actions.
   - Vivid puts the whole screen on a saturated canvas with two soft glows in the
     lower half; in dark mode the hue moves into the glows and the canvas goes deep.
   - Orange and lime carry ink, not white, on their fills (contrast measured in the
     app: every on-canvas pair is >= 5.6:1, every muted pair >= 4.5:1).
   - Components keep their own surface tokens. Only what sits DIRECTLY on the canvas
     reads --pw-on-canvas.

   Needs `light-dark()` (Chrome 123, Safari 17.5, Firefox 120).
   ============================================================================= */

/* -- Faces ----------------------------------------------------------------------
   The app's Expanded is SF Pro Expanded and its Rounded is SF Pro Rounded; neither
   can be shipped to a browser, so these are the closest open faces: Archivo, whose
   width axis opens up to 125%, and Nunito, a rounded sans. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("../assets/fonts/Archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("../assets/fonts/Archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("../assets/fonts/Nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("../assets/fonts/Nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --pw-font-expanded: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pw-font-rounded: "Nunito", ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --pw-tone-white: #FFFFFF;
  --pw-tone-lime: #C6FF9A;
  --pw-tone-cream: #FFF7C2;
  --pw-tone-lemon: #F2FF3D;
  --pw-tone-sky: #D6E6FF;
  --pw-tone-blush: #FFD3E4;
  --pw-tone-mint: #C9F7E4;
  --pw-tone-peach: #FFDCC8;
  --pw-tone-lilac: #E6DAFF;
  --pw-tone-ink: light-dark(#20212B, #F2F2F5);
  --pw-tone-ink-muted: light-dark(rgba(32, 33, 43, 0.66), #B4B4BA);
}

/* The face goes on the scope AND everything under it: buttons, inputs and the like
   restate `font` and would otherwise drop back to the page's own family. */
:is(html, body, div, section, main, aside, article, figure, header, form)[data-pw-face="expanded"] { --pw-font-sans: var(--pw-font-expanded); font-family: var(--pw-font-sans); font-stretch: 118%; }
:is(html, body, div, section, main, aside, article, figure, header, form)[data-pw-face="expanded"] :is(button, input, select, textarea, h1, h2, h3, h4, h5, h6, p, li, td, th, label, span, a, div) { font-stretch: 118%; }
:is(html, body, div, section, main, aside, article, figure, header, form)[data-pw-face="rounded"] { --pw-font-sans: var(--pw-font-rounded); font-family: var(--pw-font-sans); }


/* -- Accent: the theme colour -----------------------------------------------------
   --sty-a-l / --sty-a-d   accent on light / dark (dark is the lifted, luminous one)
   --sty-on-l              label on a light-mode accent fill (ink on orange and lime)
   --sty-soft              the soft tint the glows borrow
   --sty-cv-* --sty-ga-* --sty-gb-*  the vivid canvas and its two glows
*/

:is(html, body, div, section, main, aside, article, figure, header, form)[data-pw-accent="black"], [data-pw-swatch="black"] {
  --pw-color-brand-25: #fafafa;
  --pw-color-brand-50: #f4f4f5;
  --pw-color-brand-100: #e4e4e7;
  --pw-color-brand-200: #d4d4d8;
  --pw-color-brand-300: #a1a1aa;
  --pw-color-brand-400: #71717a;
  --pw-color-brand-500: #3f3f46;
  --pw-color-brand-600: #18181b;
  --pw-color-brand-700: #09090b;
  --pw-color-brand-800: #000000;
  --pw-color-brand-900: #000000;
  --pw-color-brand-950: #000000;
  --sty-a-l: #18181b; --sty-a-d: #fafafa; --sty-on-l: #ffffff; --sty-soft: #d4d4d8;
  --sty-cv: light-dark(#18181b, #09090b);
  --sty-ga: light-dark(color-mix(in srgb, #52525b 50%, transparent), color-mix(in srgb, #3f3f46 55%, transparent));
  --sty-gb: light-dark(color-mix(in srgb, #a1a1aa 35%, transparent), color-mix(in srgb, #71717a 40%, transparent));
  --sty-muted: light-dark(#d4d4d8, #a1a1aa);
  --sty-on-cv: light-dark(#ffffff, #ffffff);
  --sty-cv-action: light-dark(#ffffff, #ffffff);
  --sty-cv-action-label: light-dark(#18181b, #09090b);
  --sty-highlight: light-dark(var(--pw-tone-white), var(--pw-tone-white));
}

:is(html, body, div, section, main, aside, article, figure, header, form)[data-pw-accent="indigo"], [data-pw-swatch="indigo"] {
  --pw-color-brand-25: #f7f9ff;
  --pw-color-brand-50: #eef2ff;
  --pw-color-brand-100: #e0e7ff;
  --pw-color-brand-200: #c7d2fe;
  --pw-color-brand-300: #a5b4fc;
  --pw-color-brand-400: #818cf8;
  --pw-color-brand-500: #6366f1;
  --pw-color-brand-600: #4f46e5;
  --pw-color-brand-700: #4338ca;
  --pw-color-brand-800: #3730a3;
  --pw-color-brand-900: #312e81;
  --pw-color-brand-950: #1e1b4b;
  --sty-a-l: #4f46e5; --sty-a-d: #818cf8; --sty-on-l: #ffffff; --sty-soft: #c7d2fe;
  --sty-cv: light-dark(#4338ca, #14123a);
  --sty-ga: light-dark(color-mix(in srgb, #7a5af8 45%, transparent), color-mix(in srgb, #4f46e5 55%, transparent));
  --sty-gb: light-dark(color-mix(in srgb, #1ab3db 35%, transparent), color-mix(in srgb, #7a5af8 40%, transparent));
  --sty-muted: light-dark(#e0e7ff, #b9b3e8);
  --sty-on-cv: light-dark(#ffffff, #ffffff);
  --sty-cv-action: light-dark(#ffffff, #ffffff);
  --sty-cv-action-label: light-dark(#4338ca, #14123a);
  --sty-highlight: light-dark(var(--pw-tone-lemon), var(--pw-tone-lemon));
}

:is(html, body, div, section, main, aside, article, figure, header, form)[data-pw-accent="ember"], [data-pw-swatch="ember"] {
  --pw-color-brand-25: #fff8f5;
  --pw-color-brand-50: #fff2ea;
  --pw-color-brand-100: #ffe4d5;
  --pw-color-brand-200: #ffcdb1;
  --pw-color-brand-300: #ffae82;
  --pw-color-brand-400: #FF8F52;
  --pw-color-brand-500: #f27838;
  --pw-color-brand-600: #E4621F;
  --pw-color-brand-700: #c4541b;
  --pw-color-brand-800: #a04516;
  --pw-color-brand-900: #7b3511;
  --pw-color-brand-950: #57250c;
  --sty-a-l: #E4621F; --sty-a-d: #FF8F52; --sty-on-l: #20212B; --sty-soft: #FF9C7E;
  --sty-cv: light-dark(#FF7A3D, #1F0F08);
  --sty-ga: light-dark(color-mix(in srgb, #FFC24B 100%, transparent), color-mix(in srgb, #FF7A3D 45%, transparent));
  --sty-gb: light-dark(color-mix(in srgb, #FF4F7B 65%, transparent), color-mix(in srgb, #FF4F7B 45%, transparent));
  --sty-muted: light-dark(#4A2414, #E8C3AF);
  --sty-on-cv: light-dark(#20212B, #ffffff);
  --sty-cv-action: light-dark(#20212B, #ffffff);
  --sty-cv-action-label: light-dark(#ffffff, #1F0F08);
  --sty-highlight: light-dark(var(--pw-tone-cream), var(--pw-tone-cream));
}

:is(html, body, div, section, main, aside, article, figure, header, form)[data-pw-accent="electric"], [data-pw-swatch="electric"] {
  --pw-color-brand-25: #f5f9ff;
  --pw-color-brand-50: #ebf4ff;
  --pw-color-brand-100: #d7e8ff;
  --pw-color-brand-200: #b5d4ff;
  --pw-color-brand-300: #88bbff;
  --pw-color-brand-400: #5AA0FF;
  --pw-color-brand-500: #4288ea;
  --pw-color-brand-600: #2A6FD6;
  --pw-color-brand-700: #245fb8;
  --pw-color-brand-800: #1d4e96;
  --pw-color-brand-900: #173c74;
  --pw-color-brand-950: #102a51;
  --sty-a-l: #2A6FD6; --sty-a-d: #5AA0FF; --sty-on-l: #ffffff; --sty-soft: #86C5FF;
  --sty-cv: light-dark(#3A22F5, #110B45);
  --sty-ga: light-dark(color-mix(in srgb, #FF6A2B 42%, transparent), color-mix(in srgb, #3A22F5 55%, transparent));
  --sty-gb: light-dark(color-mix(in srgb, #7B2FE0 100%, transparent), color-mix(in srgb, #FF6A2B 40%, transparent));
  --sty-muted: light-dark(#E0DBFF, #B9B3E8);
  --sty-on-cv: light-dark(#ffffff, #ffffff);
  --sty-cv-action: light-dark(#ffffff, #ffffff);
  --sty-cv-action-label: light-dark(#3A22F5, #110B45);
  --sty-highlight: light-dark(var(--pw-tone-lemon), var(--pw-tone-lemon));
}

:is(html, body, div, section, main, aside, article, figure, header, form)[data-pw-accent="grape"], [data-pw-swatch="grape"] {
  --pw-color-brand-25: #faf9ff;
  --pw-color-brand-50: #f5f3ff;
  --pw-color-brand-100: #ece7ff;
  --pw-color-brand-200: #dbd2ff;
  --pw-color-brand-300: #c5b7ff;
  --pw-color-brand-400: #AF9BFF;
  --pw-color-brand-500: #9674f5;
  --pw-color-brand-600: #7C4DEB;
  --pw-color-brand-700: #6b42ca;
  --pw-color-brand-800: #5736a4;
  --pw-color-brand-900: #432a7f;
  --pw-color-brand-950: #2f1d59;
  --sty-a-l: #7C4DEB; --sty-a-d: #AF9BFF; --sty-on-l: #ffffff; --sty-soft: #C4B5FD;
  --sty-cv: light-dark(#6A2FE8, #190E3A);
  --sty-ga: light-dark(color-mix(in srgb, #B5238A 100%, transparent), color-mix(in srgb, #6A2FE8 55%, transparent));
  --sty-gb: light-dark(color-mix(in srgb, #2C49D6 100%, transparent), color-mix(in srgb, #FF6FB0 40%, transparent));
  --sty-muted: light-dark(#E6DDFF, #C9BCEB);
  --sty-on-cv: light-dark(#ffffff, #ffffff);
  --sty-cv-action: light-dark(#ffffff, #ffffff);
  --sty-cv-action-label: light-dark(#6A2FE8, #190E3A);
  --sty-highlight: light-dark(var(--pw-tone-lime), var(--pw-tone-lime));
}

:is(html, body, div, section, main, aside, article, figure, header, form)[data-pw-accent="fuchsia"], [data-pw-swatch="fuchsia"] {
  --pw-color-brand-25: #fff6fa;
  --pw-color-brand-50: #ffeef6;
  --pw-color-brand-100: #ffdcec;
  --pw-color-brand-200: #ffbedb;
  --pw-color-brand-300: #ff97c6;
  --pw-color-brand-400: #FF6FB0;
  --pw-color-brand-500: #e45498;
  --pw-color-brand-600: #C93A80;
  --pw-color-brand-700: #ad326e;
  --pw-color-brand-800: #8d295a;
  --pw-color-brand-900: #6d1f45;
  --pw-color-brand-950: #4c1631;
  --sty-a-l: #C93A80; --sty-a-d: #FF6FB0; --sty-on-l: #ffffff; --sty-soft: #F6A6D1;
  --sty-cv: light-dark(#C21F6E, #26081A);
  --sty-ga: light-dark(color-mix(in srgb, #B83A1A 100%, transparent), color-mix(in srgb, #C21F6E 55%, transparent));
  --sty-gb: light-dark(color-mix(in srgb, #7B3CF0 100%, transparent), color-mix(in srgb, #FF9C4A 38%, transparent));
  --sty-muted: light-dark(#FFE3EF, #E9B8CF);
  --sty-on-cv: light-dark(#ffffff, #ffffff);
  --sty-cv-action: light-dark(#ffffff, #ffffff);
  --sty-cv-action-label: light-dark(#C21F6E, #26081A);
  --sty-highlight: light-dark(var(--pw-tone-lemon), var(--pw-tone-lemon));
}

:is(html, body, div, section, main, aside, article, figure, header, form)[data-pw-accent="lime"], [data-pw-swatch="lime"] {
  --pw-color-brand-25: #f3fcf5;
  --pw-color-brand-50: #e6f9eb;
  --pw-color-brand-100: #cdf4d7;
  --pw-color-brand-200: #a2eab4;
  --pw-color-brand-300: #6ade87;
  --pw-color-brand-400: #30D158;
  --pw-color-brand-500: #29ba50;
  --pw-color-brand-600: #22A447;
  --pw-color-brand-700: #1d8d3d;
  --pw-color-brand-800: #187332;
  --pw-color-brand-900: #125926;
  --pw-color-brand-950: #0d3e1b;
  --sty-a-l: #22A447; --sty-a-d: #30D158; --sty-on-l: #20212B; --sty-soft: #A7F3C8;
  --sty-cv: light-dark(#B6F36A, #0C1F0E);
  --sty-ga: light-dark(color-mix(in srgb, #FFF06A 100%, transparent), color-mix(in srgb, #3FA34D 45%, transparent));
  --sty-gb: light-dark(color-mix(in srgb, #3FD4A0 70%, transparent), color-mix(in srgb, #B6F36A 28%, transparent));
  --sty-muted: light-dark(#3D5A1F, #B5D3A6);
  --sty-on-cv: light-dark(#20212B, #ffffff);
  --sty-cv-action: light-dark(#20212B, #ffffff);
  --sty-cv-action-label: light-dark(#ffffff, #0C1F0E);
  --sty-highlight: light-dark(var(--pw-tone-white), var(--pw-tone-lime));
}

/* The accent drives every token that was written against the brand ramp. They are
   restated here, on the same element, so a scope that is not <html> gets them too
   (a custom property that points at another is resolved where it is declared). */
:is(html, body, div, section, main, aside, article, figure, header, form)[data-pw-accent] {
  --sty-a: light-dark(var(--sty-a-l), var(--sty-a-d));
  --sty-link: light-dark(color-mix(in srgb, var(--sty-a-l) 78%, #000), var(--sty-a-d));
  --pw-action-bg: var(--sty-a);
  --pw-action-bg-hover: color-mix(in srgb, var(--sty-a) 88%, light-dark(#000, #fff));
  --pw-action-bg-active: color-mix(in srgb, var(--sty-a) 76%, light-dark(#000, #fff));
  --pw-action-fg: light-dark(var(--sty-on-l), #20212B);
  --pw-fg-on-brand: light-dark(var(--sty-on-l), #20212B);
  --pw-action-link: var(--sty-link);
  --pw-action-link-hover: color-mix(in srgb, var(--sty-link) 82%, light-dark(#000, #fff));
  --pw-action-link-active: color-mix(in srgb, var(--sty-link) 64%, light-dark(#000, #fff));
  --pw-fg-brand: var(--sty-link);
  --pw-tint-brand-fg: var(--sty-link);
  --pw-border-brand: var(--sty-a);
  --pw-field-border-focus: var(--sty-a);
  --pw-focus-ring-color: light-dark(color-mix(in srgb, var(--sty-a-l) 28%, transparent), color-mix(in srgb, var(--sty-a-d) 40%, transparent));
  --pw-bg-selected: light-dark(color-mix(in srgb, var(--sty-a-l) 10%, #fff), color-mix(in srgb, var(--sty-a-d) 20%, transparent));
  --pw-tint-brand-bg: light-dark(color-mix(in srgb, var(--sty-a-l) 10%, transparent), color-mix(in srgb, var(--sty-a-d) 16%, transparent));
  --pw-ai-aura-1: var(--pw-color-brand-400);
  --pw-ai-mesh-a: var(--pw-color-brand-300); --pw-ai-mesh-b: var(--pw-color-brand-600); --pw-ai-mesh-c: var(--pw-color-brand-400);
  --pw-ai-glow-a: color-mix(in srgb, var(--sty-a) 14%, transparent);
  --pw-ai-edge-a: color-mix(in srgb, var(--sty-a) 44%, transparent);
  --pw-ai-glow-b: color-mix(in srgb, var(--sty-soft) 22%, transparent);
  --pw-ai-edge-b: color-mix(in srgb, var(--sty-soft) 52%, transparent);
}

/* -- Canvas -------------------------------------------------------------------- */
/* No accent chosen: the library's own black drives the canvas. */
:is(html, body, div, section, main, aside, article, figure, header, form)[data-pw-style]:not([data-pw-accent]) {
  --sty-a-l: #18181b; --sty-a-d: #fafafa; --sty-soft: #d4d4d8;
  --sty-cv: light-dark(#18181b, #09090b);
  --sty-ga: light-dark(color-mix(in srgb, #52525b 50%, transparent), color-mix(in srgb, #3f3f46 55%, transparent));
  --sty-gb: light-dark(color-mix(in srgb, #a1a1aa 35%, transparent), color-mix(in srgb, #71717a 40%, transparent));
  --sty-muted: light-dark(#d4d4d8, #a1a1aa);
  --sty-on-cv: #ffffff; --sty-cv-action: #ffffff; --sty-cv-action-label: light-dark(#18181b, #09090b);
  --sty-highlight: light-dark(var(--pw-tone-lemon), var(--pw-tone-lemon));
}

/* Calm — the page's own quiet grey (the viewer sidebar's colour); near-black at night. Cards keep a
   hairline here and only here (on a saturated canvas a card separates itself). */
:is(html, body, div, section, main, aside, article, figure, header, form)[data-pw-style="calm"] {
  --pw-canvas: light-dark(#F5F6F6, #121214);
  --pw-on-canvas: light-dark(#20212B, #F2F2F5);
  --pw-on-canvas-muted: light-dark(#5C5C62, #A3A3A8);
  --pw-canvas-rule: light-dark(rgba(32, 33, 43, 0.16), rgba(255, 255, 255, 0.16));
  --pw-glow-a: light-dark(color-mix(in srgb, var(--sty-soft) 45%, transparent), color-mix(in srgb, var(--sty-a-d) 22%, transparent));
  --pw-glow-b: light-dark(color-mix(in srgb, var(--sty-a-l) 14%, transparent), color-mix(in srgb, var(--sty-soft) 10%, transparent));
  --pw-card-stroke: light-dark(#E8E8E1, rgba(255, 255, 255, 0.06));
  --pw-highlight: var(--pw-tone-lemon);
  --pw-bg-canvas: var(--pw-canvas);
  --pw-bg-canvas-subtle: var(--pw-canvas);
  --pw-bg-subtle: var(--pw-canvas);
  --pw-bg-surface: light-dark(#FFFFFF, #1F1F24);
}

/* Vivid — the screen IS the colour. Only the page's own text reads on-canvas; every
   component keeps its surface tokens, so a composer or a menu is still a white card. */
:is(html, body, div, section, main, aside, article, figure, header, form)[data-pw-style="vivid"] {
  --pw-canvas: var(--sty-cv);
  --pw-on-canvas: var(--sty-on-cv);
  --pw-on-canvas-muted: var(--sty-muted);
  --pw-canvas-rule: color-mix(in srgb, var(--sty-on-cv) 28%, transparent);
  --pw-glow-a: var(--sty-ga);
  --pw-glow-b: var(--sty-gb);
  --pw-card-stroke: transparent;
  --pw-highlight: var(--sty-highlight);
  --pw-canvas-action: var(--sty-cv-action);
  --pw-canvas-action-label: var(--sty-cv-action-label);
  --pw-bg-surface: light-dark(#FFFFFF, #1F1F24);
}

/* The specimen page, and anything else that wants the canvas, paints it. On the page the
   cards are the surface and the insets the canvas, so a demo is an object on a ground. */
html[data-pw-style] body.sp {
  --sp-fg-2: var(--pw-on-canvas-muted);
  --sp-fg-accent: var(--pw-on-canvas-muted);
  --sp-card: var(--pw-bg-surface);
  --sp-inset: light-dark(color-mix(in srgb, var(--pw-canvas) 55%, #fff), var(--pw-bg-surface-raised));
}
html[data-pw-style="calm"] body.sp .sp-demo { box-shadow: 0 0 0 1px var(--pw-card-stroke); }
html[data-pw-style="vivid"] body.sp { --sp-inset: light-dark(#F4F4F6, var(--pw-bg-surface-raised)); }

/* Anything that wants the canvas paints it with this class. */
[data-pw-style] .pw-canvas, .pw-canvas[data-pw-style], html[data-pw-style] body.sp {
  background:
    radial-gradient(70% 55% at 0% 100%, var(--pw-glow-a), transparent 72%),
    radial-gradient(70% 55% at 100% 100%, var(--pw-glow-b), transparent 72%),
    var(--pw-canvas);
  background-attachment: fixed, fixed, scroll;
  color: var(--pw-on-canvas);
}
.pw-canvas[data-pw-style] { background-attachment: scroll; border-radius: inherit; }

/* The one prominent action on a canvas. On a saturated canvas it inverts (white or ink),
   which keeps the canvas colour from competing with the button; on calm it is the accent. */
.pw-btn.pw-btn--canvas { background: var(--pw-canvas-action, var(--pw-action-bg)); color: var(--pw-canvas-action-label, var(--pw-action-fg)); }
.pw-btn.pw-btn--canvas:hover { background: color-mix(in srgb, var(--pw-canvas-action, var(--pw-action-bg)) 90%, #000); }
.pw-on-canvas { color: var(--pw-on-canvas); }
.pw-btn.pw-on-canvas { background: transparent; }
.pw-btn.pw-on-canvas:hover { background: color-mix(in srgb, var(--pw-on-canvas) 14%, transparent); }
.pw-on-canvas-muted { color: var(--pw-on-canvas-muted); }

/* -- Card tones ---------------------------------------------------------------
   Colour says where a thing lives rather than decorating it: a note takes the tone of
   its collection. Ink on every light fill; in dark mode a toned card is the dark
   surface, because yellows and limes darkened into a flat fill all go olive. */
[data-pw-card-tone] {
  --pw-bg-surface: light-dark(var(--pw-tone), #1F1F24);
  background: var(--pw-bg-surface);
  --pw-fg-primary: var(--pw-tone-ink);
  --pw-fg-secondary: var(--pw-tone-ink-muted);
  --pw-fg-tertiary: var(--pw-tone-ink-muted);
  --pw-border-subtle: color-mix(in srgb, var(--pw-tone-ink) 12%, transparent);
  --pw-border-default: color-mix(in srgb, var(--pw-tone-ink) 12%, transparent);
  color: var(--pw-tone-ink);
}

[data-pw-card-tone="white"] { --pw-tone: var(--pw-tone-white); }
[data-pw-card-tone="lime"] { --pw-tone: var(--pw-tone-lime); }
[data-pw-card-tone="cream"] { --pw-tone: var(--pw-tone-cream); }
[data-pw-card-tone="lemon"] { --pw-tone: var(--pw-tone-lemon); }
[data-pw-card-tone="sky"] { --pw-tone: var(--pw-tone-sky); }
[data-pw-card-tone="blush"] { --pw-tone: var(--pw-tone-blush); }
[data-pw-card-tone="mint"] { --pw-tone: var(--pw-tone-mint); }
[data-pw-card-tone="peach"] { --pw-tone: var(--pw-tone-peach); }
[data-pw-card-tone="lilac"] { --pw-tone: var(--pw-tone-lilac); }