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

Sistema de design unificado para a plataforma Metropolle

:root {
  /* Metropolle Design System Tokens */

  /* COLORS */
  --mds-colors-color-meridian-bg: #FCFCFD;
  --mds-colors-color-meridian-panel: #FFFFFF;
  --mds-colors-color-meridian-glass: #FFFFFF;
  --mds-colors-color-meridian-glass2: #FFFFFF;
  --mds-colors-color-meridian-field: #F1F2F5;
  --mds-colors-color-meridian-ink: #17171C;
  --mds-colors-color-meridian-ink-dim: rgba(0,0,0,.58);
  --mds-colors-color-meridian-ink-faint: rgba(0,0,0,.40);
  --mds-colors-color-meridian-ink-rgb: 23,23,28;
  --mds-colors-color-meridian-accent: #17171C;
  --mds-colors-color-meridian-accent-2: #3A3A42;
  --mds-colors-color-meridian-accent-soft: rgba(0,0,0,.05);
  --mds-colors-color-meridian-on-accent: #FFFFFF;
  --mds-colors-color-meridian-stroke: rgba(0,0,0,.12);
  --mds-colors-color-meridian-stroke-2: rgba(0,0,0,.18);
  --mds-colors-color-meridian-ok: #1a7f4b;
  --mds-colors-color-meridian-info: #2563eb;
  --mds-colors-color-meridian-warn: #9a6b00;
  --mds-colors-color-meridian-bad: #b42318;
  --mds-colors-color-meridian-gold: #f5a623;
  --mds-colors-color-meridian-dark-bg: #0B0B0D;
  --mds-colors-color-meridian-dark-panel: #161619;
  --mds-colors-color-meridian-dark-glass: #1C1C20;
  --mds-colors-color-meridian-dark-glass2: #161619;
  --mds-colors-color-meridian-dark-field: #202024;
  --mds-colors-color-meridian-dark-ink: #F2F0EC;
  --mds-colors-color-meridian-dark-ink-dim: rgba(255,255,255,.60);
  --mds-colors-color-meridian-dark-ink-faint: rgba(255,255,255,.42);
  --mds-colors-color-meridian-dark-ink-rgb: 242,240,236;
  --mds-colors-color-meridian-dark-accent: #F2F0EC;
  --mds-colors-color-meridian-dark-accent-2: #C8C8CC;
  --mds-colors-color-meridian-dark-accent-soft: rgba(255,255,255,.07);
  --mds-colors-color-meridian-dark-on-accent: #0B0B0D;
  --mds-colors-color-meridian-dark-stroke: rgba(255,255,255,.12);
  --mds-colors-color-meridian-dark-stroke-2: rgba(255,255,255,.20);
  --mds-colors-color-meridian-dark-gold: #fbbf24;
  --mds-colors-color-brand-primary-default: #0055FF;
  --mds-colors-color-brand-primary-hover: #0044CC;
  --mds-colors-color-brand-primary-active: #003399;
  --mds-colors-color-brand-primary-disabled: #80AAFF;
  --mds-colors-color-brand-secondary-default: #FF9900;
  --mds-colors-color-brand-secondary-hover: #E68A00;
  --mds-colors-color-brand-secondary-active: #CC7A00;
  --mds-colors-color-brand-secondary-disabled: #FFCC80;
  --mds-colors-color-brand-neutral: #333333;
  --mds-colors-color-semantic-success-default: #1a7f4b;
  --mds-colors-color-semantic-success-light: #D1FAE5;
  --mds-colors-color-semantic-success-dark: #065F46;
  --mds-colors-color-semantic-warning-default: #9a6b00;
  --mds-colors-color-semantic-warning-light: #FEF3C7;
  --mds-colors-color-semantic-warning-dark: #92400E;
  --mds-colors-color-semantic-error-default: #b42318;
  --mds-colors-color-semantic-error-light: #FEE2E2;
  --mds-colors-color-semantic-error-dark: #991B1B;
  --mds-colors-color-semantic-info-default: #2563eb;
  --mds-colors-color-semantic-info-light: #DBEAFE;
  --mds-colors-color-semantic-info-dark: #1E40AF;
  --mds-colors-color-background-primary: #FCFCFD;
  --mds-colors-color-background-secondary: rgba(0, 0, 0, 0.05);
  --mds-colors-color-background-glass-light: #FFFFFF;
  --mds-colors-color-background-glass-dark: #1C1C20;
  --mds-colors-color-text-primary: #17171C;
  --mds-colors-color-text-secondary: rgba(0, 0, 0, 0.58);
  --mds-colors-color-text-muted: rgba(0, 0, 0, 0.40);
  --mds-colors-color-border-light: rgba(0, 0, 0, 0.12);
  --mds-colors-color-border-medium: rgba(0, 0, 0, 0.18);
  --mds-colors-color-border-strong: rgba(0, 0, 0, 0.30);

  /* TYPOGRAPHY */
  --mds-typography-fontFamily-brand: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mds-typography-fontFamily-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mds-typography-fontFamily-aux: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mds-typography-fontFamily-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --mds-typography-fontFamily-ocr: 'OCR-B', 'OCR B Std', 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;
  --mds-spacing-borderRadius-sm: 2px;
  --mds-spacing-borderRadius-md: 4px;
  --mds-spacing-borderRadius-lg: 6px;
  --mds-spacing-borderRadius-xl: 8px;
  --mds-spacing-borderRadius-full: 50%;
  --mds-spacing-shadow-glass-light: 0 1px 3px rgba(0,0,0,.05), 0 16px 34px -18px rgba(0,0,0,.14);
  --mds-spacing-shadow-glass-lightHover: 0 1px 3px rgba(0,0,0,.07), 0 18px 38px -18px rgba(0,0,0,.18);
  --mds-spacing-shadow-glass-dark: 0 16px 36px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  --mds-spacing-shadow-glass-darkHover: 0 18px 40px -18px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.07);
  --mds-spacing-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --mds-spacing-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --mds-spacing-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --mds-spacing-shadow-card-default: 0 1px 3px rgba(0,0,0,.05), 0 16px 34px -18px rgba(0,0,0,.14);
  --mds-spacing-shadow-card-sm: 0 1px 2px rgba(0,0,0,.05), 0 6px 16px -12px rgba(0,0,0,.10);
  --mds-spacing-shadow-card-dark: 0 16px 36px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  --mds-spacing-shadow-card-darkSm: inset 0 1px 0 rgba(255,255,255,.04), 0 4px 14px -8px rgba(0,0,0,.7);
  --mds-spacing-blur-glass-default: 0px;
  --mds-spacing-blur-glass-light: 0px;
  --mds-spacing-blur-glass-heavy: 0px;

  /* EFFECTS */
  --mds-effects-transition-fast: 0.15s ease;
  --mds-effects-transition-normal: 0.3s ease;
  --mds-effects-transition-slow: 0.5s ease;
  --mds-effects-animation-fadeIn: fadeIn 0.3s ease-in-out;
  --mds-effects-animation-slideUp: slideUp 0.3s ease-out;
  --mds-effects-animation-bounce: bounce 0.6s ease-in-out;
  --mds-effects-backdrop-glass-filter: none;
  --mds-effects-backdrop-glass-webkitFilter: none;
  --mds-effects-transform-hoverUp: none;
  --mds-effects-transform-scale-hover: scale(1);
  --mds-effects-transform-scale-active: none;
  --mds-effects-shadow-card: 0 1px 3px rgba(0,0,0,.05), 0 16px 34px -18px rgba(0,0,0,.14);
  --mds-effects-shadow-cardSm: 0 1px 2px rgba(0,0,0,.05), 0 6px 16px -12px rgba(0,0,0,.10);
  --mds-effects-opacity-glass-light-default: 0.15;
  --mds-effects-opacity-glass-light-hover: 0.2;
  --mds-effects-opacity-glass-dark-default: 0.8;
  --mds-effects-opacity-glass-dark-hover: 0.85;
  --mds-effects-opacity-disabled: 0.5;
  --mds-effects-opacity-muted: 0.7;

}

/* Card Base Classes (Meridian flat — legacy "glass" names retained) */
.mds-glass-card {
  border-radius: var(--r, 2px);
  transition: var(--mds-effects-transition-normal);
  padding: var(--mds-spacing-md);
}

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

.mds-glass-card--dark {
  background: var(--glass);
  box-shadow: var(--card-shadow);
}

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

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

.mds-glass-card--dark:hover {
  box-shadow: var(--card-shadow);
}

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

.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);
  }
}

/* ===================== Meridian token aliases (light defaults) ===================== */
:root {
  --bg: var(--mds-colors-color-meridian-bg);
  --panel: var(--mds-colors-color-meridian-panel);
  --glass: var(--mds-colors-color-meridian-glass);
  --glass-2: var(--mds-colors-color-meridian-glass2);
  --field: var(--mds-colors-color-meridian-field);
  --ink: var(--mds-colors-color-meridian-ink);
  --ink-dim: var(--mds-colors-color-meridian-ink-dim);
  --ink-faint: var(--mds-colors-color-meridian-ink-faint);
  --ink-rgb: var(--mds-colors-color-meridian-ink-rgb);
  --accent: var(--mds-colors-color-meridian-accent);
  --accent-2: var(--mds-colors-color-meridian-accent-2);
  --accent-soft: var(--mds-colors-color-meridian-accent-soft);
  --on-accent: var(--mds-colors-color-meridian-on-accent);
  --stroke: var(--mds-colors-color-meridian-stroke);
  --stroke-2: var(--mds-colors-color-meridian-stroke-2);
  --ok: var(--mds-colors-color-meridian-ok);
  --info: var(--mds-colors-color-meridian-info);
  --warn: var(--mds-colors-color-meridian-warn);
  --bad: var(--mds-colors-color-meridian-bad);
  --gold: var(--mds-colors-color-meridian-gold);
  --sans: var(--mds-typography-fontFamily-sans);
  --aux: var(--mds-typography-fontFamily-aux);
  --mono: var(--mds-typography-fontFamily-mono);
  --ocr: var(--mds-typography-fontFamily-ocr);
  --blur: 0px;
  --r: var(--mds-spacing-borderRadius-xl);
  --r-sm: var(--mds-spacing-borderRadius-md);
  --card-shadow: var(--mds-spacing-shadow-card-default);
  --card-shadow-sm: var(--mds-spacing-shadow-card-sm);
}

/* ===================== Meridian DARK (html[data-theme="dark"]) ===================== */
html[data-theme="dark"] {
  --bg: var(--mds-colors-color-meridian-dark-bg);
  --panel: var(--mds-colors-color-meridian-dark-panel);
  --glass: var(--mds-colors-color-meridian-dark-glass);
  --glass-2: var(--mds-colors-color-meridian-dark-glass2);
  --field: var(--mds-colors-color-meridian-dark-field);
  --ink: var(--mds-colors-color-meridian-dark-ink);
  --ink-dim: var(--mds-colors-color-meridian-dark-ink-dim);
  --ink-faint: var(--mds-colors-color-meridian-dark-ink-faint);
  --ink-rgb: var(--mds-colors-color-meridian-dark-ink-rgb);
  --accent: var(--mds-colors-color-meridian-dark-accent);
  --accent-2: var(--mds-colors-color-meridian-dark-accent-2);
  --accent-soft: var(--mds-colors-color-meridian-dark-accent-soft);
  --on-accent: var(--mds-colors-color-meridian-dark-on-accent);
  --stroke: var(--mds-colors-color-meridian-dark-stroke);
  --stroke-2: var(--mds-colors-color-meridian-dark-stroke-2);
  --gold: var(--mds-colors-color-meridian-dark-gold);
  --card-shadow: var(--mds-spacing-shadow-card-dark);
  --card-shadow-sm: var(--mds-spacing-shadow-card-darkSm);
}