.surface-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);transition:box-shadow var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out)}.surface-card--default{box-shadow:var(--shadow-sm)}.surface-card--raised{box-shadow:var(--shadow-md)}.surface-card--sunken{background-color:var(--color-surface-sunken);box-shadow:none}.surface-card--interactive{cursor:pointer}.surface-card--interactive:hover{box-shadow:var(--shadow-lg);border-color:var(--color-border-strong);transform:translateY(-1px)}.surface-card--interactive:active{box-shadow:var(--shadow-sm);transform:translateY(0)}.surface-card--interactive:focus-visible{box-shadow:var(--shadow-focus);outline:none}.surface-card__header{justify-content:space-between;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-4);display:flex}.surface-card__title{font-family:var(--font-sans);font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--color-text-primary);line-height:var(--leading-snug)}.surface-card__meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted);letter-spacing:var(--tracking-wide)}.surface-card__body{color:var(--color-text-secondary);font-size:var(--text-base);line-height:var(--leading-normal)}.surface-card__footer{align-items:center;gap:var(--space-2);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border);display:flex}.surface-card--sm{padding:var(--space-4);border-radius:var(--radius-md)}.surface-card--lg{padding:var(--space-8);border-radius:var(--radius-xl)}