/* Card: the frosted-glass panel most content sits on. */
@layer reset, tokens, base, layout, components, utilities, print;

@layer components {
  .card {
    margin-block: var(--space-4); padding: var(--space-4) var(--space-5);
    background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  }
  .card > h2:first-child, .card > header:first-child h2 { margin-top: var(--space-1); }
  .card--solid { background: var(--solid); backdrop-filter: none; }
  .callout--warning { border-left: 4px solid var(--warning); }

  /* A short note set apart, e.g. "Prices fixed when sent". */
  .callout {
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    background: var(--glass-strong); border: 1px solid var(--glass-edge); font-size: var(--text-sm);
  }
}

@layer components {
  /* Colour swatches (style guide). */
  .swatches { display: flex; flex-wrap: wrap; gap: var(--space-4); }
  .swatch { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--muted); }
  .swatch span { width: 3.5rem; height: 3.5rem; border-radius: var(--radius-md); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
}

@layer components {
  /* Wide tables scroll inside their card rather than pushing the page sideways. */
  .card { overflow-x: auto; }
}

@layer components {
  /* Logo mark at several sizes (style guide). */
  .logo-sizes { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-end; }
  .logo-sizes figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--muted); }
}