flxn-app/src/themes/clay/theme.css

/* Claymation — hand-pinched plasticine world.
   Light: soft studio backdrop; surfaces are matte clay blobs with irregular
   organic radii, "pinched" depth from an inner top highlight plus a soft
   bottom shadow. No hard edges anywhere.
   Dark: night studio with a warm key light — highlights warmer, shadows
   deeper. Filled controls carry dark clay ink, never white-on-mid-tone. */

/* ---------- 1. Tokens, any scheme ---------- */

[data-theme="clay"][data-theme] {
  --mantine-font-family: "Nunito", "Inter", system-ui, sans-serif;
  --mantine-font-family-headings: "Baloo 2", "Nunito", system-ui, sans-serif;
  --mantine-heading-font-weight: 700;

  --mantine-radius-xs: 10px;
  --mantine-radius-sm: 14px;
  --mantine-radius-md: 18px;
  --mantine-radius-lg: 24px;
  --mantine-radius-xl: 30px;
  --mantine-radius-default: 18px;

  /* hand-pinched blob radii, varied per component */
  --clay-blob-card: 26px 20px 28px 22px / 22px 28px 20px 26px;
  --clay-blob-card-alt: 20px 28px 22px 26px / 28px 20px 26px 22px;
  --clay-blob-md: 20px 16px 22px 18px / 18px 22px 16px 20px;
  --clay-blob-btn: 16px 20px 14px 22px / 20px 14px 22px 16px;
  --clay-blob-round: 42% 58% 55% 45% / 48% 45% 55% 52%;
  --clay-blob-pellet: 14px 18px 15px 19px / 18px 14px 19px 15px;

  --clay-ink: #33291f;

  --flxn-avatar-radius: 45%;
  --flxn-avatar-border: 3px solid var(--clay-ring);
  --flxn-badge-radius: 16px 20px 18px 22px;
}

/* ---------- 2. Light — soft studio ---------- */

[data-theme="clay"][data-theme][data-mantine-color-scheme="light"] {
  --clay-surface: #f6f0e7;
  --clay-surface-hover: #faf5ee;
  --clay-well: #e5dccd;
  --clay-border: #d3c8b8;
  --clay-ring: #fffdf7;
  --clay-inset: inset 0 3px 6px rgba(122, 104, 86, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.5);
  --clay-inset-sm: inset 0 2px 4px rgba(122, 104, 86, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.45);

  --mantine-color-body: #efe9e2;
  --mantine-color-text: #3a3128;
  --mantine-color-bright: #241f19;
  --mantine-color-dimmed: #6d6156;
  --mantine-color-placeholder: #837568;
  --mantine-color-anchor: var(--mantine-primary-color-light-color);
  --mantine-color-error: var(--mantine-color-red-7);
  --mantine-color-default: #f6f0e7;
  --mantine-color-default-hover: #faf5ee;
  --mantine-color-default-color: #3a3128;
  --mantine-color-default-border: #d3c8b8;

  /* primaryShade 4 gives chalky plasticine fills, but Mantine then derives
     chalky light-variant/text/outline colors that fail contrast on the light
     backdrop. Re-point every ramp's aliases at deeper shades so
     --mantine-primary-color-* keeps following the user's accent. */
  --mantine-color-blue-light: color-mix(in srgb, var(--mantine-color-blue-4) 18%, transparent);
  --mantine-color-blue-light-hover: color-mix(in srgb, var(--mantine-color-blue-4) 26%, transparent);
  --mantine-color-blue-light-color: var(--mantine-color-blue-8);
  --mantine-color-blue-text: var(--mantine-color-blue-8);
  --mantine-color-blue-outline: var(--mantine-color-blue-7);
  --mantine-color-red-light: color-mix(in srgb, var(--mantine-color-red-4) 18%, transparent);
  --mantine-color-red-light-hover: color-mix(in srgb, var(--mantine-color-red-4) 26%, transparent);
  --mantine-color-red-light-color: var(--mantine-color-red-8);
  --mantine-color-red-text: var(--mantine-color-red-8);
  --mantine-color-red-outline: var(--mantine-color-red-7);
  --mantine-color-green-light: color-mix(in srgb, var(--mantine-color-green-4) 18%, transparent);
  --mantine-color-green-light-hover: color-mix(in srgb, var(--mantine-color-green-4) 26%, transparent);
  --mantine-color-green-light-color: var(--mantine-color-green-8);
  --mantine-color-green-text: var(--mantine-color-green-8);
  --mantine-color-green-outline: var(--mantine-color-green-7);
  --mantine-color-yellow-light: color-mix(in srgb, var(--mantine-color-yellow-4) 18%, transparent);
  --mantine-color-yellow-light-hover: color-mix(in srgb, var(--mantine-color-yellow-4) 26%, transparent);
  --mantine-color-yellow-light-color: var(--mantine-color-yellow-8);
  --mantine-color-yellow-text: var(--mantine-color-yellow-8);
  --mantine-color-yellow-outline: var(--mantine-color-yellow-7);
  --mantine-color-grape-light: color-mix(in srgb, var(--mantine-color-grape-4) 18%, transparent);
  --mantine-color-grape-light-hover: color-mix(in srgb, var(--mantine-color-grape-4) 26%, transparent);
  --mantine-color-grape-light-color: var(--mantine-color-grape-8);
  --mantine-color-grape-text: var(--mantine-color-grape-8);
  --mantine-color-grape-outline: var(--mantine-color-grape-7);
  --mantine-color-orange-light: color-mix(in srgb, var(--mantine-color-orange-4) 18%, transparent);
  --mantine-color-orange-light-hover: color-mix(in srgb, var(--mantine-color-orange-4) 26%, transparent);
  --mantine-color-orange-light-color: var(--mantine-color-orange-8);
  --mantine-color-orange-text: var(--mantine-color-orange-8);
  --mantine-color-orange-outline: var(--mantine-color-orange-7);
  --mantine-color-pink-light: color-mix(in srgb, var(--mantine-color-pink-4) 18%, transparent);
  --mantine-color-pink-light-hover: color-mix(in srgb, var(--mantine-color-pink-4) 26%, transparent);
  --mantine-color-pink-light-color: var(--mantine-color-pink-8);
  --mantine-color-pink-text: var(--mantine-color-pink-8);
  --mantine-color-pink-outline: var(--mantine-color-pink-7);
  --mantine-color-lime-light: color-mix(in srgb, var(--mantine-color-lime-4) 18%, transparent);
  --mantine-color-lime-light-hover: color-mix(in srgb, var(--mantine-color-lime-4) 26%, transparent);
  --mantine-color-lime-light-color: var(--mantine-color-lime-8);
  --mantine-color-lime-text: var(--mantine-color-lime-8);
  --mantine-color-lime-outline: var(--mantine-color-lime-7);

  /* pinched elevation: inner top highlight + soft warm drop */
  --mantine-shadow-xs: inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 3px 8px rgba(122, 104, 86, 0.18);
  --mantine-shadow-sm: inset 0 2px 3px rgba(255, 255, 255, 0.6),
    0 6px 14px rgba(122, 104, 86, 0.22);
  --mantine-shadow-md: inset 0 2px 4px rgba(255, 255, 255, 0.6),
    0 10px 22px rgba(122, 104, 86, 0.26);
  --mantine-shadow-lg: inset 0 2px 4px rgba(255, 255, 255, 0.62),
    0 14px 30px rgba(122, 104, 86, 0.3);
  --mantine-shadow-xl: inset 0 3px 5px rgba(255, 255, 255, 0.65),
    0 20px 40px rgba(122, 104, 86, 0.34);

  /* app tokens */
  --flxn-gold: #8a6716;
  --flxn-silver: #6f665c;
  --flxn-bronze: #8a5a34;
  --flxn-toast-success: #538148;
  --flxn-toast-error: #b0543a;
  --flxn-podium-1-bg: color-mix(in srgb, #e0b545 12%, #f6f0e7);
  --flxn-podium-1-border: color-mix(in srgb, #a67d24 40%, #d3c8b8);
  --flxn-podium-1-label: #7c5d1b;
  --flxn-podium-2-bg: color-mix(in srgb, #97887a 12%, #f6f0e7);
  --flxn-podium-2-border: color-mix(in srgb, #786a5d 35%, #d3c8b8);
  --flxn-podium-2-label: #5d5248;
  --flxn-podium-3-bg: color-mix(in srgb, #c97a3d 12%, #f6f0e7);
  --flxn-podium-3-border: color-mix(in srgb, #a86230 38%, #d3c8b8);
  --flxn-podium-3-label: #7d4a22;
  --flxn-showcase-bg: #f6f0e7;
  --flxn-overlay: rgba(58, 49, 40, 0.45);
  --flxn-dotgrid-color: #d9cfc1;
  --flxn-pop-shadow: rgba(122, 104, 86, 0.4);
}

/* ---------- 2. Dark — night studio, warm key light ---------- */

[data-theme="clay"][data-theme][data-mantine-color-scheme="dark"] {
  --clay-surface: #332c30;
  --clay-surface-hover: #3b3336;
  --clay-well: #1f1a1d;
  --clay-border: #4a3f42;
  --clay-ring: #4a4046;
  --clay-inset: inset 0 3px 6px rgba(0, 0, 0, 0.5),
    inset 0 -1px 0 rgba(255, 225, 185, 0.08);
  --clay-inset-sm: inset 0 2px 4px rgba(0, 0, 0, 0.45),
    inset 0 -1px 0 rgba(255, 225, 185, 0.07);

  --mantine-color-body: #262023;
  --mantine-color-text: #efe6dc;
  --mantine-color-bright: #fbf6ef;
  --mantine-color-dimmed: #b3a79d;
  --mantine-color-placeholder: #8c7f76;
  --mantine-color-anchor: var(--mantine-primary-color-3);
  --mantine-color-error: var(--mantine-color-red-3);
  --mantine-color-default: #332c30;
  --mantine-color-default-hover: #3b3336;
  --mantine-color-default-color: #efe6dc;
  --mantine-color-default-border: #4a3f42;

  /* warm inner highlight, deep studio shadows */
  --mantine-shadow-xs: inset 0 1px 0 rgba(255, 225, 185, 0.1),
    0 3px 8px rgba(0, 0, 0, 0.4);
  --mantine-shadow-sm: inset 0 2px 3px rgba(255, 225, 185, 0.12),
    0 8px 16px rgba(0, 0, 0, 0.45);
  --mantine-shadow-md: inset 0 2px 4px rgba(255, 225, 185, 0.13),
    0 12px 24px rgba(0, 0, 0, 0.5);
  --mantine-shadow-lg: inset 0 2px 4px rgba(255, 225, 185, 0.14),
    0 16px 32px rgba(0, 0, 0, 0.55);
  --mantine-shadow-xl: inset 0 3px 5px rgba(255, 225, 185, 0.15),
    0 22px 44px rgba(0, 0, 0, 0.6);

  /* app tokens */
  --flxn-gold: #e0bd6a;
  --flxn-silver: #b8ada2;
  --flxn-bronze: #d69a6e;
  --flxn-toast-success: #9cc98e;
  --flxn-toast-error: #eda28c;
  --flxn-podium-1-bg: color-mix(in srgb, #e0bd6a 13%, #332c30);
  --flxn-podium-1-border: color-mix(in srgb, #e0bd6a 32%, #4a3f42);
  --flxn-podium-1-label: #e0bd6a;
  --flxn-podium-2-bg: color-mix(in srgb, #b8ada2 11%, #332c30);
  --flxn-podium-2-border: color-mix(in srgb, #b8ada2 28%, #4a3f42);
  --flxn-podium-2-label: #b8ada2;
  --flxn-podium-3-bg: color-mix(in srgb, #d69a6e 12%, #332c30);
  --flxn-podium-3-border: color-mix(in srgb, #d69a6e 28%, #4a3f42);
  --flxn-podium-3-label: #d69a6e;
  --flxn-showcase-bg: #332c30;
  --flxn-overlay: rgba(0, 0, 0, 0.55);
  --flxn-dotgrid-color: rgba(255, 235, 215, 0.12);
  --flxn-pop-shadow: rgba(0, 0, 0, 0.6);
}

/* ---------- 3. Type flavor ---------- */

[data-theme="clay"] body {
  font-weight: 500;
}

/* ---------- 4. Backdrop — studio key light + clay grain ---------- */

[data-theme="clay"] .flxn-theme-overlay {
  position: fixed;
  inset: 0;
  z-index: -1; /* behind content — never tints text or surfaces */
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

[data-theme="clay"][data-mantine-color-scheme="light"] .flxn-theme-overlay {
  background-image: radial-gradient(
      120% 70% at 50% 0%,
      rgba(255, 252, 244, 0.65),
      transparent 65%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

[data-theme="clay"][data-mantine-color-scheme="dark"] .flxn-theme-overlay {
  background-image: radial-gradient(
      110% 65% at 50% 0%,
      rgba(255, 208, 158, 0.09),
      transparent 62%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ---------- 5. Clay blob surfaces ---------- */

[data-theme="clay"] .mantine-Paper-root {
  background-color: var(--clay-surface);
  border: 1px solid var(--clay-border);
  border-radius: var(--clay-blob-md);
  box-shadow: var(--mantine-shadow-sm);
}

[data-theme="clay"] .mantine-Card-root {
  border-radius: var(--clay-blob-card);
}

[data-theme="clay"] .mantine-Popover-dropdown,
[data-theme="clay"] .mantine-Menu-dropdown,
[data-theme="clay"] .mantine-Modal-content,
[data-theme="clay"] .mantine-Notification-root {
  background-color: var(--clay-surface);
  border: 1px solid var(--clay-border);
  box-shadow: var(--mantine-shadow-lg);
}

[data-theme="clay"] .mantine-Modal-content {
  border-radius: var(--clay-blob-card);
}

[data-theme="clay"] .mantine-Modal-header {
  background-color: var(--clay-surface);
}

[data-theme="clay"] .mantine-Notification-root {
  border-radius: var(--clay-blob-md);
}

[data-theme="clay"] .mantine-Alert-root {
  border-radius: var(--clay-blob-md);
  box-shadow: var(--mantine-shadow-xs);
}

[data-theme="clay"] .mantine-Tooltip-tooltip {
  border-radius: var(--clay-blob-pellet);
  font-weight: 600;
  box-shadow: var(--mantine-shadow-xs);
}

[data-theme="clay"][data-mantine-color-scheme="light"] .mantine-Tooltip-tooltip {
  background-color: #3a3128;
  color: #f3ece2;
}

[data-theme="clay"][data-mantine-color-scheme="dark"] .mantine-Tooltip-tooltip {
  background-color: #efe6dc;
  color: #33291f;
}

/* App shell: rolled clay slabs, soft edges */
[data-theme="clay"] .mantine-AppShell-header {
  background-color: var(--clay-surface);
  border-bottom: 1px solid var(--clay-border);
  box-shadow: var(--mantine-shadow-xs);
}

[data-theme="clay"] .mantine-AppShell-navbar {
  background-color: var(--clay-surface);
  border-top: 1px solid var(--clay-border);
  border-inline-end: 1px solid var(--clay-border);
  box-shadow: var(--mantine-shadow-xs);
}

/* ---------- 6. Thumbed buttons ---------- */

[data-theme="clay"] .mantine-Button-root {
  border: 1px solid var(--clay-border);
  border-radius: var(--clay-blob-btn);
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
  font-weight: 700;
  box-shadow: var(--mantine-shadow-sm);
  transition: box-shadow 160ms ease, background-color 120ms ease-out;
}

[data-theme="clay"] .mantine-ActionIcon-root {
  border: 1px solid var(--clay-border);
  border-radius: var(--clay-blob-round);
  box-shadow: var(--mantine-shadow-xs);
}

[data-theme="clay"] .mantine-Button-root:where([data-variant="filled"], :not([data-variant])),
[data-theme="clay"] .mantine-ActionIcon-root:where([data-variant="filled"], :not([data-variant])) {
  border-color: color-mix(in srgb, var(--mantine-primary-color-filled) 78%, var(--clay-ink));
}

[data-theme="clay"] .mantine-Button-root:where([data-variant="default"], [data-variant="outline"]),
[data-theme="clay"] .mantine-ActionIcon-root:where([data-variant="default"], [data-variant="outline"]) {
  background-color: var(--clay-surface);
}

[data-theme="clay"] .mantine-Button-root:where([data-variant="default"], [data-variant="outline"]):hover,
[data-theme="clay"] .mantine-ActionIcon-root:where([data-variant="default"], [data-variant="outline"]):hover {
  background-color: var(--clay-surface-hover);
}

/* Ghost variants stay flat — no floating clay plates */
[data-theme="clay"] .mantine-Button-root:where([data-variant="subtle"], [data-variant="transparent"], [data-variant="white"]),
[data-theme="clay"] .mantine-ActionIcon-root:where([data-variant="subtle"], [data-variant="transparent"], [data-variant="white"]) {
  border-color: transparent;
  box-shadow: none;
}

[data-theme="clay"] .mantine-Button-root:active:not([data-disabled], :disabled, [data-loading]),
[data-theme="clay"] .mantine-ActionIcon-root:active:not([data-disabled], :disabled, [data-loading]) {
  box-shadow: var(--clay-inset-sm);
}

[data-theme="clay"] .mantine-Button-root:where([data-disabled], :disabled),
[data-theme="clay"] .mantine-ActionIcon-root:where([data-disabled], :disabled) {
  box-shadow: none;
}

/* Every chalky fill pairs with the dark clay ink, never white */
[data-theme="clay"] .mantine-Button-root:not([data-variant]):not(:disabled):not([data-disabled]),
[data-theme="clay"] .mantine-Button-root[data-variant="filled"]:not(:disabled):not([data-disabled]),
[data-theme="clay"] .mantine-ActionIcon-root:not([data-variant]):not(:disabled):not([data-disabled]),
[data-theme="clay"] .mantine-ActionIcon-root[data-variant="filled"]:not(:disabled):not([data-disabled]),
[data-theme="clay"] .mantine-Badge-root:not([data-variant]),
[data-theme="clay"] .mantine-Badge-root[data-variant="filled"],
[data-theme="clay"] .mantine-ThemeIcon-root:not([data-variant]),
[data-theme="clay"] .mantine-ThemeIcon-root[data-variant="filled"] {
  color: var(--clay-ink);
}

/* Extra squish: pressed clay squashes wide and short */
@media (prefers-reduced-motion: no-preference) {
  [data-theme="clay"] .flxn-press {
    transition: transform 160ms cubic-bezier(0.34, 1.3, 0.5, 1);
  }
  [data-theme="clay"]
    .flxn-press:active:not(:disabled):not([data-disabled]):not([data-loading]) {
    transform: scale(1.02, 0.92);
  }
}

/* ---------- 7. Inputs — thumb-pressed wells ---------- */

[data-theme="clay"] .mantine-Input-input {
  background-color: var(--clay-surface);
  border: 1px solid var(--clay-border);
  border-radius: var(--clay-blob-md);
  box-shadow: var(--clay-inset-sm);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

[data-theme="clay"] .mantine-Input-input:focus,
[data-theme="clay"] .mantine-Input-input:focus-within {
  border-color: var(--mantine-primary-color-filled);
  box-shadow: var(--clay-inset);
}

[data-theme="clay"] .mantine-Input-input[data-error] {
  border-color: var(--mantine-color-error);
}

[data-theme="clay"] .mantine-PinInput-field {
  border-radius: var(--clay-blob-pellet);
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
}

/* ---------- 8. Clay pellet badges ---------- */

[data-theme="clay"] .mantine-Badge-root {
  border: 1px solid var(--clay-border);
  border-radius: var(--clay-blob-pellet);
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  box-shadow: var(--mantine-shadow-xs);
}

[data-theme="clay"] .mantine-Badge-root:where([data-variant="filled"], :not([data-variant])) {
  border-color: color-mix(in srgb, var(--mantine-primary-color-filled) 78%, var(--clay-ink));
}

[data-theme="clay"] .mantine-Badge-root[data-variant="default"] {
  background-color: var(--clay-surface);
  color: var(--mantine-color-text);
}

[data-theme="clay"] .mantine-ThemeIcon-root {
  border-radius: var(--clay-blob-round);
}

[data-theme="clay"] .mantine-ThemeIcon-root[data-variant="default"] {
  background-color: var(--clay-surface);
  border: 1px solid var(--clay-border);
  box-shadow: var(--mantine-shadow-xs);
}

/* ---------- 9. Selection controls ---------- */

/* SegmentedControl: pressed trough, raised clay pellet indicator */
[data-theme="clay"] .mantine-SegmentedControl-root {
  background-color: var(--clay-well);
  border: 1px solid var(--clay-border);
  border-radius: var(--clay-blob-md);
  box-shadow: var(--clay-inset-sm);
}

[data-theme="clay"] .mantine-SegmentedControl-indicator {
  background-color: var(--clay-surface);
  border: 1px solid var(--clay-border);
  border-radius: var(--clay-blob-pellet);
  box-shadow: var(--mantine-shadow-xs);
}

[data-theme="clay"] .mantine-SegmentedControl-label {
  font-weight: 700;
}

[data-theme="clay"] .mantine-SegmentedControl-label[data-active] {
  color: var(--mantine-color-bright);
}

/* Switch: trough + rolled clay ball thumb */
[data-theme="clay"] .mantine-Switch-track {
  border: 1px solid var(--clay-border);
  border-radius: 999px;
  box-shadow: var(--clay-inset-sm);
}

[data-theme="clay"] .mantine-Switch-thumb {
  border: 1px solid var(--clay-border);
  border-radius: var(--clay-blob-round);
  box-shadow: var(--mantine-shadow-xs);
}

[data-theme="clay"] .mantine-Checkbox-input {
  border: 2px solid var(--clay-border);
  border-radius: 9px 11px 10px 12px / 11px 9px 12px 10px;
}

[data-theme="clay"] .mantine-Checkbox-input:not(:checked) {
  background-color: var(--clay-surface);
  box-shadow: var(--clay-inset-sm);
}

/* Progress: finger-groove trough */
[data-theme="clay"] .mantine-Progress-root {
  background-color: var(--clay-well);
  border: 1px solid var(--clay-border);
  border-radius: 999px;
  box-shadow: var(--clay-inset-sm);
}

[data-theme="clay"] .mantine-Progress-section {
  border-radius: 999px;
}

/* ---------- 10. Navigation & misc ---------- */

[data-theme="clay"] .mantine-Tabs-list {
  border-bottom-color: transparent;
  gap: 0.25rem;
}

[data-theme="clay"] .mantine-Tabs-tab {
  border: 0;
  border-radius: var(--clay-blob-pellet);
  font-weight: 700;
}

[data-theme="clay"] .mantine-Tabs-tab[data-active] {
  background-color: var(--mantine-primary-color-light);
  color: var(--mantine-primary-color-light-color);
}

[data-theme="clay"] .mantine-NavLink-root {
  border: 1px solid transparent;
  border-radius: var(--clay-blob-md);
  font-weight: 600;
}

[data-theme="clay"] .mantine-NavLink-root[data-active] {
  background-color: var(--mantine-primary-color-light);
  border-color: var(--clay-border);
  color: var(--mantine-primary-color-light-color);
}

[data-theme="clay"] .mantine-Skeleton-root {
  border-radius: var(--clay-blob-md);
}

[data-theme="clay"] .mantine-Divider-root {
  --divider-color: var(--clay-border);
}

[data-theme="clay"] .mantine-Loader-root {
  --loader-color: var(--mantine-primary-color-filled);
}

/* ---------- 11. App component hooks ---------- */

[data-theme="clay"] .flxn-tabs[data-stuck] {
  background-color: var(--mantine-color-body);
  border-bottom-color: var(--clay-border);
  box-shadow: 0 8px 16px -8px var(--flxn-pop-shadow);
}

[data-theme="clay"] .flxn-tab.flxn-tab {
  border-radius: var(--clay-blob-pellet);
  font-weight: 600;
}

[data-theme="clay"] .flxn-tab.flxn-tab[data-active] {
  color: var(--flxn-on-accent);
  font-weight: 700;
}

[data-theme="clay"] .flxn-tabs-indicator.flxn-tabs-indicator {
  border-bottom: none;
  border-radius: var(--clay-blob-pellet);
  background-color: var(--mantine-primary-color-filled);
  box-shadow: var(--clay-inset-sm);
}

/* Nav grid tiles: pinched clay pats, radii varied like hand-rolled pieces */
[data-theme="clay"] .flxn-tile.flxn-tile {
  background-color: var(--clay-surface);
  border: 1px solid var(--clay-border);
  border-radius: var(--clay-blob-card);
  box-shadow: var(--mantine-shadow-sm);
}

[data-theme="clay"] .flxn-tile.flxn-tile:nth-child(even) {
  border-radius: var(--clay-blob-card-alt);
}

@media (hover: hover) {
  [data-theme="clay"] .flxn-tile.flxn-tile:hover:not(:disabled) {
    background-color: var(--clay-surface-hover);
  }
}

[data-theme="clay"] .flxn-tile.flxn-tile:active:not(:disabled) {
  box-shadow: var(--clay-inset-sm);
}

/* Flat glyph tint — no plates behind icons */
[data-theme="clay"] .flxn-tile-icon.flxn-tile-icon {
  color: var(--mantine-primary-color-light-color);
}

/* "See all" as a small clay chip: accent wash + wash on-color */
[data-theme="clay"] .flxn-see-all.flxn-see-all {
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
  font-weight: 700;
  background-color: var(--mantine-primary-color-light);
  border: 1px solid color-mix(in srgb, var(--mantine-primary-color-light-color) 30%, transparent);
  border-radius: var(--clay-blob-pellet);
  color: var(--mantine-primary-color-light-color);
}

@media (hover: hover) {
  [data-theme="clay"] .flxn-see-all.flxn-see-all:hover {
    background-color: var(--mantine-primary-color-light-hover);
    text-decoration: none;
  }
}

/* Match card + reaction tray: one pressed-together construction — the card
   is a raised pat, the tray a thumb-groove in the same slab */
[data-theme="clay"] .flxn-match-card.flxn-match-card {
  background-color: var(--clay-surface);
  border: 1px solid var(--clay-border);
  border-radius: var(--clay-blob-card);
  box-shadow: var(--mantine-shadow-sm);
}

[data-theme="clay"] .flxn-reaction-row.flxn-reaction-row {
  background-color: var(--clay-well);
  border: 1px solid var(--clay-border);
  border-radius: var(--clay-blob-md);
  box-shadow: var(--clay-inset-sm);
}

/* Blobby avatar: the frame owns the single 3px clay ring */
[data-theme="clay"] .flxn-avatar-frame {
  box-shadow: var(--mantine-shadow-xs);
}