/* /////////////////////////////////////
   UTILITIES
   Small reusable helper classes
///////////////////////////////////// */

.muted,
.meta {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.35;
}

.error,
.error-message {
  background: var(--red-bg);
  color: var(--red);
  padding: 0.75rem;
  border-radius: var(--cc-radius-lg, 0.75rem);
  margin-bottom: 1rem;
}

.item-title {
  font-weight: 500;
  line-height: 1.25;
}

.text-muted {
  color: var(--muted);
}

.text-large {
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  line-height: 1.35;
  font-weight: 700;
}

.text-right {
  text-align: right;
}

.full-width {
  width: 100%;
}

.hidden {
  display: none;
}

.success-box {
  background: var(--green-bg);
  color: var(--green-text);
  padding: 0.75rem;
  border-radius: var(--cc-radius-lg, 0.75rem);
  font-weight: 500;
  margin: 1rem 0;
}

/* /////////////////////////////////////
   COLOUR TOKEN PALETTE
   Shared design-token preview layout
///////////////////////////////////// */

.colour-token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.colour-token-card {
  border: 0.0625rem solid var(--cc-colour-border);
  border-radius: var(--cc-radius-lg);
  background: var(--cc-colour-surface);
  padding: clamp(0.85rem, 2vw, 1.15rem);
}

.colour-token-card h2 {
  margin: 0 0 clamp(0.75rem, 1.5vw, 1rem);
  padding-block-end: 0.55rem;
  border-block-end: 0.0625rem solid var(--cc-colour-border);
  color: var(--cc-colour-text);
  font-size: clamp(0.95rem, 1vw, 1.05rem);
}

.colour-token-list {
  display: grid;
  gap: clamp(0.55rem, 1vw, 0.75rem);
}

.colour-token-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(0.65rem, 1.5vw, 0.85rem);
}

.colour-token-meta {
  min-inline-size: 0;
  display: grid;
  gap: 0.15rem;
}

.colour-token-meta code {
  color: var(--cc-colour-text);
  font-size: 0.8rem;
  white-space: nowrap;
}

.colour-token-meta span {
  color: var(--cc-colour-muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.colour-swatch {
  inline-size: clamp(3rem, 6vw, 4rem);
  block-size: clamp(1.7rem, 3vw, 2.1rem);
  border: 0.0625rem solid var(--cc-colour-border);
  border-radius: var(--cc-radius-sm);
  display: inline-block;
  background: var(--swatch-colour);
  box-shadow:
    inset 0 0 0 0.0625rem var(--cc-swatch-inset-ring),
    0 0 0 0.0625rem var(--cc-swatch-outline-ring);
}

.colour-swatch--white { --swatch-colour: var(--cc-white); }
.colour-swatch--black { --swatch-colour: var(--cc-black); }
.colour-swatch--grey-50 { --swatch-colour: var(--cc-grey-50); }
.colour-swatch--grey-100 { --swatch-colour: var(--cc-grey-100); }
.colour-swatch--grey-200 { --swatch-colour: var(--cc-grey-200); }
.colour-swatch--grey-300 { --swatch-colour: var(--cc-grey-300); }
.colour-swatch--grey-400 { --swatch-colour: var(--cc-grey-400); }
.colour-swatch--grey-500 { --swatch-colour: var(--cc-grey-500); }
.colour-swatch--grey-600 { --swatch-colour: var(--cc-grey-600); }
.colour-swatch--grey-700 { --swatch-colour: var(--cc-grey-700); }
.colour-swatch--grey-800 { --swatch-colour: var(--cc-grey-800); }
.colour-swatch--grey-900 { --swatch-colour: var(--cc-grey-900); }
.colour-swatch--primary { --swatch-colour: var(--cc-colour-primary); }
.colour-swatch--primary-strong { --swatch-colour: var(--cc-colour-primary-strong); }
.colour-swatch--info { --swatch-colour: var(--cc-colour-info); }
.colour-swatch--success { --swatch-colour: var(--cc-colour-success); }
.colour-swatch--success-dark { --swatch-colour: var(--cc-colour-success-dark); }
.colour-swatch--warning { --swatch-colour: var(--cc-colour-warning); }
.colour-swatch--warning-dark { --swatch-colour: var(--cc-colour-warning-dark); }
.colour-swatch--danger { --swatch-colour: var(--cc-colour-danger); }
.colour-swatch--danger-strong { --swatch-colour: var(--cc-colour-danger-strong); }
.colour-swatch--bg { --swatch-colour: var(--cc-bg); }
.colour-swatch--surface { --swatch-colour: var(--cc-colour-surface); }
.colour-swatch--surface-soft { --swatch-colour: var(--cc-colour-surface-soft); }
.colour-swatch--text { --swatch-colour: var(--cc-colour-text); }
.colour-swatch--body { --swatch-colour: var(--cc-colour-body); }
.colour-swatch--muted { --swatch-colour: var(--cc-colour-muted); }
.colour-swatch--border { --swatch-colour: var(--cc-colour-border); }
.colour-swatch--border-muted { --swatch-colour: var(--cc-colour-border-muted); }
.colour-swatch--border-strong { --swatch-colour: var(--cc-colour-border-strong); }
.colour-swatch--primary-soft { --swatch-colour: var(--cc-colour-primary-soft); }
.colour-swatch--primary-bg { --swatch-colour: var(--cc-colour-primary-bg); }
.colour-swatch--primary-line { --swatch-colour: var(--cc-colour-primary-line); }
.colour-swatch--success-soft { --swatch-colour: var(--cc-colour-success-soft); }
.colour-swatch--warning-soft { --swatch-colour: var(--cc-colour-warning-soft); }
.colour-swatch--danger-soft { --swatch-colour: var(--cc-colour-danger-soft); }
.colour-swatch--danger-line { --swatch-colour: var(--cc-colour-danger-line); }
.colour-swatch--nav-bg { --swatch-colour: var(--cc-nav-bg); }
.colour-swatch--nav-dropdown-bg { --swatch-colour: var(--cc-nav-dropdown-bg); }
.colour-swatch--nav-hover-bg { --swatch-colour: var(--cc-nav-hover-bg); }
.colour-swatch--nav-muted-bg { --swatch-colour: var(--cc-nav-muted-bg); }
.colour-swatch--nav-muted-bg-strong { --swatch-colour: var(--cc-nav-muted-bg-strong); }
.colour-swatch--table-head-bg { --swatch-colour: var(--cc-table-head-bg); }
.colour-swatch--table-row-alt-bg { --swatch-colour: var(--cc-table-row-alt-bg); }
.colour-swatch--table-row-hover-bg { --swatch-colour: var(--cc-table-row-hover-bg); }
.colour-swatch--table-line { --swatch-colour: var(--cc-table-line); }


/* /////////////////////////////////////
   COLOUR TOKEN VALUE LABEL
///////////////////////////////////// */

.colour-token-meta span strong {
  color: var(--cc-colour-text);
  font-weight: 600;
}