/*
 * Marcelo Muu - Licoraria | Padrao visual do MVP | v1.0 | 2026-10-10
 * Modelo A: claro e acolhedor. Tema claro.
 * Arquivo de tokens, independente de framework. Nao implementa componentes.
 * Ler Marcelo-Muu-Licoraria-padrao-visual-MVP.md antes de integrar.
 * O consumidor deve aplicar os tokens a componentes semanticos acessiveis.
 * Nao ha import remoto, fonte incorporada, reset global ou seletores de UI.
 */
:root {
  /* Cores aprovadas do Modelo A */
  --mm-color-bg: #FFF7FA;
  --mm-color-surface: #FFFFFF;
  --mm-color-text: #1B1717;
  --mm-color-brand: #FBA0BD;
  --mm-color-primary: #A8325F;
  --mm-color-border: #E8DFE3;

  /* Extensoes tecnicas deste padrao */
  --mm-color-text-muted: #62565C;
  --mm-color-surface-subtle: #FFF0F5;
  --mm-color-surface-hover: #FCE8EF;
  --mm-color-selected-bg: #FFE3ED;
  --mm-color-control-border: #8E7B83;
  --mm-color-primary-hover: #91264F;
  --mm-color-primary-active: #792040;
  --mm-color-on-primary: #FFFFFF;
  --mm-color-on-brand: #1B1717;
  --mm-color-link: #A8325F;
  --mm-color-link-hover: #91264F;
  --mm-color-focus: #A8325F;
  --mm-color-focus-gap: #FFFFFF;
  --mm-color-disabled-bg: #F2EEF0;
  --mm-color-disabled-text: #68616A;
  --mm-color-disabled-border: #E8DFE3;

  /* Semantica: sempre combinar cor com texto */
  --mm-color-success: #176542;
  --mm-color-success-bg: #EAF6EE;
  --mm-color-warning: #805000;
  --mm-color-warning-bg: #FFF4D6;
  --mm-color-danger: #B42332;
  --mm-color-danger-bg: #FDECEE;
  --mm-color-danger-hover: #961C29;
  --mm-color-danger-active: #7C1722;
  --mm-color-info: #225B8A;
  --mm-color-info-bg: #EAF3FA;
  --mm-color-neutral: #51484E;
  --mm-color-neutral-bg: #F1EDF0;
  --mm-color-scrim: rgb(27 23 23 / 40%);

  /* Tipografia: carregar Open Sans separadamente, com font-display: swap */
  --mm-font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mm-font-family-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --mm-font-weight-regular: 400;
  --mm-font-weight-semibold: 600;
  --mm-font-weight-bold: 700;
  --mm-font-size-xs: 0.75rem;
  --mm-font-size-sm: 0.875rem;
  --mm-font-size-md: 1rem;
  --mm-font-size-lg: 1.25rem;
  --mm-font-size-xl: 1.5rem;
  --mm-font-size-2xl: 1.75rem;
  --mm-font-size-3xl: 2rem;
  --mm-line-height-xs: 1.5;
  --mm-line-height-sm: 1.428571;
  --mm-line-height-md: 1.5;
  --mm-line-height-lg: 1.4;
  --mm-line-height-xl: 1.333333;
  --mm-line-height-2xl: 1.285714;
  --mm-line-height-3xl: 1.25;
  --mm-letter-spacing-body: 0;
  --mm-letter-spacing-heading: -0.015em;

  /* Escala de espaco: 4 px com base de 16 px, excecao de 2 px para microajustes */
  --mm-space-0: 0;
  --mm-space-0-5: 0.125rem;
  --mm-space-1: 0.25rem;
  --mm-space-2: 0.5rem;
  --mm-space-3: 0.75rem;
  --mm-space-4: 1rem;
  --mm-space-5: 1.25rem;
  --mm-space-6: 1.5rem;
  --mm-space-8: 2rem;
  --mm-space-10: 2.5rem;
  --mm-space-12: 3rem;
  --mm-space-16: 4rem;
  --mm-space-20: 5rem;
  --mm-space-24: 6rem;

  /* Forma e elevacao */
  --mm-radius-control: 0.5rem;
  --mm-radius-card: 0.75rem;
  --mm-radius-overlay: 0.75rem;
  --mm-radius-pill: 999px;
  --mm-border-width: 1px;
  --mm-border-width-strong: 2px;
  --mm-shadow-card: none;
  --mm-shadow-popover: 0 4px 16px rgb(27 23 23 / 10%);
  --mm-shadow-dialog: 0 12px 40px rgb(27 23 23 / 16%);
  --mm-focus-width: 3px;
  --mm-focus-offset: 2px;
  --mm-focus-gap-width: 2px;

  /* Controles: min-height, nunca altura fixa que corte texto ampliado */
  --mm-control-min-height: 2.75rem;
  --mm-control-large-min-height: 3rem;
  --mm-control-padding-inline: 1rem;
  --mm-control-gap: 0.5rem;
  --mm-touch-target-min: 2.75rem;
  --mm-checkbox-size: 1.25rem;
  --mm-icon-sm: 1rem;
  --mm-icon-md: 1.25rem;
  --mm-icon-lg: 1.5rem;
  --mm-icon-stroke-width: 2;
  --mm-table-row-min-height: 3rem;
  --mm-table-cell-padding-block: 0.75rem;
  --mm-table-cell-padding-inline: 1rem;
  --mm-badge-padding-block: 0.25rem;
  --mm-badge-padding-inline: 0.5rem;

  /* Layout mobile-first */
  --mm-header-min-height: 3.5rem;
  --mm-sidebar-width: 16rem;
  --mm-drawer-width: 18rem;
  --mm-content-max-width: 80rem;
  --mm-page-padding: 1rem;
  --mm-grid-gap: 1rem;
  --mm-card-padding: 1rem;
  --mm-page-title-size: 1.5rem;
  --mm-page-title-line-height: 1.333333;
  --mm-login-title-size: 1.75rem;
  --mm-login-title-line-height: 1.285714;
  --mm-login-form-max-width: 26.25rem;
  --mm-login-brand-max-width: 17.5rem;
  --mm-dialog-max-width: 35rem;
  --mm-dialog-page-inset: 1rem;

  /* Movimento discreto */
  --mm-duration-fast: 120ms;
  --mm-duration-normal: 180ms;
  --mm-duration-slow: 240ms;
  --mm-duration-spinner: 800ms;
  --mm-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Camadas: respeitar o contexto de empilhamento da aplicacao */
  --mm-z-base: 0;
  --mm-z-header: 20;
  --mm-z-dropdown: 30;
  --mm-z-scrim: 40;
  --mm-z-dialog: 50;
  --mm-z-toast: 60;
  --mm-z-tooltip: 70;
}

/* 37.5em = 600px com tamanho inicial de fonte de 16px.
 * Custom properties nao funcionam como limiares em media queries.
 */
@media (min-width: 37.5em) {
  :root {
    --mm-page-padding: 1.5rem;
    --mm-grid-gap: 1.5rem;
    --mm-card-padding: 1.5rem;
  }
}

/* 64em = 1024px: sidebar persistente e login em duas colunas */
@media (min-width: 64em) {
  :root {
    --mm-header-min-height: 4rem;
    --mm-page-padding: 2rem;
    --mm-page-title-size: 1.75rem;
    --mm-page-title-line-height: 1.285714;
    --mm-login-title-size: 2rem;
    --mm-login-title-line-height: 1.25;
  }
}

/* 90em = 1440px: maior respiro, sem esticar conteudo alem de 80rem */
@media (min-width: 90em) {
  :root {
    --mm-page-padding: 2.5rem;
  }
}

/* O consumidor tambem deve interromper animacoes e usar rolagem nao animada. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mm-duration-fast: 0ms;
    --mm-duration-normal: 0ms;
    --mm-duration-slow: 0ms;
    --mm-duration-spinner: 0ms;
  }
}