/* Shared chrome for design-system specimen cards.
 * Each card is rendered standalone in an iframe at ~700px wide.
 * No titles in-card — the asset name is rendered outside.
 */

@import url('../colors_and_type.css');

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100%;
    background: var(--card);
    color: var(--text);
    font-family: var(--font-sans);
}

body.dark {
    background: var(--navy);
    color: #fff;
}

.card-root {
    padding: 20px 24px;
    width: 100%;
}

/* Inline grid utilities used by individual cards */
.row     { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.col     { display: flex; flex-direction: column; gap: 8px; }
.between { display: flex; align-items: center; justify-content: space-between; }

/* Tiny captions under swatches/specimens */
.cap {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--muted);
    text-transform: uppercase;
}
.cap-light { color: var(--white-55); }

.mono { font-family: var(--font-mono); font-size: 11px; }

/* Swatch primitive */
.swatch {
    width: 100%;
    aspect-ratio: 1.6 / 1;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.swatch.dark { border-color: var(--white-08); }