/* ===========================================================================
   public/design-variants.css — the design variants (lib/design.ts).

   Pop, the default look, is here: every page is rendered with
   `data-design="pop"` on <html> and this file linked in <head>
   (app/layout.tsx), an ordinary render-blocking stylesheet. Each variant is
   `data-design="<id>"` on <html> and overrides the design tokens for both
   themes: every colour, the elevation, the dither's two dot colours, the
   radius, the display face with its weights and tracking — plus a few rules
   of its own (the section bands, the two-tone headline, the button's shape).
   Minimal is app/globals.css alone: a browser that chose it has the
   attribute taken off before the first paint, and nothing here matches.
   Served as it is, outside the build.

   WHERE A VARIANT STOPS. The colour blocks skip `[data-read-theme]`: read mode
   keeps its paper themes (globals.css `html[data-read-theme]`) in every
   variant. Book covers, pages and the exported files are the book's design,
   so nothing here reaches them. `.on-paper` (a coloring sheet) still sets its
   own ink, which wins over anything inherited from here.

   THE SOURCE OF TRUTH for a variant's colours is this file. Each colour
   block lists every token globals.css's :root does, in hex; the hairline is
   the ink mixed with transparent, as in Minimal. lib/design-variants.test.ts
   reads these blocks the way the browser will and holds every text pair to
   WCAG AA (4.5:1; 3:1 for focus rings, control outlines and the selected
   sidebar icon), the button's label on its fill and its hover, and the text
   on each section band. Change a colour here and run it.
   =========================================================================== */

/* ===========================================================================
   Paperback — warm editorial. Cream paper, warm ink, terracotta for the
   button and the links with saffron and sage beside it; Fraunces for every
   heading. Bookish and premium. (readwise.io, reedsy.com, substack.com.)
   =========================================================================== */

html[data-design="paperback"] {
  --heading-face: var(--font-fraunces), Georgia, "Times New Roman", serif;
  --weight-display: 500;
  --weight-h1: 500;
  --weight-h2: 500;
  --weight-h3: 600;
  --tracking-display: -0.03em;
  --tracking-h1: -0.028em;
  --tracking-h2: -0.022em;
  --tracking-h3: -0.012em;
  --radius: 0.625rem;
  --card-radius: 1.125rem;
}

html[data-design="paperback"]:not([data-read-theme]) {
  color-scheme: light;
  --background: #F6F0E4;
  --foreground: #231C16;
  --card: #FFFCF6;
  --card-foreground: #231C16;
  --popover: #FFFCF6;
  --popover-foreground: #231C16;
  --primary: #A23C1C;
  --primary-foreground: #FFFFFF;
  --secondary: #EFE5D3;
  --secondary-foreground: #4A3D31;
  --muted: #EFE7D9;
  --muted-foreground: #6A5B4D;
  --accent: #EBE1CE;
  --accent-foreground: #231C16;
  --accent-ink: #8A3216;
  --highlight: #FFD66B;
  --highlight-foreground: #231C16;
  --destructive: #B42318;
  --destructive-foreground: #FFFFFF;
  --success: #2D6A33;
  --success-foreground: #FFFFFF;
  --success-tint: #E3EDDA;
  --warning: #83550A;
  --warning-foreground: #FFFFFF;
  --warning-tint: #F7E8C6;
  --info: #2B5E85;
  --info-foreground: #FFFFFF;
  --info-tint: #E0EAF0;
  --border: color-mix(in oklab, var(--foreground) 11%, transparent);
  --input: #E4DAC8;
  --control: #8A7B6B;
  --ring: #A23C1C;
  --chart-1: #A23C1C;
  --chart-2: #D49A35;
  --chart-3: #6F8F72;
  --chart-4: #231C16;
  --chart-5: #C77D5A;
  --sidebar: #EFE7D8;
  --sidebar-foreground: #231C16;
  --sidebar-primary: #A23C1C;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #E5D9C3;
  --sidebar-accent-foreground: #231C16;
  --sidebar-border: color-mix(in oklab, var(--foreground) 11%, transparent);
  --sidebar-ring: #A23C1C;
  --action: #A23C1C;
  --action-foreground: #FFFFFF;
  --elev-card: 0 1px 0 rgb(35 28 22 / 0.05), 0 26px 60px -30px rgb(80 45 15 / 0.38);
  --elev-control: 0 0 0 1px rgb(35 28 22 / 0.09), 0 1px 2px rgb(35 28 22 / 0.06), 0 4px 12px -4px rgb(80 45 15 / 0.14);
  --elev-ink: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 8px 20px -10px rgb(120 40 10 / 0.6);
  --elev-float: 0 0 0 1px rgb(35 28 22 / 0.08), 0 16px 40px -12px rgb(80 45 15 / 0.26);
  --dither-a: #C98D6E;
  --dither-b: #D9B45F;
  --studio-accent: #A23C1C;
}

/* Lamplight: brown-black, cream ink, the terracotta warmed to coral. */
html[data-design="paperback"].dark:not([data-read-theme]) {
  color-scheme: dark;
  --background: #1A1511;
  --foreground: #F2E9DB;
  --card: #231C17;
  --card-foreground: #F2E9DB;
  --popover: #29211B;
  --popover-foreground: #F2E9DB;
  --primary: #F0916A;
  --primary-foreground: #1A1511;
  --secondary: #2A221B;
  --secondary-foreground: #DDD0BE;
  --muted: #251E18;
  --muted-foreground: #B4A592;
  --accent: #30271F;
  --accent-foreground: #F2E9DB;
  --accent-ink: #F7BC9F;
  --highlight: #E8C25A;
  --highlight-foreground: #1A1511;
  --destructive: #F28B78;
  --destructive-foreground: #1A1511;
  --success: #82C78E;
  --success-foreground: #1A1511;
  --success-tint: #17251A;
  --warning: #E8B85A;
  --warning-foreground: #1A1511;
  --warning-tint: #2B2113;
  --info: #7DB6E0;
  --info-foreground: #1A1511;
  --info-tint: #12212D;
  --border: color-mix(in oklab, var(--foreground) 12%, transparent);
  --input: #362C23;
  --control: #7F705F;
  --ring: #F0916A;
  --chart-1: #F0916A;
  --chart-2: #E3B25A;
  --chart-3: #93B596;
  --chart-4: #F2E9DB;
  --chart-5: #D7A58C;
  --sidebar: #16120E;
  --sidebar-foreground: #F2E9DB;
  --sidebar-primary: #F0916A;
  --sidebar-primary-foreground: #1A1511;
  --sidebar-accent: #2D241D;
  --sidebar-accent-foreground: #F2E9DB;
  --sidebar-border: color-mix(in oklab, var(--foreground) 12%, transparent);
  --sidebar-ring: #F0916A;
  --action: #EE8E66;
  --action-foreground: #1A1511;
  --elev-card: 0 0 0 1px rgb(255 240 220 / 0.07), 0 30px 70px -24px rgb(0 0 0 / 0.7);
  --elev-control: 0 0 0 1px rgb(255 240 220 / 0.09), 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px -4px rgb(0 0 0 / 0.5);
  --elev-ink: inset 0 -1px 0 rgb(26 21 17 / 0.14), 0 8px 20px -10px rgb(0 0 0 / 0.8);
  --elev-float: 0 0 0 1px rgb(255 240 220 / 0.09), 0 16px 40px -12px rgb(0 0 0 / 0.6);
  --dither-a: #7A4A36;
  --dither-b: #6E5A2E;
  --studio-accent: #A23C1C;
}

/* A two-tone heading's second half is set as a book sets a subtitle: in
   italic. A stacked one (the site's section headings) also takes the
   terracotta; an inline one (the app's page headings, a book's own subtitle)
   keeps its quiet ink, so a long subtitle never shouts. */
html[data-design="paperback"] .font-heading > .text-muted-foreground {
  font-style: italic;
}
html[data-design="paperback"] .font-heading > .text-muted-foreground.block {
  color: var(--primary);
}

/* Alternate sections sit on a band of sand, ruled top and bottom: on the
   landing, and /pricing's table of what a book costs. */
html[data-design="paperback"]:not([data-read-theme]) :is(#jobs, #how, #samples, #pricing, #credit-math) {
  background-color: var(--secondary);
  border-block: 1px solid var(--border);
}

/* ===========================================================================
   Pop — the default look. Neo-brutalist, after Gumroad. Off-white, pure
   ink, flat blocks of yellow, pink, periwinkle and teal; every card and
   button outlined in ink with a hard offset shadow; Bricolage Grotesque,
   heavy and tight; the dither's dots in pink and yellow, like Ben-Day dots.
   Pink is too light to be text, so links and focus take a deep magenta.
   =========================================================================== */

html[data-design="pop"] {
  --heading-face: var(--font-bricolage), ui-sans-serif, system-ui, sans-serif;
  /* A wide, heavy face: the hero's headline a step smaller keeps clear of the
     paperbacks either side of it. */
  --size-display: clamp(2.5rem, 1.35rem + 4.5vw, 4.25rem);
  --weight-display: 700;
  --weight-h1: 700;
  --weight-h2: 700;
  --weight-h3: 700;
  --tracking-display: -0.04em;
  --tracking-h1: -0.035em;
  --tracking-h2: -0.03em;
  --tracking-h3: -0.02em;
  --radius: 0.5rem;
  --card-radius: 0.875rem;
}

html[data-design="pop"]:not([data-read-theme]) {
  color-scheme: light;
  --background: #F4F3EE;
  --foreground: #111111;
  --card: #FFFFFF;
  --card-foreground: #111111;
  --popover: #FFFFFF;
  --popover-foreground: #111111;
  --primary: #B4136F;
  --primary-foreground: #FFFFFF;
  --secondary: #FFF1B8;
  --secondary-foreground: #2E2A1C;
  --muted: #EBE9E1;
  --muted-foreground: #54524A;
  --accent: #FDE4F5;
  --accent-foreground: #111111;
  --accent-ink: #8E0E57;
  --highlight: #FFC900;
  --highlight-foreground: #111111;
  --destructive: #C1121F;
  --destructive-foreground: #FFFFFF;
  --success: #0B7A3B;
  --success-foreground: #FFFFFF;
  --success-tint: #DDF5E6;
  --warning: #865500;
  --warning-foreground: #FFFFFF;
  --warning-tint: #FFF0C7;
  --info: #1C5FA6;
  --info-foreground: #FFFFFF;
  --info-tint: #E1EDFB;
  --border: var(--foreground);
  --input: #E3E1D9;
  --control: #111111;
  --ring: #B4136F;
  --chart-1: #FF90E8;
  --chart-2: #FFC900;
  --chart-3: #23A094;
  --chart-4: #111111;
  --chart-5: #90A8ED;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #111111;
  --sidebar-primary: #111111;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #FF90E8;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: var(--foreground);
  --sidebar-ring: #B4136F;
  --action: #FF90E8;
  --action-foreground: #111111;
  /* The outline and the hard shadow, which the buttons' hover and press
     redraw (below). */
  --pop-line: #111111;
  --pop-shadow: #111111;
  --elev-card: 0 0 0 2px var(--pop-line), 6px 6px 0 0 var(--pop-shadow);
  --elev-control: 0 0 0 2px var(--pop-line), 3px 3px 0 0 var(--pop-shadow);
  --elev-ink: 0 0 0 2px var(--pop-line), 4px 4px 0 0 var(--pop-shadow);
  --elev-float: 0 0 0 2px var(--pop-line), 6px 6px 0 0 var(--pop-shadow);
  --dither-a: #FF90E8;
  --dither-b: #FFC900;
  --studio-accent: #B4136F;
}

/* At night the outline turns to the light ink and the shadow to black; pink
   stays the button. */
html[data-design="pop"].dark:not([data-read-theme]) {
  color-scheme: dark;
  --background: #191817;
  --foreground: #F4F3EE;
  --card: #242321;
  --card-foreground: #F4F3EE;
  --popover: #2A2927;
  --popover-foreground: #F4F3EE;
  --primary: #FF90E8;
  --primary-foreground: #111111;
  --secondary: #2B2718;
  --secondary-foreground: #EDE6C8;
  --muted: #222120;
  --muted-foreground: #B2B0A7;
  --accent: #3A2434;
  --accent-foreground: #F4F3EE;
  --accent-ink: #FFB8F0;
  --highlight: #FFC900;
  --highlight-foreground: #111111;
  --destructive: #FF8585;
  --destructive-foreground: #111111;
  --success: #5BD08A;
  --success-foreground: #111111;
  --success-tint: #122619;
  --warning: #FFC24D;
  --warning-foreground: #111111;
  --warning-tint: #2C2410;
  --info: #7DB8FF;
  --info-foreground: #111111;
  --info-tint: #12223A;
  --border: color-mix(in oklab, var(--foreground) 50%, transparent);
  --input: #33322F;
  --control: #8A8880;
  --ring: #FF90E8;
  --chart-1: #FF90E8;
  --chart-2: #FFC900;
  --chart-3: #35C2B3;
  --chart-4: #F4F3EE;
  --chart-5: #A9BCF5;
  --sidebar: #121110;
  --sidebar-foreground: #F4F3EE;
  --sidebar-primary: #111111;
  --sidebar-primary-foreground: #F4F3EE;
  --sidebar-accent: #FF90E8;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: color-mix(in oklab, var(--foreground) 50%, transparent);
  --sidebar-ring: #FF90E8;
  --action: #FF90E8;
  --action-foreground: #111111;
  --pop-line: #F4F3EE;
  --pop-shadow: #000000;
  --elev-card: 0 0 0 2px var(--pop-line), 6px 6px 0 0 var(--pop-shadow);
  --elev-control: 0 0 0 2px var(--pop-line), 3px 3px 0 0 var(--pop-shadow);
  --elev-ink: 0 0 0 2px var(--pop-line), 4px 4px 0 0 var(--pop-shadow);
  --elev-float: 0 0 0 2px var(--pop-line), 6px 6px 0 0 var(--pop-shadow);
  --dither-a: #B0459C;
  --dither-b: #A88400;
  --studio-accent: #B4136F;
}

/* Chunky buttons: squared off, filled under their own (transparent) border,
   lifting on hover and pressing flat on a click. An alert dialog's two
   buttons are Buttons that carry their own slot (components/ui/
   alert-dialog.tsx), so they are named too: a confirm's Cancel and its action
   share one shape. */
html[data-design="pop"] :is([data-slot="button"], [data-slot="alert-dialog-action"], [data-slot="alert-dialog-cancel"]) {
  border-radius: 0.5rem;
  background-clip: border-box;
}
html[data-design="pop"]:not([data-read-theme]) :is([data-slot="button"], [data-slot="alert-dialog-action"], [data-slot="alert-dialog-cancel"]):is([data-variant="default"], [data-variant="secondary"]):not(:disabled):hover {
  translate: -1px -1px;
  box-shadow: 0 0 0 2px var(--pop-line), 5px 5px 0 0 var(--pop-shadow);
}
html[data-design="pop"]:not([data-read-theme]) :is([data-slot="button"], [data-slot="alert-dialog-action"], [data-slot="alert-dialog-cancel"]):is([data-variant="default"], [data-variant="secondary"]):not(:disabled):active {
  translate: 2px 2px;
  box-shadow: 0 0 0 2px var(--pop-line), 1px 1px 0 0 var(--pop-shadow);
}
/* A card that is one link (the blog's article cards, `data-pop-lift`) lifts
   as the buttons do: up and to the left, its hard shadow growing under it, so
   its far edge stays where it was. */
html[data-design="pop"]:not([data-read-theme]) [data-pop-lift]:hover {
  translate: -2px -2px;
  box-shadow: 0 0 0 2px var(--pop-line), 8px 8px 0 0 var(--pop-shadow);
}
/* A button set inside a field (the idea box's and the composers' send, a
   material card's Add) drops every shadow (components/ui/input-group.tsx),
   and in Pop the shadow IS the outline: pink on the white field would have
   no edge. It keeps the ink ring; the hover lift above still adds the rest. */
html[data-design="pop"]:not([data-read-theme]) [data-slot="input-group"] [data-slot="button"][data-variant="default"] {
  box-shadow: 0 0 0 2px var(--pop-line);
}

/* A stacked two-tone heading's second half (the site's section headings):
   ink, with a yellow marker under it. Inline ones, in the app, stay quiet. */
html[data-design="pop"] .font-heading > .text-muted-foreground.block {
  color: var(--foreground);
  text-decoration-line: underline;
  text-decoration-color: var(--highlight);
  text-decoration-thickness: 0.16em;
  text-underline-offset: 0.08em;
  text-decoration-skip-ink: none;
}

/* Full-bleed colour blocks between the plain sections, ruled in ink: on the
   landing, and /pricing's plans (on yellow, like Gumroad's own pricing page)
   and extras. On a saturated block every word is ink, as on Gumroad's. */
html[data-design="pop"]:not([data-read-theme]) :is(#jobs, #coloring, #from-notes, #ai-apps, #honest, #start, section[aria-labelledby="plans-title"], #extras) {
  background-color: var(--band);
  border-block: 2px solid var(--foreground);
}
html[data-design="pop"]:not([data-read-theme]):not(.dark) :is(#jobs, #coloring, #from-notes, #ai-apps, #honest, #start, section[aria-labelledby="plans-title"], #extras) {
  --muted-foreground: #1E1D1A;
  --secondary-foreground: #111111;
  --primary: #111111;
  --accent-ink: #111111;
  --ring: #111111;
}
html[data-design="pop"]:not([data-read-theme]) #jobs { --band: #FFC900; }
html[data-design="pop"]:not([data-read-theme]) #coloring { --band: #FF90E8; }
html[data-design="pop"]:not([data-read-theme]) #from-notes { --band: #90A8ED; }
html[data-design="pop"]:not([data-read-theme]) #ai-apps { --band: #FF90E8; }
html[data-design="pop"]:not([data-read-theme]) #honest { --band: #23A094; }
html[data-design="pop"]:not([data-read-theme]) #start { --band: #FFC900; }
html[data-design="pop"]:not([data-read-theme]) section[aria-labelledby="plans-title"] { --band: #FFC900; }
html[data-design="pop"]:not([data-read-theme]) #extras { --band: #23A094; }
/* At night the blocks keep their hues, deep; yellow has no deep that isn't
   mud, so its blocks turn navy and magenta. */
html[data-design="pop"].dark:not([data-read-theme]) #jobs { --band: #1D2752; }
html[data-design="pop"].dark:not([data-read-theme]) #coloring { --band: #431539; }
html[data-design="pop"].dark:not([data-read-theme]) #from-notes { --band: #0B3A34; }
html[data-design="pop"].dark:not([data-read-theme]) #ai-apps { --band: #431539; }
html[data-design="pop"].dark:not([data-read-theme]) #honest { --band: #2E1B4E; }
html[data-design="pop"].dark:not([data-read-theme]) #start { --band: #431539; }
html[data-design="pop"].dark:not([data-read-theme]) section[aria-labelledby="plans-title"] { --band: #1D2752; }
html[data-design="pop"].dark:not([data-read-theme]) #extras { --band: #2E1B4E; }

/* ===========================================================================
   Playroom — pastel crayon. Warm white, soft plum ink, a grape button with a
   pressed edge; mint, peach, lavender, butter and sky panels with round
   corners; Fredoka for the headings. Made for coloring books. (headspace.com,
   duolingo.com, cocowyo.com, tocaboca.com.)
   =========================================================================== */

html[data-design="playroom"] {
  --heading-face: var(--font-fredoka), ui-rounded, ui-sans-serif, system-ui, sans-serif;
  --size-display: clamp(2.6rem, 1.45rem + 4.7vw, 4.5rem);
  --weight-display: 600;
  --weight-h1: 600;
  --weight-h2: 600;
  --weight-h3: 600;
  --tracking-display: -0.012em;
  --tracking-h1: -0.01em;
  --tracking-h2: -0.008em;
  --tracking-h3: -0.004em;
  --radius: 1rem;
  --card-radius: 2rem;
}

html[data-design="playroom"]:not([data-read-theme]) {
  color-scheme: light;
  --background: #FFF8F1;
  --foreground: #2D2A3E;
  --card: #FFFFFF;
  --card-foreground: #2D2A3E;
  --popover: #FFFFFF;
  --popover-foreground: #2D2A3E;
  --primary: #6340D0;
  --primary-foreground: #FFFFFF;
  --secondary: #F1EBFF;
  --secondary-foreground: #3D3657;
  --muted: #F6EFE7;
  --muted-foreground: #625B76;
  --accent: #EEE7FF;
  --accent-foreground: #2D2A3E;
  --accent-ink: #4F2FB4;
  --highlight: #FFE070;
  --highlight-foreground: #2D2A3E;
  --destructive: #BC2A35;
  --destructive-foreground: #FFFFFF;
  --success: #167447;
  --success-foreground: #FFFFFF;
  --success-tint: #DDF5E7;
  --warning: #8A5800;
  --warning-foreground: #FFFFFF;
  --warning-tint: #FFF0C9;
  --info: #1D67A8;
  --info-foreground: #FFFFFF;
  --info-tint: #DDEEFF;
  --border: color-mix(in oklab, var(--foreground) 10%, transparent);
  --input: #ECE5F4;
  --control: #837B9A;
  --ring: #6340D0;
  --chart-1: #6340D0;
  --chart-2: #FF8A65;
  --chart-3: #2FB57B;
  --chart-4: #FFC542;
  --chart-5: #4FA3F7;
  --sidebar: #F6F1FF;
  --sidebar-foreground: #2D2A3E;
  --sidebar-primary: #6340D0;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #E8DEFF;
  --sidebar-accent-foreground: #2D2A3E;
  --sidebar-border: color-mix(in oklab, var(--foreground) 10%, transparent);
  --sidebar-ring: #6340D0;
  --action: #6340D0;
  --action-foreground: #FFFFFF;
  /* The button's pressed edge, which a click pushes it down onto (below). */
  --press-edge: #3F2797;
  --elev-card: 0 2px 0 rgb(45 42 62 / 0.05), 0 22px 48px -26px rgb(99 64 208 / 0.35);
  --elev-control: 0 0 0 1.5px rgb(45 42 62 / 0.09), 0 3px 0 0 rgb(45 42 62 / 0.07);
  --elev-ink: 0 4px 0 0 var(--press-edge);
  --elev-float: 0 0 0 1px rgb(45 42 62 / 0.08), 0 18px 40px -14px rgb(99 64 208 / 0.3);
  --dither-a: #B7A6F0;
  --dither-b: #FFB49A;
  --studio-accent: #6340D0;
}

/* Night light: deep plum, lavender ink, a lilac button. */
html[data-design="playroom"].dark:not([data-read-theme]) {
  color-scheme: dark;
  --background: #1C192A;
  --foreground: #F3EFFF;
  --card: #262237;
  --card-foreground: #F3EFFF;
  --popover: #2C273F;
  --popover-foreground: #F3EFFF;
  --primary: #B9A5FF;
  --primary-foreground: #1C192A;
  --secondary: #29243D;
  --secondary-foreground: #DCD5F2;
  --muted: #241F35;
  --muted-foreground: #AEA7C7;
  --accent: #302A47;
  --accent-foreground: #F3EFFF;
  --accent-ink: #D5CAFF;
  --highlight: #F2D25E;
  --highlight-foreground: #1C192A;
  --destructive: #FF8A8F;
  --destructive-foreground: #1C192A;
  --success: #6FD6A0;
  --success-foreground: #1C192A;
  --success-tint: #15291F;
  --warning: #F5C060;
  --warning-foreground: #1C192A;
  --warning-tint: #2C2414;
  --info: #86C2FF;
  --info-foreground: #1C192A;
  --info-tint: #152338;
  --border: color-mix(in oklab, var(--foreground) 12%, transparent);
  --input: #352F4C;
  --control: #7F789A;
  --ring: #B9A5FF;
  --chart-1: #B9A5FF;
  --chart-2: #FFA68A;
  --chart-3: #6FD6A0;
  --chart-4: #F5C96A;
  --chart-5: #86C2FF;
  --sidebar: #18152A;
  --sidebar-foreground: #F3EFFF;
  --sidebar-primary: #B9A5FF;
  --sidebar-primary-foreground: #1C192A;
  --sidebar-accent: #332C50;
  --sidebar-accent-foreground: #F3EFFF;
  --sidebar-border: color-mix(in oklab, var(--foreground) 12%, transparent);
  --sidebar-ring: #B9A5FF;
  --action: #B39CFF;
  --action-foreground: #1C192A;
  --press-edge: #6A55C8;
  --elev-card: 0 0 0 1px rgb(255 255 255 / 0.07), 0 24px 50px -24px rgb(0 0 0 / 0.7);
  --elev-control: 0 0 0 1px rgb(255 255 255 / 0.08), 0 3px 0 0 rgb(0 0 0 / 0.35);
  --elev-ink: 0 4px 0 0 var(--press-edge);
  --elev-float: 0 0 0 1px rgb(255 255 255 / 0.08), 0 18px 40px -14px rgb(0 0 0 / 0.6);
  --dither-a: #5B4A9A;
  --dither-b: #8A5446;
  --studio-accent: #6340D0;
}

/* The main button sits on its pressed edge, and a click pushes it down. */
html[data-design="playroom"]:not([data-read-theme]) [data-slot="button"][data-variant="default"]:not(:disabled):active {
  translate: 0 3px;
  box-shadow: 0 1px 0 0 var(--press-edge);
}

/* A stacked two-tone heading's second half in the grape; inline ones, in the
   app, stay quiet. */
html[data-design="playroom"] .font-heading > .text-muted-foreground.block {
  color: var(--primary);
}

/* Pastel panels with round corners, inset from the page's edges: on the
   landing, and /pricing's plans and extras. */
html[data-design="playroom"]:not([data-read-theme]) :is(#jobs, #coloring, #from-notes, #honest, #pricing, #start, section[aria-labelledby="plans-title"], #extras) {
  background-color: var(--band);
  border-radius: clamp(1.75rem, 4vw, 3rem);
  margin: 0.75rem clamp(0.5rem, 1.5vw, 1.25rem);
}
html[data-design="playroom"]:not([data-read-theme]) #jobs { --band: #DCF5E7; }
html[data-design="playroom"]:not([data-read-theme]) #coloring { --band: #FFE6D8; }
html[data-design="playroom"]:not([data-read-theme]) #from-notes { --band: #ECE5FF; }
html[data-design="playroom"]:not([data-read-theme]) #honest { --band: #FFF2C4; }
html[data-design="playroom"]:not([data-read-theme]) #pricing { --band: #DDEFFF; }
html[data-design="playroom"]:not([data-read-theme]) #start { --band: #FFE6D8; }
html[data-design="playroom"]:not([data-read-theme]) section[aria-labelledby="plans-title"] { --band: #ECE5FF; }
html[data-design="playroom"]:not([data-read-theme]) #extras { --band: #DCF5E7; }
/* At night the pastels stay in the plum's family, each a shade of its hue. */
html[data-design="playroom"].dark:not([data-read-theme]) #jobs { --band: #1D2A36; }
html[data-design="playroom"].dark:not([data-read-theme]) #coloring { --band: #33213A; }
html[data-design="playroom"].dark:not([data-read-theme]) #from-notes { --band: #2A2444; }
html[data-design="playroom"].dark:not([data-read-theme]) #honest { --band: #2F2834; }
html[data-design="playroom"].dark:not([data-read-theme]) #pricing { --band: #1E2541; }
html[data-design="playroom"].dark:not([data-read-theme]) #start { --band: #33213A; }
html[data-design="playroom"].dark:not([data-read-theme]) section[aria-labelledby="plans-title"] { --band: #2A2444; }
html[data-design="playroom"].dark:not([data-read-theme]) #extras { --band: #1D2A36; }