/* ── Claymorphism UI kit tokens (uiCookies) — identical in every set ──────────────
Every component is a puffy pastel object floating above --clay-bg: one big soft drop shadow
below it, an inset highlight top left and an inset shade bottom right. Change a token and
the whole kit follows; the shadow recipes below are built from these values. */
:root{
--clay-bg:#f3effa; /* page, a pale lilac white */
--clay-surface:#fffcf8; /* cards, fields and plain objects */
--clay-peach:#ffd2bd; /* object fills: ink text on every fill reaches 11:1 */
--clay-lilac:#dccdff;
--clay-mint:#bdeed6;
--clay-sky:#c2e0ff;
--clay-lemon:#ffe9a3;
--clay-ink:#241a3d; /* text, 14.4:1 on --clay-bg */
--clay-muted:#51476a; /* secondary text, 5.7:1 or more on every fill */
--clay-edge:#7a6e96; /* control boundary, 4.1:1 on --clay-bg, so shadows are never the only edge */
--clay-line:rgba(36,26,61,.12); /* decorative edge on cards and panels */
--clay-accent:#6236e8; /* focus ring and on / selected / current states, 5.8:1 on --clay-bg */
--clay-on-accent:#ffffff; /* text and marks on accent fills, 6.5:1 */
--clay-tint:#e9e1ff; /* light accent wash behind current items */
--clay-drop:rgba(86,56,168,.30); /* colour of the outer drop shadow */
--clay-hi:rgba(255,255,255,.88); /* inset highlight, top left */
--clay-lo:rgba(52,30,112,.20); /* inset shade, bottom right */
--clay-lift:14px; /* how high objects float; every shadow scales from it */
--clay-radius:30px; /* cards; buttons are pills, fields use .55 of it */
--clay-bw:1.5px; /* control border width */
--clay-success:#17663d;--clay-warning:#8a4b00;--clay-danger:#b3261e;
--clay-font:ui-rounded,"SF Pro Rounded","Nunito","Quicksand","Varela Round","Arial Rounded MT Bold",system-ui,sans-serif;
}
/* --clay-fill is set by .clay-peach, .clay-mint… on one object and must not leak into its children */
@property --clay-fill{syntax:"*";inherits:false}
/* Dark clay: data-clay="dark" on any wrapper, or a checked .clay-theme-input inside a [data-clay] element.
:is() is a forgiving list, so browsers without :has() still apply data-clay="dark" */
[data-clay]:is([data-clay="dark"],:has(.clay-theme-input:checked)){
--clay-bg:#1a1530;--clay-surface:#2a2347;
--clay-peach:#6e3f33;--clay-lilac:#4a3a8a;--clay-mint:#215a4a;--clay-sky:#26497c;--clay-lemon:#5f5220;
--clay-ink:#f7f3ff;--clay-muted:#d2c9ea;--clay-edge:#8f83b8;--clay-line:rgba(255,255,255,.1);
--clay-accent:#bba6ff;--clay-on-accent:#1a1530;--clay-tint:#3a2f66;
--clay-drop:rgba(4,2,14,.62);--clay-hi:rgba(255,255,255,.2);--clay-lo:rgba(0,0,0,.34);
--clay-success:#86e3b0;--clay-warning:#ffc76e;--clay-danger:#ffa196;color-scheme:dark}
/* More contrast requested: soft shading stays, but every edge and secondary text turns full ink */
@media (prefers-contrast:more){:root,[data-clay]:is([data-clay],:has(.clay-theme-input:checked)){
--clay-edge:var(--clay-ink);--clay-line:var(--clay-ink);--clay-muted:var(--clay-ink);--clay-bw:2px}}
:root,[data-clay]{
--clay-shadow:0 var(--clay-lift) calc(var(--clay-lift)*2.2) calc(var(--clay-lift)*-.3) var(--clay-drop),
inset calc(var(--clay-lift)*.45) calc(var(--clay-lift)*.5) calc(var(--clay-lift)*.9) var(--clay-hi),
inset calc(var(--clay-lift)*-.45) calc(var(--clay-lift)*-.6) calc(var(--clay-lift)*.9) var(--clay-lo);
--clay-shadow-sm:0 calc(var(--clay-lift)*.55) calc(var(--clay-lift)*1.2) calc(var(--clay-lift)*-.15) var(--clay-drop),
inset calc(var(--clay-lift)*.25) calc(var(--clay-lift)*.3) calc(var(--clay-lift)*.5) var(--clay-hi),
inset calc(var(--clay-lift)*-.25) calc(var(--clay-lift)*-.35) calc(var(--clay-lift)*.5) var(--clay-lo);
--clay-press:0 calc(var(--clay-lift)*.12) calc(var(--clay-lift)*.25) 0 var(--clay-drop),
inset calc(var(--clay-lift)*.2) calc(var(--clay-lift)*.25) calc(var(--clay-lift)*.45) var(--clay-lo),
inset calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*.3) var(--clay-hi);
--clay-well:inset calc(var(--clay-lift)*.15) calc(var(--clay-lift)*.22) calc(var(--clay-lift)*.45) var(--clay-lo),
inset calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*.3) var(--clay-hi);
}
[data-clay]{background:var(--clay-bg);color:var(--clay-ink)}
/* Components */
:where([class*="clay-"]),:where([class*="clay-"])::before,:where([class*="clay-"])::after{box-sizing:border-box}
.clay-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.clay-ico{width:22px;height:22px;flex:none}
.clay-ico--lg{width:28px;height:28px}
/* Fills: put one on any object; components read --clay-fill */
.clay-peach{--clay-fill:var(--clay-peach)}.clay-lilac{--clay-fill:var(--clay-lilac)}.clay-mint{--clay-fill:var(--clay-mint)}
.clay-sky{--clay-fill:var(--clay-sky)}.clay-lemon{--clay-fill:var(--clay-lemon)}
/* Card: a puffy panel that floats on the big drop shadow */
.clay-card{margin:0;padding:1.6rem;border:var(--clay-bw) solid var(--clay-line);border-radius:var(--clay-radius);
background:var(--clay-fill,var(--clay-surface));color:var(--clay-ink);box-shadow:var(--clay-shadow)}
/* Layout helpers */
.clay-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.clay-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:22px}
.clay-stack{display:grid;gap:1.4rem}
/* Buttons: pastel pills that float; hover lifts them, pressing squashes the shadow flat */
.clay-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:50px;margin:0;padding:.7rem 1.5rem;
border:var(--clay-bw) solid var(--clay-edge);border-radius:999px;background:var(--clay-fill,var(--clay-surface));color:var(--clay-ink);
font-family:inherit;font-size:1rem;font-weight:800;line-height:1.2;text-decoration:none;cursor:pointer;
box-shadow:var(--clay-shadow-sm);transition:transform .18s,box-shadow .18s}
.clay-btn:hover{transform:translateY(-2px);box-shadow:var(--clay-shadow)}
.clay-btn:active{transform:translateY(2px);box-shadow:var(--clay-press)}
.clay-btn:focus-visible{outline:3px solid var(--clay-accent);outline-offset:4px}
.clay-btn--accent{--clay-fill:var(--clay-accent);border-color:var(--clay-accent);color:var(--clay-on-accent)}
.clay-btn--sm{min-height:40px;padding:.45rem 1.05rem;font-size:.88rem}
.clay-btn--block{width:100%}
/* Icon buttons: round (or squircle) clay pebbles with a chunky icon and an aria-label */
.clay-iconbtn{display:inline-grid;place-items:center;width:58px;height:58px;margin:0;padding:0;border:var(--clay-bw) solid var(--clay-edge);border-radius:50%;
background:var(--clay-fill,var(--clay-surface));color:var(--clay-ink);cursor:pointer;box-shadow:var(--clay-shadow-sm);transition:transform .18s,box-shadow .18s}
.clay-iconbtn:hover{transform:translateY(-2px);box-shadow:var(--clay-shadow)}
.clay-iconbtn:active{transform:translateY(2px);box-shadow:var(--clay-press)}
.clay-iconbtn:focus-visible{outline:3px solid var(--clay-accent);outline-offset:4px}
.clay-iconbtn--sq{border-radius:20px}
.clay-iconbtn--sm{width:44px;height:44px}
.clay-iconbtn--lg{width:72px;height:72px}
.clay-iconbtn--accent{--clay-fill:var(--clay-accent);border-color:var(--clay-accent);color:var(--clay-on-accent)}
@media (prefers-reduced-motion:reduce){.clay-btn,.clay-iconbtn{transition:none}.clay-btn:hover,.clay-btn:active,.clay-iconbtn:hover,.clay-iconbtn:active{transform:none}}
/* Toggle tiles: a visually hidden checkbox and a puffy face. On = squashed flat (pressed shadow),
an accent edge, a filled tick badge and the word On — never the shadow alone */
.clay-toggle{position:relative;display:block;cursor:pointer}
.clay-toggle__face{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;height:100%;padding:1.1rem 1.2rem 1rem;
border:var(--clay-bw) solid var(--clay-edge);border-radius:calc(var(--clay-radius)*.8);background:var(--clay-fill,var(--clay-surface));color:var(--clay-ink);
box-shadow:var(--clay-shadow);transition:transform .2s,box-shadow .2s,border-color .2s}
.clay-toggle__icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:.4rem;border-radius:17px;background:var(--clay-surface);box-shadow:var(--clay-shadow-sm)}
.clay-toggle__name{font-size:1.02rem;font-weight:800;line-height:1.25}
.clay-toggle__state{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:800;color:var(--clay-muted)}
.clay-toggle__state::after{content:"Off"}
.clay-toggle__mark{display:grid;place-items:center;width:20px;height:20px;border:2px solid var(--clay-edge);border-radius:50%;color:transparent;background:var(--clay-surface)}
.clay-toggle__mark .clay-ico{width:14px;height:14px}
.clay-toggle input:checked+.clay-toggle__face{transform:translateY(4px);border-color:var(--clay-accent);box-shadow:var(--clay-press)}
.clay-toggle input:checked+.clay-toggle__face .clay-toggle__state{color:var(--clay-ink)}
.clay-toggle input:checked+.clay-toggle__face .clay-toggle__state::after{content:"On"}
.clay-toggle input:checked+.clay-toggle__face .clay-toggle__mark{border-color:var(--clay-accent);background:var(--clay-accent);color:var(--clay-on-accent)}
.clay-toggle input:focus-visible+.clay-toggle__face{outline:3px solid var(--clay-accent);outline-offset:4px}
/* Icon toggle: a checkbox behind a round pebble; on = pressed flat, accent and the outline icon becomes a filled one */
.clay-itoggle{position:relative;display:inline-flex}
.clay-itoggle__face{display:grid;place-items:center;width:58px;height:58px;border:var(--clay-bw) solid var(--clay-edge);border-radius:50%;
background:var(--clay-fill,var(--clay-surface));color:var(--clay-ink);box-shadow:var(--clay-shadow-sm);cursor:pointer;transition:transform .18s,box-shadow .18s}
.clay-itoggle__on{display:none}
.clay-itoggle input:checked+.clay-itoggle__face{transform:translateY(3px);border-color:var(--clay-accent);box-shadow:var(--clay-press)}
.clay-itoggle input:checked+.clay-itoggle__face .clay-itoggle__off{display:none}
.clay-itoggle input:checked+.clay-itoggle__face .clay-itoggle__on{display:block}
.clay-itoggle input:focus-visible+.clay-itoggle__face{outline:3px solid var(--clay-accent);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.clay-toggle__face,.clay-itoggle__face{transition:none}}
/* Switches: a checkbox with role="switch". On = the puffy knob slides right, the track fills with accent and says On */
.clay-switch{position:relative;display:flex;align-items:center;gap:1rem;cursor:pointer}
.clay-switch__text{flex:1;min-width:0;font-weight:800;line-height:1.3}
.clay-switch__hint{display:block;margin-top:.15rem;font-size:.86rem;font-weight:500;color:var(--clay-muted)}
.clay-switch__state{min-width:2.2em;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-align:right;text-transform:uppercase;color:var(--clay-muted)}
.clay-switch__state::after{content:"Off"}
.clay-switch__track{position:relative;flex:none;width:64px;height:36px;border:var(--clay-bw) solid var(--clay-edge);border-radius:999px;
background:var(--clay-bg);box-shadow:var(--clay-well);transition:background-color .2s,border-color .2s}
.clay-switch__track::before{content:"";position:absolute;top:50%;left:3px;width:27px;height:27px;margin-top:-13.5px;border:var(--clay-bw) solid var(--clay-edge);
border-radius:50%;background:var(--clay-surface);box-shadow:var(--clay-shadow-sm);transition:transform .2s}
.clay-switch input:checked~.clay-switch__track{background:var(--clay-accent);border-color:var(--clay-accent)}
.clay-switch input:checked~.clay-switch__track::before{transform:translateX(28px);border-color:var(--clay-on-accent)}
.clay-switch input:checked~.clay-switch__state{color:var(--clay-accent)}
.clay-switch input:checked~.clay-switch__state::after{content:"On"}
.clay-switch input:focus-visible~.clay-switch__track{outline:3px solid var(--clay-accent);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.clay-switch__track,.clay-switch__track::before{transition:none}}
/* Segmented control: radios in a fieldset. The chosen option pops up out of the tray as a lifted pebble with a dot */
.clay-seg{min-width:0;margin:0;padding:0;border:0}
.clay-seg__legend{float:none;width:auto;margin:0 0 .65rem;padding:0;font-size:.92rem;font-weight:800;line-height:1.4}
.clay-seg__opts{display:flex;flex-wrap:wrap;gap:6px;padding:6px;border:var(--clay-bw) solid var(--clay-edge);border-radius:999px;background:var(--clay-bg);box-shadow:var(--clay-well)}
.clay-seg__opt{position:relative;flex:1 1 auto;display:flex}
.clay-seg__face{display:flex;flex:1;align-items:center;justify-content:center;gap:.4rem;min-height:42px;padding:.4rem 1rem;border:var(--clay-bw) solid transparent;
border-radius:999px;color:var(--clay-muted);font-size:.92rem;font-weight:800;cursor:pointer;transition:box-shadow .18s,background-color .18s}
.clay-seg__opt input:checked+.clay-seg__face{border-color:var(--clay-accent);background:var(--clay-surface);color:var(--clay-accent);box-shadow:var(--clay-shadow-sm)}
.clay-seg__opt input:checked+.clay-seg__face::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.clay-seg__opt input:focus-visible+.clay-seg__face{outline:3px solid var(--clay-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.clay-seg__face{transition:none}}
/* ── Claymorphism UI kit tokens (uiCookies) — identical in every set ──────────────
Every component is a puffy pastel object floating above --clay-bg: one big soft drop shadow
below it, an inset highlight top left and an inset shade bottom right. Change a token and
the whole kit follows; the shadow recipes below are built from these values. */
:root{
--clay-bg:#f3effa; /* page, a pale lilac white */
--clay-surface:#fffcf8; /* cards, fields and plain objects */
--clay-peach:#ffd2bd; /* object fills: ink text on every fill reaches 11:1 */
--clay-lilac:#dccdff;
--clay-mint:#bdeed6;
--clay-sky:#c2e0ff;
--clay-lemon:#ffe9a3;
--clay-ink:#241a3d; /* text, 14.4:1 on --clay-bg */
--clay-muted:#51476a; /* secondary text, 5.7:1 or more on every fill */
--clay-edge:#7a6e96; /* control boundary, 4.1:1 on --clay-bg, so shadows are never the only edge */
--clay-line:rgba(36,26,61,.12); /* decorative edge on cards and panels */
--clay-accent:#6236e8; /* focus ring and on / selected / current states, 5.8:1 on --clay-bg */
--clay-on-accent:#ffffff; /* text and marks on accent fills, 6.5:1 */
--clay-tint:#e9e1ff; /* light accent wash behind current items */
--clay-drop:rgba(86,56,168,.30); /* colour of the outer drop shadow */
--clay-hi:rgba(255,255,255,.88); /* inset highlight, top left */
--clay-lo:rgba(52,30,112,.20); /* inset shade, bottom right */
--clay-lift:14px; /* how high objects float; every shadow scales from it */
--clay-radius:30px; /* cards; buttons are pills, fields use .55 of it */
--clay-bw:1.5px; /* control border width */
--clay-success:#17663d;--clay-warning:#8a4b00;--clay-danger:#b3261e;
--clay-font:ui-rounded,"SF Pro Rounded","Nunito","Quicksand","Varela Round","Arial Rounded MT Bold",system-ui,sans-serif;
}
/* --clay-fill is set by .clay-peach, .clay-mint… on one object and must not leak into its children */
@property --clay-fill{syntax:"*";inherits:false}
/* Dark clay: data-clay="dark" on any wrapper, or a checked .clay-theme-input inside a [data-clay] element.
:is() is a forgiving list, so browsers without :has() still apply data-clay="dark" */
[data-clay]:is([data-clay="dark"],:has(.clay-theme-input:checked)){
--clay-bg:#1a1530;--clay-surface:#2a2347;
--clay-peach:#6e3f33;--clay-lilac:#4a3a8a;--clay-mint:#215a4a;--clay-sky:#26497c;--clay-lemon:#5f5220;
--clay-ink:#f7f3ff;--clay-muted:#d2c9ea;--clay-edge:#8f83b8;--clay-line:rgba(255,255,255,.1);
--clay-accent:#bba6ff;--clay-on-accent:#1a1530;--clay-tint:#3a2f66;
--clay-drop:rgba(4,2,14,.62);--clay-hi:rgba(255,255,255,.2);--clay-lo:rgba(0,0,0,.34);
--clay-success:#86e3b0;--clay-warning:#ffc76e;--clay-danger:#ffa196;color-scheme:dark}
/* More contrast requested: soft shading stays, but every edge and secondary text turns full ink */
@media (prefers-contrast:more){:root,[data-clay]:is([data-clay],:has(.clay-theme-input:checked)){
--clay-edge:var(--clay-ink);--clay-line:var(--clay-ink);--clay-muted:var(--clay-ink);--clay-bw:2px}}
:root,[data-clay]{
--clay-shadow:0 var(--clay-lift) calc(var(--clay-lift)*2.2) calc(var(--clay-lift)*-.3) var(--clay-drop),
inset calc(var(--clay-lift)*.45) calc(var(--clay-lift)*.5) calc(var(--clay-lift)*.9) var(--clay-hi),
inset calc(var(--clay-lift)*-.45) calc(var(--clay-lift)*-.6) calc(var(--clay-lift)*.9) var(--clay-lo);
--clay-shadow-sm:0 calc(var(--clay-lift)*.55) calc(var(--clay-lift)*1.2) calc(var(--clay-lift)*-.15) var(--clay-drop),
inset calc(var(--clay-lift)*.25) calc(var(--clay-lift)*.3) calc(var(--clay-lift)*.5) var(--clay-hi),
inset calc(var(--clay-lift)*-.25) calc(var(--clay-lift)*-.35) calc(var(--clay-lift)*.5) var(--clay-lo);
--clay-press:0 calc(var(--clay-lift)*.12) calc(var(--clay-lift)*.25) 0 var(--clay-drop),
inset calc(var(--clay-lift)*.2) calc(var(--clay-lift)*.25) calc(var(--clay-lift)*.45) var(--clay-lo),
inset calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*.3) var(--clay-hi);
--clay-well:inset calc(var(--clay-lift)*.15) calc(var(--clay-lift)*.22) calc(var(--clay-lift)*.45) var(--clay-lo),
inset calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*.3) var(--clay-hi);
}
[data-clay]{background:var(--clay-bg);color:var(--clay-ink)}
/* Bootstrap's own variables mapped onto the kit tokens */
:root,[data-clay]{--bs-body-bg:var(--clay-bg);--bs-body-color:var(--clay-ink);--bs-body-font-family:var(--clay-font);
--bs-emphasis-color:var(--clay-ink);--bs-heading-color:var(--clay-ink);--bs-secondary-color:var(--clay-muted);--bs-tertiary-color:var(--clay-muted);
--bs-border-color:var(--clay-edge);--bs-border-width:var(--clay-bw);--bs-border-radius:calc(var(--clay-radius)*.55);
--bs-border-radius-lg:var(--clay-radius);--bs-border-radius-pill:999px;--bs-focus-ring-color:var(--clay-accent);
--bs-link-color:var(--clay-accent);--bs-link-color-rgb:98,54,232;--bs-link-hover-color:var(--clay-ink);--bs-link-hover-color-rgb:36,26,61}
/* Components */
:where([class*="clay-"]),:where([class*="clay-"])::before,:where([class*="clay-"])::after{box-sizing:border-box}
.clay-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.clay-ico{width:22px;height:22px;flex:none}
.clay-ico--lg{width:28px;height:28px}
/* Fills: put one on any object; components read --clay-fill */
.clay-peach{--clay-fill:var(--clay-peach)}.clay-lilac{--clay-fill:var(--clay-lilac)}.clay-mint{--clay-fill:var(--clay-mint)}
.clay-sky{--clay-fill:var(--clay-sky)}.clay-lemon{--clay-fill:var(--clay-lemon)}
/* Card: a puffy panel that floats on the big drop shadow */
.clay-card{margin:0;padding:1.6rem;border:var(--clay-bw) solid var(--clay-line);border-radius:var(--clay-radius);
background:var(--clay-fill,var(--clay-surface));color:var(--clay-ink);box-shadow:var(--clay-shadow)}
/* Layout helpers */
.clay-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.clay-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:22px}
.clay-stack{display:grid;gap:1.4rem}
/* Cards: Bootstrap .card through its --bs-card-* variables */
.card.clay-card{--bs-card-bg:var(--clay-fill,var(--clay-surface));--bs-card-color:var(--clay-ink);--bs-card-border-color:var(--clay-line);
--bs-card-border-width:var(--clay-bw);--bs-card-border-radius:var(--clay-radius);--bs-card-inner-border-radius:var(--clay-radius);
--bs-card-spacer-x:1.6rem;--bs-card-spacer-y:1.6rem;padding:0}
/* Buttons: Bootstrap .btn with a .btn-clay variant set through --bs-btn-* variables.
Hover lifts the pill, pressing squashes the shadow flat */
.btn-clay{--bs-btn-padding-x:1.5rem;--bs-btn-padding-y:.7rem;--bs-btn-font-family:inherit;--bs-btn-font-size:1rem;--bs-btn-font-weight:800;--bs-btn-line-height:1.2;
--bs-btn-border-width:var(--clay-bw);--bs-btn-border-radius:999px;
--bs-btn-bg:var(--clay-fill,var(--clay-surface));--bs-btn-color:var(--clay-ink);--bs-btn-border-color:var(--clay-edge);
--bs-btn-hover-bg:var(--bs-btn-bg);--bs-btn-hover-color:var(--bs-btn-color);--bs-btn-hover-border-color:var(--bs-btn-border-color);
--bs-btn-active-bg:var(--bs-btn-bg);--bs-btn-active-color:var(--bs-btn-color);--bs-btn-active-border-color:var(--bs-btn-border-color);
--clay-btn-shadow:var(--clay-shadow-sm);
display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:50px;
box-shadow:var(--clay-btn-shadow);transition:transform .18s,box-shadow .18s}
.btn-clay:hover{--clay-btn-shadow:var(--clay-shadow);transform:translateY(-2px)}
.btn-clay:active,.btn-clay:first-child:active{--clay-btn-shadow:var(--clay-press);transform:translateY(2px)}
.btn-clay:focus-visible,.btn-check:focus-visible+.btn-clay{box-shadow:var(--clay-btn-shadow);outline:3px solid var(--clay-accent);outline-offset:4px}
.btn-clay-accent{--clay-fill:var(--clay-accent);--bs-btn-color:var(--clay-on-accent);--bs-btn-border-color:var(--clay-accent)}
.btn-clay.btn-sm{--bs-btn-padding-x:1.05rem;--bs-btn-padding-y:.45rem;--bs-btn-font-size:.88rem;min-height:40px}
/* Icon buttons: a round or squircle .btn-clay with an aria-label */
.btn-clay-icon{--bs-btn-padding-x:0;--bs-btn-padding-y:0;width:58px;height:58px;min-height:0;border-radius:50%}
.btn-clay-icon.btn-clay-sq{border-radius:20px}
.btn-clay-icon.btn-clay-sm{width:44px;height:44px}
.btn-clay-icon.btn-clay-lg{width:72px;height:72px}
@media (prefers-reduced-motion:reduce){.btn-clay{transition:none}.btn-clay:hover,.btn-clay:active,.btn-clay:first-child:active{transform:none}}
/* Toggle tiles: Bootstrap .btn-check + .btn. On = squashed flat, accent edge, a filled tick badge and the word On */
.btn-clay-tile{--bs-btn-padding-x:1.2rem;--bs-btn-padding-y:1.1rem;--bs-btn-border-radius:calc(var(--clay-radius)*.8);--clay-btn-shadow:var(--clay-shadow);
flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.35rem;width:100%;height:100%;padding-bottom:1rem;text-align:left}
.btn-clay-tile:hover{--clay-btn-shadow:var(--clay-shadow);transform:none}
.btn-check:checked+.btn-clay-tile{--clay-btn-shadow:var(--clay-press);--bs-btn-active-border-color:var(--clay-accent);transform:translateY(4px)}
.clay-tile-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:.4rem;border-radius:17px;background:var(--clay-surface);box-shadow:var(--clay-shadow-sm)}
.clay-tile-name{font-size:1.02rem;font-weight:800;line-height:1.25}
.clay-tile-state{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:800;color:var(--clay-muted)}
.clay-tile-state::after{content:"Off"}
.clay-tile-mark{display:grid;place-items:center;width:20px;height:20px;border:2px solid var(--clay-edge);border-radius:50%;color:transparent;background:var(--clay-surface)}
.clay-tile-mark .clay-ico{width:14px;height:14px}
.btn-check:checked+.btn-clay-tile .clay-tile-state{color:var(--clay-ink)}
.btn-check:checked+.btn-clay-tile .clay-tile-state::after{content:"On"}
.btn-check:checked+.btn-clay-tile .clay-tile-mark{border-color:var(--clay-accent);background:var(--clay-accent);color:var(--clay-on-accent)}
/* Icon toggle: .btn-check + a round .btn-clay. Pressed = flat, accent edge, filled icon */
.btn-check+.btn-clay-icon .clay-ico+.clay-ico,.btn-check:checked+.btn-clay-icon .clay-ico:first-of-type{display:none}
.btn-check:checked+.btn-clay-icon .clay-ico+.clay-ico{display:block}
.btn-check:checked+.btn-clay-icon{--clay-btn-shadow:var(--clay-press);--bs-btn-active-border-color:var(--clay-accent);transform:translateY(3px)}
/* Switches: Bootstrap .form-check.form-switch. The knob is a token-coloured radial gradient so it follows light and dark */
.clay-bswitch{display:flex;align-items:center;gap:1rem;min-height:0;margin:0;padding:0}
.clay-bswitch .form-check-label{flex:1;min-width:0;font-weight:800;line-height:1.3;cursor:pointer}
.clay-bswitch .clay-switch-hint{display:block;margin-top:.15rem;font-size:.86rem;font-weight:500;color:var(--clay-muted)}
.clay-bswitch .clay-switch-state{order:2;min-width:2.2em;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-align:right;text-transform:uppercase;color:var(--clay-muted)}
.clay-bswitch .clay-switch-state::after{content:"Off"}
.clay-bswitch.form-switch .form-check-input,.clay-bswitch.form-switch .form-check-input:focus,.clay-bswitch.form-switch .form-check-input:checked,.clay-bswitch.form-switch .form-check-input:not(:checked):not(:focus){
--bs-form-switch-bg:radial-gradient(circle at 50% 50%,var(--clay-knob) 0 12px,var(--clay-knob-edge) 12.5px 14px,transparent 14.5px)}
.clay-bswitch.form-switch .form-check-input{--clay-knob:var(--clay-surface);--clay-knob-edge:var(--clay-edge);order:3;flex:none;float:none;width:64px;height:36px;margin:0;
border:var(--clay-bw) solid var(--clay-edge);background-color:var(--clay-bg);background-size:34px 34px;background-position:left center;box-shadow:var(--clay-well);cursor:pointer;
transition:background-position .2s,background-color .2s,border-color .2s}
.clay-bswitch.form-switch .form-check-input:focus{border-color:var(--clay-edge);box-shadow:var(--clay-well)}
.clay-bswitch.form-switch .form-check-input:checked{--clay-knob-edge:var(--clay-on-accent);background-color:var(--clay-accent);border-color:var(--clay-accent);background-position:right center}
.clay-bswitch.form-switch .form-check-input:focus-visible{outline:3px solid var(--clay-accent);outline-offset:4px}
.clay-bswitch.form-switch .form-check-input:checked~.clay-switch-state{color:var(--clay-accent)}
.clay-bswitch.form-switch .form-check-input:checked~.clay-switch-state::after{content:"On"}
/* Segmented control: .btn-group of .btn-check radios. The chosen option pops up as a lifted pebble with a dot */
.clay-bseg{min-width:0;margin:0;padding:0;border:0}
.clay-bseg legend{float:none;width:auto;margin:0 0 .65rem;padding:0;font-size:.92rem;font-weight:800;line-height:1.4}
.clay-bseg .btn-group{display:flex;flex-wrap:wrap;gap:6px;width:100%;padding:6px;border:var(--clay-bw) solid var(--clay-edge);border-radius:999px;background:var(--clay-bg);box-shadow:var(--clay-well)}
.clay-bseg .btn{--bs-btn-padding-x:1rem;--bs-btn-padding-y:.4rem;--bs-btn-font-size:.92rem;--bs-btn-font-weight:800;--bs-btn-border-width:var(--clay-bw);
--bs-btn-color:var(--clay-muted);--bs-btn-border-color:transparent;--bs-btn-hover-color:var(--clay-ink);--bs-btn-hover-border-color:transparent;
--bs-btn-active-bg:var(--clay-surface);--bs-btn-active-color:var(--clay-accent);--bs-btn-active-border-color:var(--clay-accent);
display:flex;flex:1 1 auto;align-items:center;justify-content:center;gap:.4rem;min-height:42px;border-radius:999px!important;margin:0!important;transition:box-shadow .18s,background-color .18s}
.clay-bseg .btn-check:checked+.btn{box-shadow:var(--clay-shadow-sm)}
.clay-bseg .btn-check:checked+.btn::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.clay-bseg .btn-check:focus-visible+.btn{outline:3px solid var(--clay-accent);outline-offset:2px;box-shadow:var(--clay-shadow-sm)}
@media (prefers-reduced-motion:reduce){.clay-bswitch.form-switch .form-check-input,.clay-bseg .btn{transition:none}}
/* ── Claymorphism UI kit tokens (uiCookies) — identical in every set ──────────────
Every component is a puffy pastel object floating above --clay-bg: one big soft drop shadow
below it, an inset highlight top left and an inset shade bottom right. Change a token and
the whole kit follows; the shadow recipes below are built from these values. */
:root{
--clay-bg:#f3effa; /* page, a pale lilac white */
--clay-surface:#fffcf8; /* cards, fields and plain objects */
--clay-peach:#ffd2bd; /* object fills: ink text on every fill reaches 11:1 */
--clay-lilac:#dccdff;
--clay-mint:#bdeed6;
--clay-sky:#c2e0ff;
--clay-lemon:#ffe9a3;
--clay-ink:#241a3d; /* text, 14.4:1 on --clay-bg */
--clay-muted:#51476a; /* secondary text, 5.7:1 or more on every fill */
--clay-edge:#7a6e96; /* control boundary, 4.1:1 on --clay-bg, so shadows are never the only edge */
--clay-line:rgba(36,26,61,.12); /* decorative edge on cards and panels */
--clay-accent:#6236e8; /* focus ring and on / selected / current states, 5.8:1 on --clay-bg */
--clay-on-accent:#ffffff; /* text and marks on accent fills, 6.5:1 */
--clay-tint:#e9e1ff; /* light accent wash behind current items */
--clay-drop:rgba(86,56,168,.30); /* colour of the outer drop shadow */
--clay-hi:rgba(255,255,255,.88); /* inset highlight, top left */
--clay-lo:rgba(52,30,112,.20); /* inset shade, bottom right */
--clay-lift:14px; /* how high objects float; every shadow scales from it */
--clay-radius:30px; /* cards; buttons are pills, fields use .55 of it */
--clay-bw:1.5px; /* control border width */
--clay-success:#17663d;--clay-warning:#8a4b00;--clay-danger:#b3261e;
--clay-font:ui-rounded,"SF Pro Rounded","Nunito","Quicksand","Varela Round","Arial Rounded MT Bold",system-ui,sans-serif;
}
/* --clay-fill is set by .clay-peach, .clay-mint… on one object and must not leak into its children */
@property --clay-fill{syntax:"*";inherits:false}
/* Dark clay: data-clay="dark" on any wrapper, or a checked .clay-theme-input inside a [data-clay] element.
:is() is a forgiving list, so browsers without :has() still apply data-clay="dark" */
[data-clay]:is([data-clay="dark"],:has(.clay-theme-input:checked)){
--clay-bg:#1a1530;--clay-surface:#2a2347;
--clay-peach:#6e3f33;--clay-lilac:#4a3a8a;--clay-mint:#215a4a;--clay-sky:#26497c;--clay-lemon:#5f5220;
--clay-ink:#f7f3ff;--clay-muted:#d2c9ea;--clay-edge:#8f83b8;--clay-line:rgba(255,255,255,.1);
--clay-accent:#bba6ff;--clay-on-accent:#1a1530;--clay-tint:#3a2f66;
--clay-drop:rgba(4,2,14,.62);--clay-hi:rgba(255,255,255,.2);--clay-lo:rgba(0,0,0,.34);
--clay-success:#86e3b0;--clay-warning:#ffc76e;--clay-danger:#ffa196;color-scheme:dark}
/* More contrast requested: soft shading stays, but every edge and secondary text turns full ink */
@media (prefers-contrast:more){:root,[data-clay]:is([data-clay],:has(.clay-theme-input:checked)){
--clay-edge:var(--clay-ink);--clay-line:var(--clay-ink);--clay-muted:var(--clay-ink);--clay-bw:2px}}
:root,[data-clay]{
--clay-shadow:0 var(--clay-lift) calc(var(--clay-lift)*2.2) calc(var(--clay-lift)*-.3) var(--clay-drop),
inset calc(var(--clay-lift)*.45) calc(var(--clay-lift)*.5) calc(var(--clay-lift)*.9) var(--clay-hi),
inset calc(var(--clay-lift)*-.45) calc(var(--clay-lift)*-.6) calc(var(--clay-lift)*.9) var(--clay-lo);
--clay-shadow-sm:0 calc(var(--clay-lift)*.55) calc(var(--clay-lift)*1.2) calc(var(--clay-lift)*-.15) var(--clay-drop),
inset calc(var(--clay-lift)*.25) calc(var(--clay-lift)*.3) calc(var(--clay-lift)*.5) var(--clay-hi),
inset calc(var(--clay-lift)*-.25) calc(var(--clay-lift)*-.35) calc(var(--clay-lift)*.5) var(--clay-lo);
--clay-press:0 calc(var(--clay-lift)*.12) calc(var(--clay-lift)*.25) 0 var(--clay-drop),
inset calc(var(--clay-lift)*.2) calc(var(--clay-lift)*.25) calc(var(--clay-lift)*.45) var(--clay-lo),
inset calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*.3) var(--clay-hi);
--clay-well:inset calc(var(--clay-lift)*.15) calc(var(--clay-lift)*.22) calc(var(--clay-lift)*.45) var(--clay-lo),
inset calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*.3) var(--clay-hi);
}
[data-clay]{background:var(--clay-bg);color:var(--clay-ink)}
/* The tokens above, exposed as Tailwind utilities: bg-clay-peach, text-clay-muted, border-clay-edge,
shadow-clay, shadow-clay-sm, shadow-clay-press, shadow-clay-well, rounded-clay, rounded-clay-field, font-clay… */
@theme inline {
--color-clay-bg: var(--clay-bg); --color-clay-surface: var(--clay-surface);
--color-clay-peach: var(--clay-peach); --color-clay-lilac: var(--clay-lilac); --color-clay-mint: var(--clay-mint);
--color-clay-sky: var(--clay-sky); --color-clay-lemon: var(--clay-lemon);
--color-clay-ink: var(--clay-ink); --color-clay-muted: var(--clay-muted); --color-clay-edge: var(--clay-edge); --color-clay-line: var(--clay-line);
--color-clay-accent: var(--clay-accent); --color-clay-on-accent: var(--clay-on-accent); --color-clay-tint: var(--clay-tint);
--color-clay-success: var(--clay-success); --color-clay-warning: var(--clay-warning); --color-clay-danger: var(--clay-danger);
--shadow-clay: var(--clay-shadow); --shadow-clay-sm: var(--clay-shadow-sm); --shadow-clay-press: var(--clay-press); --shadow-clay-well: var(--clay-well);
--radius-clay: var(--clay-radius); --radius-clay-field: calc(var(--clay-radius) * .55); --radius-clay-sm: calc(var(--clay-radius) * .4);
--font-clay: var(--clay-font);
}
About this set
The puffy controls a clay interface is built from. Pill buttons come in peach, mint, sky, lemon, lilac, plain and an accent fill, in two sizes, with chunky icons. Each one floats on a big soft drop shadow, carries an inset highlight at the top left and an inset shade at the bottom right, lifts a little on hover and squashes flat while it is pressed. Toggle tiles for sound effects, music, read aloud and a night light sink flat when they are on and also gain an accent edge, a filled tick badge and the word On, so the state never rests on the shadow alone. Round and squircle icon buttons sit next to a favourite toggle whose outline heart turns into a filled one. Switch rows pair a label and a hint with an On or Off word and a track that fills with accent, and a segmented control picks a puzzle difficulty. Toggles and switches are visually hidden native checkboxes followed by a face that reacts to :checked, the segmented control is a radio group in a fieldset, and every control has a 1.5px edge that reaches 4:1 against the page. Colours, depth and radius come from the shared –clay-* tokens.
What’s included
Pastel pill buttons with a drop shadow, inset highlight and inset shade
Pressed state flattens the shadow and moves the button down
Toggle tiles that show On with a flat shape, accent edge, tick badge and text
Switch rows with role="switch" and a visible On or Off word
Segmented control built from a native radio group
Accessibility
Toggles are native checkboxes, switches add role="switch", the segmented control is a fieldset with a legend, and icon-only buttons carry an aria-label. Every control has an edge of at least 3:1 against the page and shows a 3px accent focus ring outside the shadow. On states are shown by shape, an accent edge, a mark and visible text together. Lift and squash transitions stop under prefers-reduced-motion, and prefers-contrast: more turns every edge to full ink.
Customise it
Change --clay-peach, --clay-mint, --clay-sky, --clay-lemon, --clay-lilac, --clay-accent, --clay-lift and --clay-radius in the token block. Add a fill class such as clay-mint to any object. Bootstrap maps the tokens onto --bs-btn-* through .btn-clay, and Tailwind exposes them as bg-clay-*, shadow-clay, shadow-clay-sm and shadow-clay-press.
