/*
 * Rivoli Mail adapter for the canonical Rivoli design package.
 *
 * Product code uses the established --rivoli-* and legacy --color-* names
 * during the migration. All values themselves remain owned by the local copy
 * of the canonical --rv-* token set below.
 */
@import url("/shared/rivoli/tokens.css");
@import url("/shared/rivoli/legacy-compat.css");

:root {
  --rivoli-surface-raised: var(--rv-color-surface-raised);
  --rivoli-primary-contrast: var(--rv-color-text-on-primary);
  --rivoli-info: var(--rv-color-info);
  --rivoli-info-bg: var(--rv-color-info-surface);
  --rivoli-shadow-md: var(--rv-shadow-md);
  --rivoli-overlay: var(--rv-color-overlay);
  --rivoli-font-sans: var(--rv-font-sans);
  --rivoli-font-mono: var(--rv-font-mono);
  --rivoli-product-mail: var(--rv-color-info);
  --rivoli-product-mail-bg: var(--rv-color-info-surface);
  --rivoli-product-studio: var(--rv-color-warning);
  --rivoli-product-studio-bg: var(--rv-color-warning-surface);

  /* Transitional, generic names used by the existing static Mail pages. */
  --color-badge-managed: var(--rv-color-info);
  --color-badge-managed-bg: var(--rv-color-info-surface);
  --color-badge-shared: var(--rv-color-warning);
  --color-badge-shared-bg: var(--rv-color-warning-surface);
  --color-badge-self-managed: var(--rv-color-success);
  --color-badge-self-managed-bg: var(--rv-color-success-surface);
  --font-sans: var(--rv-font-sans);
  --font-mono: var(--rv-font-mono);
  --font-size-xs: var(--rv-font-size-xs);
  --font-size-sm: var(--rv-font-size-sm);
  --font-size-base: var(--rv-font-size-md);
  --font-size-lg: var(--rv-font-size-lg);
  --font-size-xl: var(--rv-font-size-xl);
  --font-size-2xl: var(--rv-font-size-2xl);
  --font-weight-normal: var(--rv-font-weight-regular);
  --font-weight-medium: var(--rv-font-weight-semibold);
  --font-weight-bold: var(--rv-font-weight-bold);
  --line-height-tight: var(--rv-line-height-tight);
  --line-height-normal: var(--rv-line-height-normal);
  --space-1: var(--rv-space-1);
  --space-2: var(--rv-space-2);
  --space-3: var(--rv-space-3);
  --space-4: var(--rv-space-4);
  --space-5: var(--rv-space-5);
  --space-6: var(--rv-space-6);
  --space-7: var(--rv-space-7);
  --space-8: var(--rv-space-8);
  --radius-sm: var(--rv-radius-sm);
  --radius-md: var(--rv-radius-md);
  --radius-lg: var(--rv-radius-lg);
  --shadow-sm: var(--rv-shadow-sm);
  --shadow-md: var(--rv-shadow-md);
  --shadow-lg: var(--rv-shadow-lg);
  --focus-ring: var(--rv-color-focus);
  --z-dropdown: var(--rv-z-popover);
  --z-modal: var(--rv-z-dialog);
  --z-toast: var(--rv-z-toast);
}

/* Existing pages used data-theme before the package introduced its namespace. */
:root, :root[data-theme] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--rv-color-canvas); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: var(--rv-color-canvas);
  color: var(--rv-color-text);
  font-family: var(--rv-font-sans);
  font-size: var(--rv-font-size-sm);
  line-height: var(--rv-line-height-normal);
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { color: inherit; font: inherit; }
button, select { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
code, pre, .mono { font-family: var(--rv-font-mono); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--rv-color-focus); outline-offset: 2px; }