/* =====================================
   SURFACE PRIMITIVES
   ===================================== */

/* Page-level surface */
.page {
    background-color: var(--color-page);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
  }
  
  
  /* Generic surface */
  .surface {
    background-color: var(--color-surface);
  }
  
  
  /* Card surface */
  .card {
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
  }
  
  
  /* Card variants (non-visual behavior only) */
  .card--compact {
    padding: var(--space-sm);
  }
  
  .card--spacious {
    padding: var(--space-lg);
  }