/*
 * daily-lucky-color.css — per-tool styles for the colour swatches.
 * Named colours are the only place raw hex is unavoidable (physical colours).
 * Everything else uses tokens (CSP: style-src 'self', no inline styles).
 */

.dlc-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.dlc-h-icon { vertical-align: -2px; }
.dlc-stat-grid { grid-template-columns: 1fr; }

/* Swatch rows: coloured square + colour name. */
.dlc-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.dlc-color {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
}
.dlc-color-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.dlc-swatch {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  flex: none;
}

/* Named colour swatches (physical colours — hex required). */
.sw-red    { background: #e5484d; }
.sw-pink   { background: #e93d82; }
.sw-green  { background: #30a46c; }
.sw-grey   { background: #8b8d98; }
.sw-blue   { background: #4093ef; }
.sw-yellow { background: #f5d90a; }
.sw-black  { background: #1a1a1a; }
.sw-orange { background: #f76b15; }