/* Shared card-frame styles used by every preview/ card. Each card HTML applies a .dir-* class on to pick a direction. */ html, body { height: 100%; margin: 0; } body { padding: 20px 24px; box-sizing: border-box; background: var(--canvas); color: var(--fg-1); font-family: var(--font-body); display: flex; flex-direction: column; gap: 14px; overflow: hidden; } .row { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; } .row.tight { gap: 8px; } .col { display: flex; flex-direction: column; gap: 8px; } .fill { flex: 1; } .muted { color: var(--fg-3); } .hex { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.02em; } .kicker { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; } /* Swatch */ .sw { flex: 1; min-width: 64px; height: 96px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.06); padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; } .sw .name { font-size: 11px; font-weight: 600; line-height: 1.1; } .sw .val { font-size: 10px; opacity: 0.7; font-family: var(--font-mono, monospace); letter-spacing: 0.02em; } .sw.lg { flex: 2; } .sw.sm { height: 64px; } /* Type lines */ .type-display { font-family: var(--font-display); font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; } .type-body { font-family: var(--font-body); font-size: 15px; line-height: 1.5; } .type-meta { font-size: 11px; color: var(--fg-3); } .type-indic-gu { font-family: var(--font-gu); font-size: 18px; line-height: 1.55; } .type-indic-dv { font-family: var(--font-dv); font-size: 18px; line-height: 1.55; } .type-indic-gj { font-family: var(--font-gj); font-size: 18px; line-height: 1.55; } /* Component primitives */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-body); font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 4px; border: 1px solid var(--border-strong); background: var(--canvas-2); color: var(--fg-1); cursor: pointer; } .btn:hover { background: var(--canvas-sunk); } .btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .btn-primary:hover { background: var(--primary-700); } .btn-ghost { background: transparent; border-color: transparent; } .btn-sm { padding: 4px 10px; font-size: 12px; } .tag { display: inline-flex; align-items: center; font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 500; font-family: var(--font-mono, monospace); letter-spacing: 0.02em; } .tag-ca { background: var(--doc-ca-bg); color: var(--doc-ca-fg); } .tag-in { background: var(--doc-in-bg); color: var(--doc-in-fg); } .av { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--fg-1); background: var(--canvas-sunk); border: 1.5px solid var(--canvas-2); }