@import url('./reset.css') layer(reset);

@import url('./tokens/color.css') layer(tokens);
@import url('./tokens/depth.css') layer(tokens);
@import url('./tokens/size.css') layer(tokens);
@import url('./tokens/transition.css') layer(tokens);
@import url('./tokens/typography.css') layer(tokens);
@import url('./tokens/z-index.css') layer(tokens);

@layer global {
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
  }

  html,
  body {
    font-family: var(--font-stack);
    font-weight: var(--font-weight-normal);
    font-size: calc(var(--base-grid-size) * 4);
    line-height: calc(var(--base-grid-size) * 6);
    color: var(--type-light-high-contrast);
    background-color: var(--surface-light-0);
    height: 100%;
  }

  input,
  textarea,
  select,
  button {
    font-family: var(--font-stack);
    margin: 0;
  }

  button {
    background-color: transparent;
    border: none;
    padding: 0;
  }

  /* Default layout for the <footer> projected into riv-dialog's footer slot.
     Defined here (rather than in dialog.component.css) so it reaches the
     projected element, which keeps its parent component's view encapsulation.
     The selector targets the .riv-dialog-footer wrapper instead of `riv-dialog`
     because riv-modal teleports the dialog subtree out of the <riv-dialog> host
     (via the *riv-overlay outlet), so the footer is not a DOM descendant of
     <riv-dialog> at runtime. */
  .riv-dialog-footer:not(.custom) > footer {
    padding: var(--size-medium);
    display: flex;
    justify-content: flex-end;
    gap: var(--size-small);
  }

  /* Divider utilities */
  .riv-divider {
    width: 100%;
    height: var(--border-width);
    min-height: var(--border-width);
    background-color: var(--border-light);
  }

  .riv-divider-vertical {
    width: var(--border-width);
    min-width: var(--border-width);
    height: 100%;
    background-color: var(--border-light);
  }
}