/*
 * Criamor — design tokens (v1)
 * Fonte: canvas de design (docs/design/canvas/Main.dc.html).
 * Copiar para wwwroot/css/ quando o projeto ASP.NET Core for criado.
 *
 * Fontes (Google Fonts):
 * <link rel="preconnect" href="https://fonts.googleapis.com">
 * <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 * <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Young+Serif&family=Karla:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap">
 */

:root {
  /* Fundos */
  --cm-bg: #FFFAFB;              /* fundo principal (rosa quase branco) */
  --cm-bg-2: #FCF0F3;            /* secções, banners de categoria */
  --cm-surface: #FFFFFF;         /* cartões, painéis, campos */
  --cm-bg-sky: #E4EEF9;          /* bloco da newsletter */
  --cm-bg-mint: #DDF3EC;         /* rodapé */
  --cm-topbar: #F4A6B8;          /* barra de anúncio no topo */

  /* Texto */
  --cm-text: #2D2240;            /* ameixa — texto e botões escuros */
  --cm-text-2: #5E5470;          /* texto secundário (6,7:1) */
  --cm-text-3: #4A3F5C;          /* texto corrido em blocos */
  --cm-text-disabled: #6F6585;

  /* Linhas */
  --cm-line: #F3DCE2;
  --cm-line-field: #E6C9D1;      /* bordas de campos e botões secundários */

  /* Marca */
  --cm-primary: #C9402A;         /* coral — ações principais; branco por cima = 4,9:1 */
  --cm-primary-hover: #A93420;
  --cm-link: #A93420;
  --cm-link-hover: #7E2414;
  --cm-accent: #F5B700;          /* mostarda — só decoração (não usar como texto) */
  --cm-teal: #2E9C8A;            /* verde-água — decoração */
  --cm-teal-text: #1F7A6C;       /* verde-água para texto/interruptores */
  --cm-pink: #F4A6B8;
  --cm-lilac: #B9A6F0;
  --cm-danger: #A23B2C;

  /* Estados de encomenda (fundo / texto) */
  --cm-status-pending-bg: #F6E7C8;    --cm-status-pending: #6E4B0E;
  --cm-status-paid-bg: #E3EBF5;       --cm-status-paid: #2F4E74;
  --cm-status-preparing-bg: #EDE7F6;  --cm-status-preparing: #4A3F5C;
  --cm-status-shipped-bg: #E5E9DF;    --cm-status-shipped: #475839;
  --cm-status-delivered-bg: #DCE8D6;  --cm-status-delivered: #2F5A2B;
  --cm-status-cancelled-bg: #F3DEDA;  --cm-status-cancelled: #8A2E22;
  --cm-status-refunded-bg: #ECE4EF;   --cm-status-refunded: #5B3E6B;

  /* Backoffice */
  --cm-admin-bg: #FDF7F8;
  --cm-admin-sidebar: #2D2240;
  --cm-admin-sidebar-active: #45386A;
  --cm-admin-sidebar-text: #F3DCE2;
  --cm-admin-accent: #FF8A6B;

  /* Tipografia */
  --cm-font-display: "Young Serif", Georgia, serif;
  --cm-font-body: "Karla", system-ui, sans-serif;
  --cm-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --cm-fs-display: clamp(2.6rem, 5vw, 4.25rem);
  --cm-fs-h1: clamp(2.2rem, 4vw, 3.2rem);
  --cm-fs-h2: clamp(1.8rem, 3vw, 2.6rem);
  --cm-fs-h3: 1.375rem;
  --cm-fs-lead: 1.125rem;
  --cm-fs-body: 1rem;
  --cm-fs-small: 0.875rem;
  --cm-fs-label: 0.75rem;       /* maiúsculas, letter-spacing .12em */

  /* Espaço (base 4) */
  --cm-space-1: 4px;  --cm-space-2: 8px;  --cm-space-3: 12px; --cm-space-4: 16px;
  --cm-space-6: 24px; --cm-space-8: 32px; --cm-space-12: 48px; --cm-space-16: 64px; --cm-space-24: 96px;
  --cm-container: 1280px;
  --cm-gutter: 32px;

  /* Cantos */
  --cm-radius-field: 6px;
  --cm-radius-btn: 8px;
  --cm-radius-card: 12px;
  --cm-radius-panel: 16px;
  --cm-radius-pill: 999px;

  /* Sombras */
  --cm-shadow-sm: 0 1px 2px rgba(45, 34, 64, .08);
  --cm-shadow-md: 0 8px 24px rgba(45, 34, 64, .10);
  --cm-shadow-lg: 0 24px 60px rgba(45, 34, 64, .16);

  /* Movimento */
  --cm-ease: cubic-bezier(.2, .7, .2, 1);
  --cm-dur-fast: 200ms;          /* botões, bordas */
  --cm-dur-img: 600ms;           /* zoom/troca de imagem no hover */

  /* Toque */
  --cm-hit: 44px;                /* alvo mínimo de toque */
  --cm-swatch: 48px;             /* seletor de cor no produto */
  --cm-swatch-dot: 16px;         /* pontos de cor no cartão */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cm-bg: #1C1530;
    --cm-bg-2: #2A2140;
    --cm-surface: #2A2140;
    --cm-text: #FFF3E3;
    --cm-text-2: #C9BEDD;
    --cm-line: #45386A;
    --cm-primary: #FF8A6B;       /* texto escuro por cima */
  }
}

/* Base */
body {
  margin: 0;
  background: var(--cm-bg);
  color: var(--cm-text);
  font-family: var(--cm-font-body);
  font-size: var(--cm-fs-body);
  line-height: 1.6;
}
h1, h2, h3 { font-family: var(--cm-font-display); font-weight: 400; line-height: 1.1; }
a { color: var(--cm-link); }
a:hover { color: var(--cm-link-hover); }
:focus-visible { outline: 2px solid var(--cm-text); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* Amostra de cor (variante) — ver docs/design/README.md § Variante de cor */
.cm-swatch {
  width: var(--cm-swatch); height: var(--cm-swatch);
  padding: 0; border-radius: 50%;
  border: 2px solid transparent; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color var(--cm-dur-fast) var(--cm-ease);
}
.cm-swatch[aria-checked="true"] { border-color: var(--cm-text); }
.cm-swatch > span {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--swatch);                    /* style="--swatch: linear-gradient(...)" */
  box-shadow: inset 0 0 0 1px rgba(45, 34, 64, .12);
}
.cm-swatch[aria-disabled="true"] > span { opacity: .45; }