/* ==========================================================================
   CnC shared geometry and border-radius contract
   ========================================================================== */

/*
 * Cascade order:
 *
 * cnc.tokens
 *   Global design-system measurements.
 *
 * cnc.attributes
 *   Resolves size and shape attributes into shared shape variables.
 *
 * cnc.parts
 *   Maps the resolved shape radius to standard widget parts.
 *
 * cnc.widgets
 *   Reserved for widget-specific CSS.
 *
 * cnc.application
 *   Reserved for application-level overrides.
 */
@layer theme,
  base,
  components,
  cnc.tokens,
  cnc.attributes,
  cnc.parts,
  widgets,
  properties,
  utilities,
  cnc.application;

:root {
  --icon-spinner-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 10 10h-4a6 6 0 1 1-6-6V2z'/%3E%3C/svg%3E");
  --icon-trash-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21q.512.078 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48 48 0 0 0-3.478-.397m-12 .562q.51-.088 1.022-.165m0 0a48 48 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a52 52 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a49 49 0 0 0-7.5 0' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  --icon-search-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m21 21-3.5-3.5m2.5-6a8.5 8.5 0 1 1-17 0a8.5 8.5 0 0 1 17 0Z' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-clock-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v6l4 2m6-2c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10Z' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-slash-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 19 5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-chevron-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' stroke='black' stroke-width='2.25' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-hint-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3m.08 4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10Z' stroke='black' stroke-width='2.25' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-info-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10Z' stroke='black' stroke-width='2.25' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --icon-eye-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.42 12.713c-.136-.215-.204-.323-.242-.49a1.173 1.173 0 0 1 0-.446c.038-.167.106-.274.242-.49C3.546 9.505 6.895 5 12 5s8.455 4.505 9.58 6.287c.137.215.205.323.243.49.029.125.029.322 0 .446-.038.167-.106.274-.242.49C20.455 14.495 17.105 19 12 19c-5.106 0-8.455-4.505-9.58-6.287Z' stroke='black' stroke-width='2.25' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z' stroke='black' stroke-width='2.25' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-eye-off-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.743 5.092C11.149 5.032 11.569 5 12 5c5.105 0 8.455 4.505 9.58 6.287.137.215.205.323.243.49a1.16 1.16 0 0 1 0 .447c-.038.166-.107.274-.244.492-.3.474-.757 1.141-1.363 1.865M6.724 6.715c-2.162 1.467-3.63 3.504-4.303 4.57-.137.217-.205.325-.243.492a1.173 1.173 0 0 0 0 .446c.038.167.106.274.242.49C3.546 14.495 6.895 19 12 19c2.059 0 3.832-.732 5.289-1.723M3 3l18 18M9.88 9.879a3 3 0 1 0 4.243 4.243' stroke='black' stroke-width='2.25' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --icon-pin-svg2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 0h16v16H0z' fill='none'/%3E%3Cpath fill='black' fill-rule='evenodd' d='M10.5 2.255v-.01c.003-.03.013-.157-.361-.35C9.703 1.668 8.967 1.5 8 1.5s-1.703.169-2.138.394c-.375.194-.365.32-.362.351v.01c-.003.03-.013.157.362.35C6.297 2.832 7.033 3 8 3s1.703-.169 2.139-.394c.374-.194.364-.32.361-.351M8 4.5c.506 0 .99-.04 1.436-.118l.84 2.352.253.707.717.221c.648.2 1.055.44 1.277.65.192.18.227.31.227.438 0 .14-.055.488-.937.878-.869.384-2.2.622-3.813.622s-2.944-.238-3.813-.622c-.882-.39-.937-.738-.937-.878 0-.128.035-.259.227-.439.222-.209.629-.448 1.277-.649l.717-.221.253-.707.84-2.352c.445.079.93.118 1.436.118m4-2.25c0 .738-.433 1.294-1.136 1.669l.825 2.31c1.953.48 2.561 1.32 2.561 2.52 0 1.854-2.402 2.848-5.5 2.985V15a.75.75 0 0 1-1.5 0v-3.266c-3.098-.136-5.5-1.131-5.5-2.984 0-1.2 1.008-2.04 2.561-2.52l.825-2.311C4.433 3.544 4 2.988 4 2.25C4 .75 5.79 0 8 0s4 .75 4 2.25' clip-rule='evenodd'/%3E%3C/svg%3E");
  --icon-pin-filled-svg2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 0h16v16H0z' fill='none'/%3E%3Cpath fill='black' fill-rule='evenodd' d='M10.5 2.255v-.01c.003-.03.013-.157-.361-.35C9.703 1.668 8.967 1.5 8 1.5s-1.703.169-2.138.394c-.375.194-.365.32-.362.351v.01c-.003.03-.013.157.362.35C6.297 2.832 7.033 3 8 3s1.703-.169 2.139-.394c.374-.194.364-.32.361-.351M12 2.25c0 .738-.433 1.294-1.136 1.669l.825 2.31c1.953.48 2.561 1.32 2.561 2.52 0 1.854-2.402 2.848-5.5 2.985V15a.75.75 0 0 1-1.5 0v-3.266c-3.098-.136-5.5-1.131-5.5-2.984 0-1.2 1.008-2.04 2.561-2.52l.825-2.311C4.433 3.544 4 2.988 4 2.25C4 .75 5.79 0 8 0s4 .75 4 2.25' clip-rule='evenodd'/%3E%3C/svg%3E");
  --icon-pin-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16'%3E%3Cpath d='M0 0h16v16H0z' fill='none'/%3E%3Cpath fill='currentColor' d='M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588c-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828l-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182l-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076a5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z'/%3E%3C/svg%3E");
  --icon-pin-filled-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16'%3E%3Cpath d='M0 0h16v16H0z' fill='none'/%3E%3Cpath fill='currentColor' d='M4.146.146A.5.5 0 0 1 4.5 0h7a.5.5 0 0 1 .5.5c0 .68-.342 1.174-.646 1.479c-.126.125-.25.224-.354.298v4.431l.078.048c.203.127.476.314.751.955C12.36 7.775 13 8.527 13 9.5a.5.5 0 0 1-.5.5h-4v4.5c0 .276-.224 1.5-.5 1.5s-.5-1.224-.5-1.5V10h-4a.5.5 0 0 1-.5-.5c0-.973.64-1.725 1.17-2.189A6 6 0 0 1 5 6.708V2.277a3 3 0 0 1-.354-.298C4.342 1.674 4 1.179 4 .5a.5.5 0 0 1 .146-.354'/%3E%3C/svg%3E");

  --icon-plus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14m-7-7h14' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --icon-minus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --icon-close-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' stroke='black' stroke-width='2.86' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --icon-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5m0 0 7 7m-7-7 7-7' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --icon-plus-square-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M8 12h8m-4-4v8'/%3E%3C/g%3E%3C/svg%3E");

  --icon-minus-square-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M8 12h8'/%3E%3C/g%3E%3C/svg%3E");

  --icon-drawer-open-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath fill='black' stroke='none' d='M15 3H18C19.65685 3 21 4.34315 21 6V18C21 19.65685 19.65685 21 18 21H15V3Z'/%3E%3Cpath d='M6 3H18C19.6569 3 21 4.34315 21 6V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6C3 4.34315 4.34315 3 6 3ZM15 3V21M8 9L11 12L8 15'/%3E%3C/g%3E%3C/svg%3E");
  --icon-drawer-closed-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath fill='black' stroke='none' d='M6 3H9V21H6C4.34315 21 3 19.65685 3 18V6C3 4.34315 4.34315 3 6 3Z'/%3E%3Cpath d='M6 3H18C19.6569 3 21 4.34315 21 6V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6C3 4.34315 4.34315 3 6 3ZM9 3V21M16 9L13 12L16 15'/%3E%3C/g%3E%3C/svg%3E");
}

.preset-icon-spinner,
.preset-icon-trash,
.preset-icon-search,
.preset-icon-clock,
.preset-icon-chevron,
.preset-icon-hint,
.preset-icon-info,
.preset-icon-visibility,
.preset-icon-pin,
.preset-icon-plus,
.preset-icon-minus,
.preset-icon-close,
.preset-icon-clear,
.preset-icon-plusminus-square,
.preset-icon-arrow-left,
.preset-icon-arrow-right,
.preset-icon-arrow-up,
.preset-icon-arrow-down {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  background: currentColor;
}

.preset-icon-arrow-left {
  -webkit-mask-image: var(--icon-arrow-svg);
  mask-image: var(--icon-arrow-svg);
}
.preset-icon-arrow-right {
  -webkit-mask-image: var(--icon-arrow-svg);
  mask-image: var(--icon-arrow-svg);
  rotate: 180deg;
}
.preset-icon-arrow-up {
  -webkit-mask-image: var(--icon-arrow-svg);
  mask-image: var(--icon-arrow-svg);
  rotate: 90deg;
}
.preset-icon-arrow-down {
  -webkit-mask-image: var(--icon-arrow-svg);
  mask-image: var(--icon-arrow-svg);
  rotate: 270deg;
}
.preset-icon-close {
  -webkit-mask-image: var(--icon-close-svg);
  mask-image: var(--icon-close-svg);
}
.preset-icon-clear {
  -webkit-mask-image: var(--icon-close-svg);
  mask-image: var(--icon-close-svg);
}
.preset-icon-minus {
  -webkit-mask-image: var(--icon-minus-svg);
  mask-image: var(--icon-minus-svg);
}
.preset-icon-plus {
  -webkit-mask-image: var(--icon-plus-svg);
  mask-image: var(--icon-plus-svg);
}

.preset-icon-visibility {
  -webkit-mask: var(--icon-eye-svg) center / contain no-repeat;
  mask: var(--icon-eye-svg) center / contain no-repeat;
}
/* Password is currently visible */
.preset-icon-visibility[aria-pressed="true"] {
  -webkit-mask-image: var(--icon-eye-off-svg);
  mask-image: var(--icon-eye-off-svg);
}

.preset-icon-pin {
  display: inline-block;
  transform-origin: 38% 45%;
  --pin-angle: -45deg; /* tune to match your SVG's tilt */
  --pin-duration: 350ms;
  /* --pin-ease: cubic-bezier(0.34, 1.56, 0.64, 1);slight overshoot */
  --pin-ease: ease;
}
.preset-icon-pin,
.preset-icon-pin[aria-pressed="false"] {
  -webkit-mask: var(--icon-pin-svg) center / contain no-repeat;
  mask: var(--icon-pin-svg) center / contain no-repeat;
  /* animation: pin-unpin 3300ms cubic-bezier(.34, 1.56, .64, 1);
  animation: pin-off 220ms ease-in-out both; */
  animation: pin-off var(--pin-duration) var(--pin-ease) both;
}
/* Password is currently visible */
.preset-icon-pin[aria-pressed="true"] {
  -webkit-mask-image: var(--icon-pin-filled-svg);
  mask-image: var(--icon-pin-filled-svg);
  /* animation: pin-pin 3300ms cubic-bezier(.34, 1.56, .64, 1);
  animation: pin-on 220ms ease-in-out both; */
  animation: pin-on var(--pin-duration) var(--pin-ease) both;
}

.preset-icon-plusminus-square,
.preset-icon-plusminus-square[aria-pressed="false"] {
  -webkit-mask: var(--icon-minus-square-svg) center / contain no-repeat;
  mask: var(--icon-minus-square-svg) center / contain no-repeat;
}
/* Password is currently visible */
.preset-icon-plusminus-square[aria-pressed="true"] {
  -webkit-mask-image: var(--icon-plus-square-svg);
  mask-image: var(--icon-plus-square-svg);
}

.preset-icon-up {
  -webkit-mask: var(--icon-chevron-svg) center / contain no-repeat;
  mask: var(--icon-chevron-svg) center / contain no-repeat;
}
.preset-icon-down {
  -webkit-mask: var(--icon-chevron-svg) center / contain no-repeat;
  mask: var(--icon-chevron-svg) center / contain no-repeat;
  rotate: 180deg;
}
.preset-icon-chevron {
  -webkit-mask: var(--icon-chevron-svg) center / contain no-repeat;
  mask: var(--icon-chevron-svg) center / contain no-repeat;
  transition: transform 160ms ease;
}
/* The SVG points down by default. */
.preset-icon-chevron[aria-expanded="true"] {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .preset-icon-chevron {
    transition: none;
  }
}

.preset-icon-hint {
  -webkit-mask: var(--icon-hint-svg) center / contain no-repeat;
  mask: var(--icon-hint-svg) center / contain no-repeat;
}
.preset-icon-info {
  -webkit-mask: var(--icon-info-svg) center / contain no-repeat;
  mask: var(--icon-info-svg) center / contain no-repeat;
}
.preset-icon-clock {
  -webkit-mask: var(--icon-search-svg) center / contain no-repeat;
  mask: var(--icon-search-svg) center / contain no-repeat;
}
.preset-icon-search {
  -webkit-mask: var(--icon-search-svg) center / contain no-repeat;
  mask: var(--icon-search-svg) center / contain no-repeat;
}
.preset-icon-trash {
  -webkit-mask: var(--icon-trash-svg) center / contain no-repeat;
  mask: var(--icon-trash-svg) center / contain no-repeat;
}

.preset-icon-spinner {
  -webkit-mask: var(--icon-spinner-svg) center / contain no-repeat;
  mask: var(--icon-spinner-svg) center / contain no-repeat;

  animation: preset-spinner-rotate 0.8s linear infinite;
}

/* ==========================================================================
   CnC variable for reduced padding and margin sizes
   ========================================================================== */
/* :root {
  --spacing: 0.25rem;
  --box-spacing: 0.25rem;
}

.box-spacing-20 {
  --box-spacing: 0.2rem;
}

.box-spacing-15 {
  --box-spacing: 0.15rem;
}

.box-spacing-10 {
  --box-spacing: 0.1rem;
} */

/* ==========================================================================
   1. Global radius scale
   ========================================================================== */

@layer cnc.tokens {
  :root {
    /*
     * Global radius scale.
     *
     * Style presets may replace these values application-wide.
     */
    /* --radius-none: 0;
    --radius-xxs: 0.125rem;
    --radius-xs: 0.1875rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;

    --radius-xxs: 0.25rem;
    --radius-xs: 0.35rem;
    --radius-sm: 0.4rem;
    --radius-md: 0.45rem;
    --radius-lg: 0.95rem;
    --radius-xl: 0.65rem;
    --radius-2xl: 0.75rem; */
    /*
     * Fallback used when an element has shape="rounded"
     * but does not have a recognized size.
     */
    --shape-border-radius-default: var(--radius-md);
  }
}

/* ==========================================================================
   1b. Design libraries
   --------------------------------------------------------------------------
   A design library is the radius scale, chosen at runtime: `app-design-library`
   writes `data-design-library` onto <html> and everything downstream follows,
   because BOTH the widget shape contract above and Tailwind's own `rounded-*`
   utilities read these same `--radius-*` variables. One attribute therefore
   re-shapes the whole page, chrome and preview alike.

   UNLAYERED, deliberately. The generated theme (`/@cnc/styles.css`) emits its
   `--radius-*` on a bare `:root` OUTSIDE every layer, and an unlayered
   declaration beats a layered one no matter how specific the layered selector
   is — which is why the commented-out scale in `cnc.tokens` above never had any
   effect. Here the contest is unlayered against unlayered, so specificity
   settles it, and `:root[data-design-library=…]` outranks `:root`.

   `default` restates the generated theme's own values. That makes it a true
   no-op: it is what the page paints before anything is chosen, so picking it
   RESTORES rather than applies, and a page that loads under it never flashes.
   ========================================================================== */

:root[data-design-library="default"] {
  --radius-none: 0px;
  --radius-xxs: 0.125rem;
  --radius-xs: 0.1875rem;
  --radius-sm: 0.125rem;
  --radius-DEFAULT: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;
}

/* Everything one step softer. The scale stays monotonic, so nothing inverts:
   a widget whose `lg` part sat inside its `xl` container still does. */
:root[data-design-library="soft"] {
  --radius-none: 0px;
  --radius-xxs: 0.25rem;
  --radius-xs: 0.3rem;
  --radius-sm: 0.375rem;
  --radius-DEFAULT: 0.5rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.125rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;
}

/* Capsules for controls, ordinary corners for surfaces. Only the small end of
   the scale collapses onto 9999px — a button, a chip, a badge. `md` is where
   the line is drawn and it is drawn there for a reason: `rounded-md` is worn by
   CARDS as often as by controls, and a card at 9999px is not a pill but a
   lozenge that clips the text inside it. */
:root[data-design-library="pill"] {
  --radius-none: 0px;
  --radius-xxs: 9999px;
  --radius-xs: 9999px;
  --radius-sm: 9999px;
  --radius-DEFAULT: 9999px;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;
}

/* Zero radius everywhere, `--radius-full` included — this is the library that
   squares the avatars and the pills too, which is the whole of its point. */
:root[data-design-library="sharp"] {
  --radius-none: 0px;
  --radius-xxs: 0px;
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-DEFAULT: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-2xl: 0px;
  --radius-3xl: 0px;
  --radius-full: 0px;
}

/* Two utilities Tailwind emits as LITERALS rather than as `var(--radius-…)`:
   bare `rounded` (0.25rem) and `rounded-full` (9999px). Left alone they are the
   holes in the library — `cnc-button` wears `rounded`, so the loudest widget on
   the demo-maker's stage would be the one that never changed shape. Restated
   here against the scale, and only under an explicit library, so a page that
   has chosen nothing still gets Tailwind's own rule untouched.

   `rounded-none` is deliberately NOT in this list: it means "no corner", not
   "the scale's smallest", and a library has no business overriding it. */
:root[data-design-library] .rounded {
  border-radius: var(--radius-DEFAULT, 0.25rem);
}

:root[data-design-library] .rounded-full {
  border-radius: var(--radius-full, 9999px);
}

/* ==========================================================================
   2. Size-dependent shape candidates
   ========================================================================== */

@layer cnc.attributes {
  /*
   * Each size establishes radius candidates.
   *
   * Widgets may override these variables without changing the final part
   * variables:
   *
   * cnc-tabs[size="sm"] {
   *   --shape-border-radius-rounded: 0.5rem;
   * }
   */

  :where([size="xxs"]) {
    --shape-border-radius-soft: calc(var(--radius-sm));
    --shape-border-radius-rounded: var(--radius-md);
  }

  :where([size="xs"]) {
    --shape-border-radius-soft: var(--radius-sm);
    --shape-border-radius-rounded: var(--radius-md);
  }

  :where([size="sm"]) {
    --shape-border-radius-soft: var(--radius-md);
    --shape-border-radius-rounded: var(--radius-lg);
  }

  :where([size="md"]) {
    --shape-border-radius-soft: var(--radius-md);
    --shape-border-radius-rounded: var(--radius-lg);
  }

  :where([size="lg"]) {
    --shape-border-radius-soft: var(--radius-md);
    --shape-border-radius-rounded: var(--radius-lg);
  }

  :where([size="xl"]) {
    --shape-border-radius-soft: var(--radius-lg);
    --shape-border-radius-rounded: var(--radius-xl);
  }

  :where([size="2xl"]) {
    --shape-border-radius-soft: var(--radius-lg);
    --shape-border-radius-rounded: var(--radius-xl);
  }

  /* ------------------------------------------------------------------------
     Shape resolution
     ------------------------------------------------------------------------ */

  /*
   * Default shape when a sized widget does not declare shape.
   *
   * Remove this rule if widgets should remain square unless shape is
   * explicitly provided.
   */
  :where([size]:not([shape])) {
    --shape-border-radius: var(--shape-border-radius-rounded, var(--shape-border-radius-default));
  }

  :where([shape="soft"]) {
    --shape-border-radius: var(--shape-border-radius-soft, var(--radius-sm));
  }

  :where([shape="rounded"]) {
    --shape-border-radius: var(--shape-border-radius-rounded, var(--shape-border-radius-default));
  }

  :where([shape="square"]) {
    --shape-border-radius: var(--radius-none);
  }

  :where([shape="pill"]) {
    --shape-border-radius: var(--shape-border-radius-pill, var(--radius-full));
  }

  :where([shape="circle"]) {
    --shape-border-radius: var(--shape-border-radius-circle, 50%);
  }
}

/* ==========================================================================
   3. Standard part-level radius variables
   ========================================================================== */

@layer cnc.parts {
  /*
   * These variables are assigned only on elements using CnC-style size or
   * shape attributes. They are inherited by the widget's light-DOM template.
   *
   * Every part initially follows --shape-border-radius. Individual widgets
   * can override any final variable.
   *
   * Example:
   *
   * cnc-tabs[size="sm"] {
   *   --item-border-radius: 0;
   * }
   *
   * cnc-card {
   *   --header-border-radius: var(--container-border-radius);
   *   --body-border-radius: 0;
   * }
   */

  :where([shape], [size]) {
    /* ----------------------------------------------------------------------
       Primary widget surfaces
       ---------------------------------------------------------------------- */

    --container-border-radius: var(--shape-border-radius, 0);
    --content-border-radius: var(--shape-border-radius, 0);
    --surface-border-radius: var(--shape-border-radius, 0);
    --wrapper-border-radius: var(--shape-border-radius, 0);

    /* ----------------------------------------------------------------------
       Structural sections
       ---------------------------------------------------------------------- */

    --header-border-radius: var(--shape-border-radius, 0);
    --body-border-radius: var(--shape-border-radius, 0);
    --footer-border-radius: var(--shape-border-radius, 0);
    --main-border-radius: var(--shape-border-radius, 0);
    --section-border-radius: var(--shape-border-radius, 0);
    --aside-border-radius: var(--shape-border-radius, 0);

    /* ----------------------------------------------------------------------
       Panels and containers
       ---------------------------------------------------------------------- */

    --panel-border-radius: var(--shape-border-radius, 0);
    --card-border-radius: var(--shape-border-radius, 0);
    --group-border-radius: var(--shape-border-radius, 0);
    --fieldset-border-radius: var(--shape-border-radius, 0);
    --toolbar-border-radius: var(--shape-border-radius, 0);
    --sidebar-border-radius: var(--shape-border-radius, 0);
    --viewport-border-radius: var(--shape-border-radius, 0);
    --canvas-border-radius: var(--shape-border-radius, 0);

    /* ----------------------------------------------------------------------
       Collections
       ---------------------------------------------------------------------- */

    --list-border-radius: var(--shape-border-radius, 0);
    --item-border-radius: var(--shape-border-radius, 0);
    --option-border-radius: var(--shape-border-radius, 0);
    --row-border-radius: var(--shape-border-radius, 0);
    --cell-border-radius: var(--shape-border-radius, 0);
    --column-border-radius: var(--shape-border-radius, 0);
    --column-header-border-radius: var(--shape-border-radius, 0);
    --group-header-border-radius: var(--shape-border-radius, 0);

    /* ----------------------------------------------------------------------
       Navigation
       ---------------------------------------------------------------------- */

    --nav-border-radius: var(--shape-border-radius, 0);
    --menu-border-radius: var(--shape-border-radius, 0);
    --menu-item-border-radius: var(--shape-border-radius, 0);
    --tab-border-radius: var(--shape-border-radius, 0);
    --tab-list-border-radius: var(--shape-border-radius, 0);
    --tab-panel-border-radius: var(--shape-border-radius, 0);
    --breadcrumb-border-radius: var(--shape-border-radius, 0);
    --pagination-border-radius: var(--shape-border-radius, 0);
    --pagination-item-border-radius: var(--shape-border-radius, 0);
    --tree-border-radius: var(--shape-border-radius, 0);
    --tree-item-border-radius: var(--shape-border-radius, 0);

    /* ----------------------------------------------------------------------
       Interactive controls
       ---------------------------------------------------------------------- */

    --control-border-radius: var(--shape-border-radius, 0);
    --button-border-radius: var(--shape-border-radius, 0);
    --trigger-border-radius: var(--shape-border-radius, 0);
    --toggle-border-radius: var(--shape-border-radius, 0);
    --switch-border-radius: var(--shape-border-radius, 0);
    --handle-border-radius: var(--shape-border-radius, 0);
    --thumb-border-radius: var(--shape-border-radius, 0);
    --track-border-radius: var(--shape-border-radius, 0);

    /* ----------------------------------------------------------------------
       Form controls
       ---------------------------------------------------------------------- */

    --field-border-radius: var(--shape-border-radius, 0);
    --input-border-radius: var(--shape-border-radius, 0);
    --textarea-border-radius: var(--shape-border-radius, 0);
    --select-border-radius: var(--shape-border-radius, 0);
    --checkbox-border-radius: var(--shape-border-radius, 0);
    --radio-border-radius: var(--shape-border-radius, 0);
    --search-border-radius: var(--shape-border-radius, 0);
    --picker-border-radius: var(--shape-border-radius, 0);
    --editor-border-radius: var(--shape-border-radius, 0);

    /* ----------------------------------------------------------------------
       Input prefixes, suffixes and addons
       ---------------------------------------------------------------------- */

    --prefix-border-radius: var(--shape-border-radius, 0);
    --suffix-border-radius: var(--shape-border-radius, 0);
    --addon-border-radius: var(--shape-border-radius, 0);
    --addon-prefix-border-radius: var(--shape-border-radius, 0);
    --addon-suffix-border-radius: var(--shape-border-radius, 0);
    --inset-prefix-border-radius: var(--shape-border-radius, 0);
    --inset-suffix-border-radius: var(--shape-border-radius, 0);

    /* ----------------------------------------------------------------------
       Overlays and floating surfaces
       ---------------------------------------------------------------------- */

    --overlay-border-radius: var(--shape-border-radius, 0);
    --popover-border-radius: var(--shape-border-radius, 0);
    --dropdown-border-radius: var(--shape-border-radius, 0);
    --dialog-border-radius: var(--shape-border-radius, 0);
    --modal-border-radius: var(--shape-border-radius, 0);
    --drawer-border-radius: var(--shape-border-radius, 0);
    --sheet-border-radius: var(--shape-border-radius, 0);
    --tooltip-border-radius: var(--shape-border-radius, 0);
    --toast-border-radius: var(--shape-border-radius, 0);
    --context-menu-border-radius: var(--shape-border-radius, 0);

    /* ----------------------------------------------------------------------
       Text and informational elements
       ---------------------------------------------------------------------- */

    --title-border-radius: var(--shape-border-radius, 0);
    --subtitle-border-radius: var(--shape-border-radius, 0);
    --label-border-radius: var(--shape-border-radius, 0);
    --description-border-radius: var(--shape-border-radius, 0);
    --helper-border-radius: var(--shape-border-radius, 0);
    --message-border-radius: var(--shape-border-radius, 0);
    --value-border-radius: var(--shape-border-radius, 0);
    --placeholder-border-radius: var(--shape-border-radius, 0);

    /* ----------------------------------------------------------------------
       Media and visual parts
       ---------------------------------------------------------------------- */

    --media-border-radius: var(--shape-border-radius, 0);
    --image-border-radius: var(--shape-border-radius, 0);
    --thumbnail-border-radius: var(--shape-border-radius, 0);
    --avatar-border-radius: var(--shape-border-radius, 0);
    --icon-border-radius: var(--shape-border-radius, 0);
    --illustration-border-radius: var(--shape-border-radius, 0);
    --preview-border-radius: var(--shape-border-radius, 0);

    /* ----------------------------------------------------------------------
       Small indicators
       ---------------------------------------------------------------------- */

    --badge-border-radius: var(--shape-border-radius, 0);
    --tag-border-radius: var(--shape-border-radius, 0);
    --chip-border-radius: var(--shape-border-radius, 0);
    --counter-border-radius: var(--shape-border-radius, 0);
    --indicator-border-radius: var(--shape-border-radius, 0);
    --status-border-radius: var(--shape-border-radius, 0);
    --marker-border-radius: var(--shape-border-radius, 0);
    --dot-border-radius: var(--shape-border-radius, 0);

    /* ----------------------------------------------------------------------
       Specialized widget parts
       ---------------------------------------------------------------------- */

    --accordion-border-radius: var(--shape-border-radius, 0);
    --accordion-item-border-radius: var(--shape-border-radius, 0);
    --accordion-trigger-border-radius: var(--shape-border-radius, 0);
    --accordion-content-border-radius: var(--shape-border-radius, 0);

    --calendar-border-radius: var(--shape-border-radius, 0);
    --calendar-header-border-radius: var(--shape-border-radius, 0);
    --calendar-day-border-radius: var(--shape-border-radius, 0);

    --table-border-radius: var(--shape-border-radius, 0);
    --table-header-border-radius: var(--shape-border-radius, 0);
    --table-body-border-radius: var(--shape-border-radius, 0);
    --table-footer-border-radius: var(--shape-border-radius, 0);

    --progress-border-radius: var(--shape-border-radius, 0);
    --progress-track-border-radius: var(--shape-border-radius, 0);
    --progress-value-border-radius: var(--shape-border-radius, 0);

    --skeleton-border-radius: var(--shape-border-radius, 0);
    --placeholder-block-border-radius: var(--shape-border-radius, 0);
  }

  /* ------------------------------------------------------------------------
     Animations keyframes
     ------------------------------------------------------------------------ */

  @keyframes preset-spinner-rotate {
    to {
      transform: rotate(1turn);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .preset-icon-spinner {
      animation-duration: 1.5s;
    }
  }
  @keyframes animate-shake {
    0%,
    100% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-12%);
    }
    75% {
      transform: translateX(12%);
    }
  }

  @keyframes animate-bounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20%);
    }
  }

  @keyframes animate-pulse {
    50% {
      opacity: 0.45;
      transform: scale(0.9);
    }
  }

  @keyframes animate-spin {
    to {
      transform: rotate(1turn);
    }
  }

  @keyframes animate-pop {
    from {
      opacity: 0;
      transform: scale(0.5);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes animate-draw-loop {
    0% {
      stroke-dashoffset: 1;
    }
    40%,
    60% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: -1;
    }
  }

  @keyframes animate-draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes animate-fill {
    to {
      fill-opacity: 1;
    }
  }

  @keyframes pin-pin {
    0% {
      transform: rotate(0deg) scale(1);
    }

    45% {
      transform: rotate(25deg) scale(0.95);
    }

    55% {
      transform: rotate(-8deg) scale(0.95);
    }

    100% {
      transform: rotate(0deg) scale(1);
    }
  }

  @keyframes pin-unpin {
    0% {
      transform: rotate(0deg) scale(1);
    }

    45% {
      transform: rotate(-25deg) scale(0.95);
    }

    55% {
      transform: rotate(8deg) scale(0.95);
    }

    100% {
      transform: rotate(0deg) scale(1);
    }
  }

  @keyframes pin-on {
    /* angled pin straightens + fades out */
    0% {
      transform: rotate(0deg);
      -webkit-mask-image: var(--icon-pin-svg);
      mask-image: var(--icon-pin-svg);
    }
    54% {
      transform: rotate(var(--pin-angle));
      -webkit-mask-image: var(--icon-pin-svg);
      mask-image: var(--icon-pin-svg);
    }
    /* filled pin fades in at rest — rotation resets while invisible */
    55% {
      transform: rotate(0deg);
      -webkit-mask-image: var(--icon-pin-filled-svg);
      mask-image: var(--icon-pin-filled-svg);
    }
    100% {
      transform: rotate(0deg);
      -webkit-mask-image: var(--icon-pin-filled-svg);
      mask-image: var(--icon-pin-filled-svg);
    }
  }
  @keyframes pin-off {
    /* filled pin fades out with a tiny "release" tilt */
    0% {
      -webkit-mask-image: var(--icon-pin-filled-svg);
      mask-image: var(--icon-pin-filled-svg);
    }
    /* angled pin fades in at its natural tilt */
    5% {
      transform: rotate(var(--pin-angle));
      -webkit-mask-image: var(--icon-pin-svg);
      mask-image: var(--icon-pin-svg);
    }
    100% {
      transform: rotate(0deg);
      -webkit-mask-image: var(--icon-pin-svg);
      mask-image: var(--icon-pin-svg);
    }
  }
}

/* ==========================================================================
   `color` attribute -> --color-* slots
   --------------------------------------------------------------------------
   Widgets written against the styling contract read a family-neutral scale
   (`var(--color-600, var(--color-neutral-600))`) so that ONE stylesheet can be
   re-tinted by an author writing `color="emerald"`. This block is what binds
   that attribute to the theme's generated `--color-<family>-<stop>` variables.
   Without it every `color=` is inert and widgets render on their neutral
   fallbacks. `:where()` keeps the specificity at zero so a widget's own rules
   and any instance `style="--color-500: ..."` still win.
   ========================================================================== */
:where([color="primary"]) {
  --color-50: var(--color-primary-50);
  --color-100: var(--color-primary-100);
  --color-200: var(--color-primary-200);
  --color-300: var(--color-primary-300);
  --color-400: var(--color-primary-400);
  --color-500: var(--color-primary-500);
  --color-600: var(--color-primary-600);
  --color-700: var(--color-primary-700);
  --color-800: var(--color-primary-800);
  --color-900: var(--color-primary-900);
  --color-950: var(--color-primary-950);
}
:where([color="secondary"]) {
  --color-50: var(--color-secondary-50);
  --color-100: var(--color-secondary-100);
  --color-200: var(--color-secondary-200);
  --color-300: var(--color-secondary-300);
  --color-400: var(--color-secondary-400);
  --color-500: var(--color-secondary-500);
  --color-600: var(--color-secondary-600);
  --color-700: var(--color-secondary-700);
  --color-800: var(--color-secondary-800);
  --color-900: var(--color-secondary-900);
  --color-950: var(--color-secondary-950);
}
:where([color="success"]) {
  --color-50: var(--color-success-50);
  --color-100: var(--color-success-100);
  --color-200: var(--color-success-200);
  --color-300: var(--color-success-300);
  --color-400: var(--color-success-400);
  --color-500: var(--color-success-500);
  --color-600: var(--color-success-600);
  --color-700: var(--color-success-700);
  --color-800: var(--color-success-800);
  --color-900: var(--color-success-900);
  --color-950: var(--color-success-950);
}
:where([color="warning"]) {
  --color-50: var(--color-warning-50);
  --color-100: var(--color-warning-100);
  --color-200: var(--color-warning-200);
  --color-300: var(--color-warning-300);
  --color-400: var(--color-warning-400);
  --color-500: var(--color-warning-500);
  --color-600: var(--color-warning-600);
  --color-700: var(--color-warning-700);
  --color-800: var(--color-warning-800);
  --color-900: var(--color-warning-900);
  --color-950: var(--color-warning-950);
}
:where([color="danger"]) {
  --color-50: var(--color-danger-50);
  --color-100: var(--color-danger-100);
  --color-200: var(--color-danger-200);
  --color-300: var(--color-danger-300);
  --color-400: var(--color-danger-400);
  --color-500: var(--color-danger-500);
  --color-600: var(--color-danger-600);
  --color-700: var(--color-danger-700);
  --color-800: var(--color-danger-800);
  --color-900: var(--color-danger-900);
  --color-950: var(--color-danger-950);
}
:where([color="info"]) {
  --color-50: var(--color-info-50);
  --color-100: var(--color-info-100);
  --color-200: var(--color-info-200);
  --color-300: var(--color-info-300);
  --color-400: var(--color-info-400);
  --color-500: var(--color-info-500);
  --color-600: var(--color-info-600);
  --color-700: var(--color-info-700);
  --color-800: var(--color-info-800);
  --color-900: var(--color-info-900);
  --color-950: var(--color-info-950);
}
:where([color="neutral"]) {
  --color-50: var(--color-neutral-50);
  --color-100: var(--color-neutral-100);
  --color-200: var(--color-neutral-200);
  --color-300: var(--color-neutral-300);
  --color-400: var(--color-neutral-400);
  --color-500: var(--color-neutral-500);
  --color-600: var(--color-neutral-600);
  --color-700: var(--color-neutral-700);
  --color-800: var(--color-neutral-800);
  --color-900: var(--color-neutral-900);
  --color-950: var(--color-neutral-950);
}
:where([color="slate"]) {
  --color-50: var(--color-slate-50);
  --color-100: var(--color-slate-100);
  --color-200: var(--color-slate-200);
  --color-300: var(--color-slate-300);
  --color-400: var(--color-slate-400);
  --color-500: var(--color-slate-500);
  --color-600: var(--color-slate-600);
  --color-700: var(--color-slate-700);
  --color-800: var(--color-slate-800);
  --color-900: var(--color-slate-900);
  --color-950: var(--color-slate-950);
}
:where([color="gray"]) {
  --color-50: var(--color-gray-50);
  --color-100: var(--color-gray-100);
  --color-200: var(--color-gray-200);
  --color-300: var(--color-gray-300);
  --color-400: var(--color-gray-400);
  --color-500: var(--color-gray-500);
  --color-600: var(--color-gray-600);
  --color-700: var(--color-gray-700);
  --color-800: var(--color-gray-800);
  --color-900: var(--color-gray-900);
  --color-950: var(--color-gray-950);
}
:where([color="zinc"]) {
  --color-50: var(--color-zinc-50);
  --color-100: var(--color-zinc-100);
  --color-200: var(--color-zinc-200);
  --color-300: var(--color-zinc-300);
  --color-400: var(--color-zinc-400);
  --color-500: var(--color-zinc-500);
  --color-600: var(--color-zinc-600);
  --color-700: var(--color-zinc-700);
  --color-800: var(--color-zinc-800);
  --color-900: var(--color-zinc-900);
  --color-950: var(--color-zinc-950);
}
:where([color="stone"]) {
  --color-50: var(--color-stone-50);
  --color-100: var(--color-stone-100);
  --color-200: var(--color-stone-200);
  --color-300: var(--color-stone-300);
  --color-400: var(--color-stone-400);
  --color-500: var(--color-stone-500);
  --color-600: var(--color-stone-600);
  --color-700: var(--color-stone-700);
  --color-800: var(--color-stone-800);
  --color-900: var(--color-stone-900);
  --color-950: var(--color-stone-950);
}
:where([color="red"]) {
  --color-50: var(--color-red-50);
  --color-100: var(--color-red-100);
  --color-200: var(--color-red-200);
  --color-300: var(--color-red-300);
  --color-400: var(--color-red-400);
  --color-500: var(--color-red-500);
  --color-600: var(--color-red-600);
  --color-700: var(--color-red-700);
  --color-800: var(--color-red-800);
  --color-900: var(--color-red-900);
  --color-950: var(--color-red-950);
}
:where([color="orange"]) {
  --color-50: var(--color-orange-50);
  --color-100: var(--color-orange-100);
  --color-200: var(--color-orange-200);
  --color-300: var(--color-orange-300);
  --color-400: var(--color-orange-400);
  --color-500: var(--color-orange-500);
  --color-600: var(--color-orange-600);
  --color-700: var(--color-orange-700);
  --color-800: var(--color-orange-800);
  --color-900: var(--color-orange-900);
  --color-950: var(--color-orange-950);
}
:where([color="amber"]) {
  --color-50: var(--color-amber-50);
  --color-100: var(--color-amber-100);
  --color-200: var(--color-amber-200);
  --color-300: var(--color-amber-300);
  --color-400: var(--color-amber-400);
  --color-500: var(--color-amber-500);
  --color-600: var(--color-amber-600);
  --color-700: var(--color-amber-700);
  --color-800: var(--color-amber-800);
  --color-900: var(--color-amber-900);
  --color-950: var(--color-amber-950);
}
:where([color="yellow"]) {
  --color-50: var(--color-yellow-50);
  --color-100: var(--color-yellow-100);
  --color-200: var(--color-yellow-200);
  --color-300: var(--color-yellow-300);
  --color-400: var(--color-yellow-400);
  --color-500: var(--color-yellow-500);
  --color-600: var(--color-yellow-600);
  --color-700: var(--color-yellow-700);
  --color-800: var(--color-yellow-800);
  --color-900: var(--color-yellow-900);
  --color-950: var(--color-yellow-950);
}
:where([color="lime"]) {
  --color-50: var(--color-lime-50);
  --color-100: var(--color-lime-100);
  --color-200: var(--color-lime-200);
  --color-300: var(--color-lime-300);
  --color-400: var(--color-lime-400);
  --color-500: var(--color-lime-500);
  --color-600: var(--color-lime-600);
  --color-700: var(--color-lime-700);
  --color-800: var(--color-lime-800);
  --color-900: var(--color-lime-900);
  --color-950: var(--color-lime-950);
}
:where([color="green"]) {
  --color-50: var(--color-green-50);
  --color-100: var(--color-green-100);
  --color-200: var(--color-green-200);
  --color-300: var(--color-green-300);
  --color-400: var(--color-green-400);
  --color-500: var(--color-green-500);
  --color-600: var(--color-green-600);
  --color-700: var(--color-green-700);
  --color-800: var(--color-green-800);
  --color-900: var(--color-green-900);
  --color-950: var(--color-green-950);
}
:where([color="emerald"]) {
  --color-50: var(--color-emerald-50);
  --color-100: var(--color-emerald-100);
  --color-200: var(--color-emerald-200);
  --color-300: var(--color-emerald-300);
  --color-400: var(--color-emerald-400);
  --color-500: var(--color-emerald-500);
  --color-600: var(--color-emerald-600);
  --color-700: var(--color-emerald-700);
  --color-800: var(--color-emerald-800);
  --color-900: var(--color-emerald-900);
  --color-950: var(--color-emerald-950);
}
:where([color="teal"]) {
  --color-50: var(--color-teal-50);
  --color-100: var(--color-teal-100);
  --color-200: var(--color-teal-200);
  --color-300: var(--color-teal-300);
  --color-400: var(--color-teal-400);
  --color-500: var(--color-teal-500);
  --color-600: var(--color-teal-600);
  --color-700: var(--color-teal-700);
  --color-800: var(--color-teal-800);
  --color-900: var(--color-teal-900);
  --color-950: var(--color-teal-950);
}
:where([color="cyan"]) {
  --color-50: var(--color-cyan-50);
  --color-100: var(--color-cyan-100);
  --color-200: var(--color-cyan-200);
  --color-300: var(--color-cyan-300);
  --color-400: var(--color-cyan-400);
  --color-500: var(--color-cyan-500);
  --color-600: var(--color-cyan-600);
  --color-700: var(--color-cyan-700);
  --color-800: var(--color-cyan-800);
  --color-900: var(--color-cyan-900);
  --color-950: var(--color-cyan-950);
}
:where([color="sky"]) {
  --color-50: var(--color-sky-50);
  --color-100: var(--color-sky-100);
  --color-200: var(--color-sky-200);
  --color-300: var(--color-sky-300);
  --color-400: var(--color-sky-400);
  --color-500: var(--color-sky-500);
  --color-600: var(--color-sky-600);
  --color-700: var(--color-sky-700);
  --color-800: var(--color-sky-800);
  --color-900: var(--color-sky-900);
  --color-950: var(--color-sky-950);
}
:where([color="blue"]) {
  --color-50: var(--color-blue-50);
  --color-100: var(--color-blue-100);
  --color-200: var(--color-blue-200);
  --color-300: var(--color-blue-300);
  --color-400: var(--color-blue-400);
  --color-500: var(--color-blue-500);
  --color-600: var(--color-blue-600);
  --color-700: var(--color-blue-700);
  --color-800: var(--color-blue-800);
  --color-900: var(--color-blue-900);
  --color-950: var(--color-blue-950);
}
:where([color="indigo"]) {
  --color-50: var(--color-indigo-50);
  --color-100: var(--color-indigo-100);
  --color-200: var(--color-indigo-200);
  --color-300: var(--color-indigo-300);
  --color-400: var(--color-indigo-400);
  --color-500: var(--color-indigo-500);
  --color-600: var(--color-indigo-600);
  --color-700: var(--color-indigo-700);
  --color-800: var(--color-indigo-800);
  --color-900: var(--color-indigo-900);
  --color-950: var(--color-indigo-950);
}
:where([color="violet"]) {
  --color-50: var(--color-violet-50);
  --color-100: var(--color-violet-100);
  --color-200: var(--color-violet-200);
  --color-300: var(--color-violet-300);
  --color-400: var(--color-violet-400);
  --color-500: var(--color-violet-500);
  --color-600: var(--color-violet-600);
  --color-700: var(--color-violet-700);
  --color-800: var(--color-violet-800);
  --color-900: var(--color-violet-900);
  --color-950: var(--color-violet-950);
}
:where([color="purple"]) {
  --color-50: var(--color-purple-50);
  --color-100: var(--color-purple-100);
  --color-200: var(--color-purple-200);
  --color-300: var(--color-purple-300);
  --color-400: var(--color-purple-400);
  --color-500: var(--color-purple-500);
  --color-600: var(--color-purple-600);
  --color-700: var(--color-purple-700);
  --color-800: var(--color-purple-800);
  --color-900: var(--color-purple-900);
  --color-950: var(--color-purple-950);
}
:where([color="fuchsia"]) {
  --color-50: var(--color-fuchsia-50);
  --color-100: var(--color-fuchsia-100);
  --color-200: var(--color-fuchsia-200);
  --color-300: var(--color-fuchsia-300);
  --color-400: var(--color-fuchsia-400);
  --color-500: var(--color-fuchsia-500);
  --color-600: var(--color-fuchsia-600);
  --color-700: var(--color-fuchsia-700);
  --color-800: var(--color-fuchsia-800);
  --color-900: var(--color-fuchsia-900);
  --color-950: var(--color-fuchsia-950);
}
:where([color="pink"]) {
  --color-50: var(--color-pink-50);
  --color-100: var(--color-pink-100);
  --color-200: var(--color-pink-200);
  --color-300: var(--color-pink-300);
  --color-400: var(--color-pink-400);
  --color-500: var(--color-pink-500);
  --color-600: var(--color-pink-600);
  --color-700: var(--color-pink-700);
  --color-800: var(--color-pink-800);
  --color-900: var(--color-pink-900);
  --color-950: var(--color-pink-950);
}
:where([color="rose"]) {
  --color-50: var(--color-rose-50);
  --color-100: var(--color-rose-100);
  --color-200: var(--color-rose-200);
  --color-300: var(--color-rose-300);
  --color-400: var(--color-rose-400);
  --color-500: var(--color-rose-500);
  --color-600: var(--color-rose-600);
  --color-700: var(--color-rose-700);
  --color-800: var(--color-rose-800);
  --color-900: var(--color-rose-900);
  --color-950: var(--color-rose-950);
}