@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  .cinder-surface {
    background: var(--cinder-surface);
    border: 1px solid var(--cinder-border);
    border-radius: var(--cinder-radius-md);
  }

  .cinder-surface[data-cinder-tone='raised'] {
    background: var(--cinder-surface-raised);
    box-shadow: var(--cinder-shadow-sm);
  }

  .cinder-surface[data-cinder-tone='inset'] {
    background: var(--cinder-surface-inset);
  }

  .cinder-surface[data-cinder-tone='transparent'] {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
}