/* Generated by npm run generate:palettes — do not edit by hand */
/* Source: tokens/colors.css — PimentCSS v1 */

.palette {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 14.5rem;
}

.palette__chip {
  min-height: 4.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.5rem 0.75rem;
}

.palette__step {
  font-size: 0.875rem;
  font-weight: var(--font-weight-semi-bold, 600);
  line-height: 1.2;
}

.palette__oklch {
  display: inline-block;
  margin: 0;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.35;
  word-break: break-all;
  background: var(--neutral-white, #fff);
  color: var(--neutral-black, #0a0a0a);
  box-shadow: 0 0 0 1px oklch(0% 0 0 / 0.14);
}

[data-theme="dark"] .palette__oklch {
  background: var(--neutral-black, #0a0a0a);
  color: var(--neutral-white, #fff);
  box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.22);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .palette__oklch {
    background: var(--neutral-black, #0a0a0a);
    color: var(--neutral-white, #fff);
    box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.22);
  }
}

.palette__chip:first-child {
  border-radius: var(--border-radius-8) var(--border-radius-8) 0 0;
}

.palette__chip:last-child {
  border-radius: 0 0 var(--border-radius-8) var(--border-radius-8);
}

.palettes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
  gap: var(--space-5);
}

.palette__title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-semi-bold);
}

.palette__alias {
  margin: 0 0 var(--space-2);
  font-size: 0.875rem;
  color: var(--text-muted);
}

.palette__chip--primary-100 { background: var(--primary-100); color: var(--primary-900); }
.palette__chip--primary-200 { background: var(--primary-200); color: var(--primary-900); }
.palette__chip--primary-300 { background: var(--primary-300); color: var(--primary-900); }
.palette__chip--primary-400 { background: var(--primary-400); color: var(--primary-100); }
.palette__chip--primary-500 { background: var(--primary-500); color: var(--primary-100); }
.palette__chip--primary-600 { background: var(--primary-600); color: var(--primary-100); }
.palette__chip--primary-700 { background: var(--primary-700); color: var(--primary-100); }
.palette__chip--primary-800 { background: var(--primary-800); color: var(--primary-100); }
.palette__chip--primary-900 { background: var(--primary-900); color: var(--primary-100); }
.palette__chip--accent-100 { background: var(--accent-100); color: var(--accent-900); }
.palette__chip--accent-200 { background: var(--accent-200); color: var(--accent-900); }
.palette__chip--accent-300 { background: var(--accent-300); color: var(--accent-900); }
.palette__chip--accent-400 { background: var(--accent-400); color: var(--accent-100); }
.palette__chip--accent-500 { background: var(--accent-500); color: var(--accent-100); }
.palette__chip--accent-600 { background: var(--accent-600); color: var(--accent-100); }
.palette__chip--accent-700 { background: var(--accent-700); color: var(--accent-100); }
.palette__chip--accent-800 { background: var(--accent-800); color: var(--accent-100); }
.palette__chip--accent-900 { background: var(--accent-900); color: var(--accent-100); }
.palette__chip--neutral-100 { background: var(--neutral-100); color: var(--neutral-900); }
.palette__chip--neutral-200 { background: var(--neutral-200); color: var(--neutral-900); }
.palette__chip--neutral-300 { background: var(--neutral-300); color: var(--neutral-900); }
.palette__chip--neutral-400 { background: var(--neutral-400); color: var(--neutral-100); }
.palette__chip--neutral-450 { background: var(--neutral-450); color: var(--neutral-900); }
.palette__chip--neutral-500 { background: var(--neutral-500); color: var(--neutral-100); }
.palette__chip--neutral-600 { background: var(--neutral-600); color: var(--neutral-100); }
.palette__chip--neutral-700 { background: var(--neutral-700); color: var(--neutral-100); }
.palette__chip--neutral-800 { background: var(--neutral-800); color: var(--neutral-100); }
.palette__chip--neutral-900 { background: var(--neutral-900); color: var(--neutral-100); }
.palette__chip--information-100 { background: var(--information-100); color: var(--information-900); }
.palette__chip--information-200 { background: var(--information-200); color: var(--information-900); }
.palette__chip--information-300 { background: var(--information-300); color: var(--information-900); }
.palette__chip--information-400 { background: var(--information-400); color: var(--information-100); }
.palette__chip--information-500 { background: var(--information-500); color: var(--information-100); }
.palette__chip--information-600 { background: var(--information-600); color: var(--information-100); }
.palette__chip--information-700 { background: var(--information-700); color: var(--information-100); }
.palette__chip--information-800 { background: var(--information-800); color: var(--information-100); }
.palette__chip--information-900 { background: var(--information-900); color: var(--information-100); }
.palette__chip--success-100 { background: var(--success-100); color: var(--success-900); }
.palette__chip--success-200 { background: var(--success-200); color: var(--success-900); }
.palette__chip--success-300 { background: var(--success-300); color: var(--success-900); }
.palette__chip--success-400 { background: var(--success-400); color: var(--success-100); }
.palette__chip--success-500 { background: var(--success-500); color: var(--success-100); }
.palette__chip--success-600 { background: var(--success-600); color: var(--success-100); }
.palette__chip--success-650 { background: var(--success-650); color: var(--success-100); }
.palette__chip--success-700 { background: var(--success-700); color: var(--success-100); }
.palette__chip--success-800 { background: var(--success-800); color: var(--success-100); }
.palette__chip--success-900 { background: var(--success-900); color: var(--success-100); }
.palette__chip--warning-100 { background: var(--warning-100); color: var(--warning-900); }
.palette__chip--warning-200 { background: var(--warning-200); color: var(--warning-900); }
.palette__chip--warning-300 { background: var(--warning-300); color: var(--warning-900); }
.palette__chip--warning-400 { background: var(--warning-400); color: var(--warning-100); }
.palette__chip--warning-500 { background: var(--warning-500); color: var(--warning-100); }
.palette__chip--warning-600 { background: var(--warning-600); color: var(--warning-100); }
.palette__chip--warning-700 { background: var(--warning-700); color: var(--warning-100); }
.palette__chip--warning-800 { background: var(--warning-800); color: var(--warning-100); }
.palette__chip--warning-900 { background: var(--warning-900); color: var(--warning-100); }
.palette__chip--error-100 { background: var(--error-100); color: var(--error-900); }
.palette__chip--error-200 { background: var(--error-200); color: var(--error-900); }
.palette__chip--error-300 { background: var(--error-300); color: var(--error-900); }
.palette__chip--error-400 { background: var(--error-400); color: var(--error-100); }
.palette__chip--error-450 { background: var(--error-450); color: var(--error-900); }
.palette__chip--error-500 { background: var(--error-500); color: var(--error-100); }
.palette__chip--error-600 { background: var(--error-600); color: var(--error-100); }
.palette__chip--error-700 { background: var(--error-700); color: var(--error-100); }
.palette__chip--error-800 { background: var(--error-800); color: var(--error-100); }
.palette__chip--error-900 { background: var(--error-900); color: var(--error-100); }
.palette__chip--shades-white { background: var(--neutral-white); color: var(--neutral-900); }
.palette__chip--shades-black { background: var(--neutral-black); color: var(--neutral-100); }