@metropolle/design-system/dist/css/tokens.css

Sistema de design unificado para a plataforma Metropolle

:root {
  /* Metropolle Design System Tokens */

  /* TYPOGRAPHY */
  --mds-typography-fontFamily-brand: Helvetica, Inter Tight, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --mds-typography-fontFamily-mono: 'SF Mono', Monaco, 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
  --mds-typography-fontSize-xs: 0.75rem;
  --mds-typography-fontSize-sm: 0.875rem;
  --mds-typography-fontSize-base: 1rem;
  --mds-typography-fontSize-lg: 1.125rem;
  --mds-typography-fontSize-xl: 1.25rem;
  --mds-typography-fontSize-2xl: 1.5rem;
  --mds-typography-fontSize-3xl: 1.875rem;
  --mds-typography-fontSize-4xl: 2.125rem;
  --mds-typography-lineHeight-tight: 1.2;
  --mds-typography-lineHeight-normal: 1.5;
  --mds-typography-lineHeight-relaxed: 1.75;
  --mds-typography-letterSpacing-brand: -0.05rem;
  --mds-typography-letterSpacing-tight: -0.03rem;
  --mds-typography-letterSpacing-normal: 0;
  --mds-typography-letterSpacing-wide: 0.025rem;
  --mds-typography-fontWeight-light: 300;
  --mds-typography-fontWeight-normal: 400;
  --mds-typography-fontWeight-medium: 500;
  --mds-typography-fontWeight-semibold: 600;
  --mds-typography-fontWeight-bold: 700;

  /* SPACING */
  --mds-spacing-xs: 0.25rem;
  --mds-spacing-sm: 0.5rem;
  --mds-spacing-md: 1rem;
  --mds-spacing-lg: 1.5rem;
  --mds-spacing-xl: 2rem;
  --mds-spacing-2xl: 3rem;
  --mds-spacing-3xl: 4rem;

}

/* Glass Card Base Classes */
.mds-glass-card {
  backdrop-filter: var(--mds-effects-backdrop-glass-filter);
  -webkit-backdrop-filter: var(--mds-effects-backdrop-glass-webkitFilter);
  border-radius: var(--mds-spacing-borderRadius-xl);
  transition: var(--mds-effects-transition-normal);
  padding: var(--mds-spacing-md);
}

.mds-glass-card--light {
  background: var(--mds-color-background-glass-light);
  box-shadow: var(--mds-spacing-shadow-glass-light);
}

.mds-glass-card--dark {
  background: var(--mds-color-background-glass-dark);
  border: 1px solid var(--mds-color-border-light);
  box-shadow: var(--mds-spacing-shadow-glass-dark);
}

.mds-glass-card:hover {
  transform: var(--mds-effects-transform-hoverUp);
}

.mds-glass-card--light:hover {
  box-shadow: var(--mds-spacing-shadow-glass-lightHover);
}

.mds-glass-card--dark:hover {
  box-shadow: var(--mds-spacing-shadow-glass-darkHover);
  border-color: var(--mds-color-border-medium);
}

/* Typography Classes */
.mds-text {
  font-family: var(--mds-typography-fontFamily-brand);
  color: var(--mds-color-text-primary);
}

.mds-text--brand {
  font-size: var(--mds-typography-fontSize-4xl);
  line-height: var(--mds-typography-lineHeight-tight);
  letter-spacing: var(--mds-typography-letterSpacing-brand);
  font-weight: var(--mds-typography-fontWeight-normal);
}

@media (max-width: 768px) {
  .mds-text--brand {
    font-size: 1.8rem;
    letter-spacing: var(--mds-typography-letterSpacing-tight);
  }
}