/* ================================================================
   Material Design 3 — tokens usando a paleta --dash-* do painel
   Para uso com @material/web (Material Web Components)
   ================================================================ */

.dash-layout {
  /* Cores principais M3 → nossa paleta */
  --md-sys-color-primary: var(--dash-accent);
  --md-sys-color-on-primary: #fff;
  --md-sys-color-primary-container: var(--dash-accent-bg);
  --md-sys-color-on-primary-container: var(--dash-accent);
  --md-sys-color-secondary: var(--dash-text-soft);
  --md-sys-color-on-secondary: var(--dash-surface);
  --md-sys-color-outline: var(--dash-border);
  --md-sys-color-outline-variant: var(--dash-border);
  --md-sys-color-surface: var(--dash-surface);
  --md-sys-color-on-surface: var(--dash-text);
  --md-sys-color-on-surface-variant: var(--dash-text-soft);
  --md-sys-color-surface-container-low: var(--dash-bg);
  --md-sys-color-surface-container: var(--dash-surface);
  --md-sys-color-surface-container-high: var(--dash-surface);
  --md-sys-color-error: var(--dash-danger);
  --md-sys-color-on-error: #fff;
  --md-sys-color-shadow: rgba(0, 0, 0, 0.15);
  --md-sys-color-scrim: rgba(0, 0, 0, 0.32);
  /* Shape M3 */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
  /* Tipografia */
  --md-sys-typescale-label-large-font: 'Roboto', system-ui, sans-serif;
  --md-sys-typescale-body-large-font: 'Roboto', system-ui, sans-serif;
  --md-sys-typescale-body-medium-font: 'Roboto', system-ui, sans-serif;
  --md-sys-typescale-title-large-font: 'Roboto', system-ui, sans-serif;
  --md-sys-typescale-headline-small-font: 'Roboto', system-ui, sans-serif;
}

/* Botões Material usam nossa primary */
.dash-layout md-filled-button,
.dash-layout md-filled-tonal-button,
.dash-layout md-elevated-button {
  --md-filled-button-container-color: var(--dash-accent);
  --md-filled-button-label-text-color: #fff;
  --md-filled-tonal-button-container-color: var(--dash-accent-bg);
  --md-filled-tonal-button-label-text-color: var(--dash-accent);
  --md-elevated-button-container-color: var(--dash-surface);
  --md-elevated-button-label-text-color: var(--dash-text);
}
.dash-layout md-outlined-button,
.dash-layout md-text-button {
  --md-outlined-button-outline-color: var(--dash-border);
  --md-outlined-button-label-text-color: var(--dash-accent);
  --md-text-button-label-text-color: var(--dash-accent);
}

/* Campos de texto e dialogs */
.dash-layout md-outlined-text-field {
  --md-outlined-text-field-outline-color: var(--dash-border);
  --md-outlined-text-field-label-text-color: var(--dash-text-muted);
  --md-outlined-text-field-input-text-color: var(--dash-text);
  --md-outlined-text-field-focus-outline-color: var(--dash-accent);
  --md-outlined-text-field-hover-outline-color: var(--dash-text-soft);
}
.dash-layout md-dialog {
  --md-dialog-container-color: var(--dash-surface);
  --md-dialog-headline-color: var(--dash-text);
  --md-dialog-supporting-text-color: var(--dash-text-soft);
}