/*
 * Estilos do design system. Tudo usa os nomes por função de tokens.css.
 * Camadas: base (foco global) e components (ui-*), para que os utilitários do app sobrescrevam.
 * Dois temas com os mesmos nomes de token (claro e escuro, tokens.css); nenhuma regra aqui
 * depende do tema, exceto o ícone do ThemeToggle.
 * Brilho e gradiente só pelos tokens (--shadow-glow, --gradient-accent) e só no palco do 3D: nenhum
 * componente daqui usa. Sombra colorida, gradiente e ícone em tudo são sinais de "feito por IA"
 * (ux-ui/28); a elevação vem da superfície e da imagem.
 * Movimento só com `html[data-movimento="ligado"]` (padrão: sem prefers-reduced-motion; o interruptor sobrescreve) (D-UX-VIS-14).
 */
@import "./tokens.css";

@layer base {
  :focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: var(--focus-ring-offset);
  }
}

@layer components {
  .ui-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Botão ---------------------------------------------------------------- */
  .ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--target-min);
    min-width: var(--target-min);
    padding: 0 var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }
  :where(html[data-movimento="ligado"]) .ui-button {
    transition:
      background-color 150ms ease-out,
      border-color 150ms ease-out;
  }

  .ui-button > svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  /* O CTA é plano: a cor e a posição bastam (sem brilho, ux-ui/28 D-UX-PRO-03). */
  .ui-button--primary {
    background-color: var(--color-accent);
    color: var(--color-on-accent);
  }

  .ui-button--primary:hover {
    background-color: var(--color-accent-hover);
    color: var(--color-on-accent);
  }

  /* Transparente: assume a superfície em que está (fundo, cartão ou painel). */
  .ui-button--secondary {
    background-color: transparent;
    border-color: var(--color-border-control);
    color: var(--color-fg);
  }

  .ui-button--secondary:hover {
    background-color: var(--color-surface-2);
    border-color: var(--color-fg-muted);
    color: var(--color-fg);
  }

  .ui-button--tertiary {
    padding: 0 var(--space-2);
    background-color: transparent;
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .ui-button--tertiary:hover {
    color: var(--color-accent-hover);
    text-decoration-thickness: 2px;
  }

  /* CTA de cartão grande ("Ver kit", "Montar meu PC"): 56 px, texto maior e mais respiro lateral. */
  .ui-button--lg {
    min-height: 3.5rem;
    padding: 0 var(--space-6);
    font-size: var(--text-lg);
  }

  /* Interruptor (checkbox nativo): ligado = cor do acento. */
  .ui-switch {
    position: relative;
    flex: none;
    width: 3rem;
    height: 2rem;
    margin: 0;
    appearance: none;
    border: 1px solid var(--color-border-control);
    border-radius: 999px;
    background-color: var(--color-surface-2);
    cursor: pointer;
  }

  .ui-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background-color: var(--color-fg-muted);
  }

  .ui-switch:checked {
    border-color: var(--color-accent);
    background-color: var(--color-accent);
  }

  .ui-switch:checked::after {
    left: calc(100% - 3px - 1.375rem);
    background-color: var(--color-on-accent);
  }
  :where(html[data-movimento="ligado"]) .ui-switch::after {
    transition: left 140ms ease;
  }

  /* Botão só de ícone (setas e pausa): 44 x 44, redondo, sempre o mesmo tamanho. */
  .ui-icon-button {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--target-min);
    height: var(--target-min);
    padding: 0;
    border: 1px solid var(--color-border-control);
    border-radius: 50%;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-md);
    color: var(--color-fg);
    font: inherit;
    cursor: pointer;
  }

  .ui-icon-button:hover {
    background-color: var(--color-surface-2);
  }

  .ui-icon-button:disabled {
    opacity: 0.4;
    box-shadow: none;
    cursor: default;
  }

  .ui-icon-button > svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  /* Dois botões de texto lado a lado: colunas iguais por construção. */
  .ui-button-par {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }

  .ui-button-par > .ui-button {
    min-width: 0;
    padding-inline: var(--space-2);
  }

  /* Ocupado: sem clique duplo, sem perder o contraste nem o foco. */
  .ui-button[aria-busy="true"] {
    cursor: progress;
  }

  .ui-button__spinner {
    opacity: 0;
    animation: ui-appear 1ms linear 400ms forwards;
  }
  :where(html[data-movimento="ligado"]) .ui-button__spinner {
    animation:
      ui-appear 1ms linear 400ms forwards,
      ui-spin 1s linear infinite;
  }

  /* Campo ---------------------------------------------------------------- */
  .ui-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .ui-field__label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-fg);
  }

  .ui-field__description {
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
  }

  .ui-field__error {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-danger);
  }

  .ui-input {
    width: 100%;
    min-height: var(--target-min);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-family: inherit;
    /* 16 px evita o zoom automático do Safari no iOS. */
    font-size: var(--text-base);
    line-height: var(--leading-base);
  }

  .ui-input::placeholder {
    color: var(--color-fg-muted);
    opacity: 1;
  }

  .ui-input:hover {
    border-color: var(--color-fg-muted);
  }

  .ui-input[aria-invalid="true"] {
    border-color: var(--color-danger);
    box-shadow: inset 0 0 0 1px var(--color-danger);
  }

  /* Estado (badge) --------------------------------------------------------- */
  .ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-1) 10px;
    border-radius: var(--radius-pill);
    background-color: var(--color-bg-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-tight);
  }

  .ui-badge__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .ui-badge--success {
    color: var(--color-success);
  }

  .ui-badge--warning {
    color: var(--color-warning);
  }

  .ui-badge--danger {
    color: var(--color-danger);
  }

  .ui-badge--info {
    color: var(--color-info);
  }

  .ui-badge--pending {
    color: var(--color-pending);
  }

  /* Cartão: painel elevado (no escuro, mais claro que o fundo). -------------- */
  .ui-card {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    color: var(--color-fg);
  }

  /* Canvas: fundo quadriculado de planta técnica, para vitrine e área de montagem. */
  .ui-canvas {
    background-color: var(--color-bg);
    background-image:
      linear-gradient(var(--color-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
  }

  /* Navegação principal: aba de texto, como o menu de departamentos de uma loja (ux-ui/28). */
  .ui-nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--target-min);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: var(--color-fg);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-tight);
    text-decoration: none;
    white-space: nowrap;
  }

  /* Ícone opcional e discreto: a navegação é texto (ux-ui/28 D-UX-PRO-04). */
  .ui-nav-link > svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-fg-muted);
  }

  .ui-nav-link:hover {
    background-color: var(--color-surface-2);
    color: var(--color-fg);
  }

  /* Página atual: barra de acento embaixo + peso (não só cor, WCAG 1.4.1). */
  .ui-nav-link[aria-current="page"] {
    box-shadow: inset 0 -3px 0 var(--color-accent);
    font-weight: var(--font-weight-semibold);
  }

  /* Sem sombra no modo de alto contraste: o sublinhado mostra a página atual. */
  @media (forced-colors: active) {
    .ui-nav-link[aria-current="page"] {
      text-decoration: underline 3px;
      text-underline-offset: 6px;
    }
  }

  /* Atalho em pílula (categoria, exemplo, filtro rápido). ------------------ */
  .ui-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--target-min);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    color: var(--color-fg);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-tight);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }

  .ui-chip > svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-accent);
  }

  .ui-chip:hover {
    border-color: var(--color-border-control);
    background-color: var(--color-surface-2);
    color: var(--color-fg);
  }

  .ui-chip[aria-current="page"],
  .ui-chip[aria-pressed="true"] {
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
    background-color: var(--color-surface-2);
  }
  :where(html[data-movimento="ligado"]) .ui-nav-link,
  :where(html[data-movimento="ligado"]) .ui-chip {
    transition:
      background-color 150ms ease-out,
      border-color 150ms ease-out;
  }

  /* Cabeçalho de seção: título + apoio à esquerda, "Ver todos" à direita. -- */
  .ui-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
  }

  .ui-section-header__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-width: 65ch;
  }

  .ui-section-header__title {
    margin: 0;
    font-size: var(--text-xl);
  }

  .ui-section-header__description {
    margin: 0;
    color: var(--color-fg-muted);
  }

  .ui-section-header__action {
    display: flex;
    align-items: center;
    min-height: var(--target-min);
  }

  /* Skeleton: invisível nos primeiros 400 ms; pulso suave só sem reduced motion. */
  .ui-skeleton {
    display: block;
    min-height: 1em;
    border-radius: var(--radius-sm);
    background-color: var(--color-border);
    opacity: 0;
    animation: ui-appear 1ms linear 400ms forwards;
  }
  :where(html[data-movimento="ligado"]) .ui-skeleton {
    animation:
      ui-appear 1ms linear 400ms forwards,
      ui-pulse 1.6s ease-in-out 400ms infinite;
  }

  /* Alternância de tema ---------------------------------------------------- */
  .ui-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--target-min);
    min-height: var(--target-min);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--color-fg);
    cursor: pointer;
  }

  .ui-theme-toggle:hover {
    background-color: var(--color-surface-2);
  }
  :where(html[data-movimento="ligado"]) .ui-theme-toggle {
    transition: background-color 150ms ease-out;
  }

  .ui-theme-toggle > svg {
    width: 20px;
    height: 20px;
  }

  /* O ícone mostra o tema em uso, pelas mesmas regras de tokens.css: certo já no HTML. */
  .ui-theme-toggle__lua {
    display: none;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="claro"]) .ui-theme-toggle__sol {
      display: none;
    }

    :root:not([data-theme="claro"]) .ui-theme-toggle__lua {
      display: block;
    }
  }

  :root[data-theme="escuro"] .ui-theme-toggle__sol {
    display: none;
  }

  :root[data-theme="escuro"] .ui-theme-toggle__lua {
    display: block;
  }

  /* Logo: símbolo e pingo na cor da marca, letras na cor do texto; "mono" usa currentColor. */
  .ui-logo {
    display: block;
    height: 1em;
    width: auto;
  }

  .ui-logo__acento {
    fill: var(--color-accent);
  }

  .ui-logo__texto {
    fill: var(--color-fg);
  }

  .ui-logo--mono .ui-logo__acento,
  .ui-logo--mono .ui-logo__texto {
    fill: currentColor;
  }

  /* Vitrine (tile): o link inteiro com imagem, título curto e o verbo (ux-ui/28). ---------- */
  .ui-tile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-fg);
    text-decoration: none;
  }

  .ui-tile:hover {
    border-color: var(--color-border-control);
    box-shadow: var(--shadow-md);
    color: var(--color-fg);
  }
  :where(html[data-movimento="ligado"]) .ui-tile {
    transition:
      border-color 150ms ease-out,
      box-shadow 150ms ease-out;
  }

  /* A imagem tem proporção fixa: todos os tiles de uma fileira ficam do mesmo tamanho. */
  .ui-tile__media {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: var(--color-surface-2);
    object-fit: cover;
  }

  /* Larga (2:1): as 3 portas da home, para caberem acima da dobra a 1366 × 768 (ux-ui/28). */
  .ui-tile--wide .ui-tile__media {
    aspect-ratio: 2 / 1;
  }

  .ui-tile__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
  }

  .ui-tile__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
  }

  .ui-tile__meta {
    margin: 0;
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
  }

  /* O verbo ("Ver PCs prontos", "Fazer o quiz") fica embaixo, alinhado entre os tiles. */
  .ui-tile__action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: auto;
    padding-top: var(--space-3);
    color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
  }

  .ui-tile:hover .ui-tile__action {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Preço: reais grandes, centavos sobrescritos (leitura rápida de vitrine). ------------------ */
  .ui-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .ui-price__amount {
    display: inline-flex;
    align-items: flex-start;
    gap: 2px;
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .ui-price--sm .ui-price__amount {
    font-size: var(--text-xl);
  }

  .ui-price__currency,
  .ui-price__cents {
    font-size: 0.5em;
    line-height: 1.2;
  }

  .ui-price__currency {
    margin-right: 2px;
  }

  .ui-price__note {
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
  }

  .ui-price__installments {
    color: var(--color-fg);
    font-size: var(--text-sm);
  }

  /* Avaliação: estrelas neutras (o acento é da ação), média, total e origem. ---------------- */
  .ui-rating {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin: 0;
    font-size: var(--text-sm);
  }

  .ui-rating__stars {
    display: inline-flex;
    gap: 1px;
  }

  .ui-rating__stars > svg {
    width: 16px;
    height: 16px;
  }

  .ui-rating__on {
    fill: var(--color-fg);
  }

  .ui-rating__off {
    fill: var(--color-border-control);
  }

  .ui-rating__value {
    font-weight: var(--font-weight-semibold);
  }

  .ui-rating__count {
    color: var(--color-fg-muted);
  }

  .ui-rating__demo {
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-sm);
    color: var(--color-fg-muted);
    font-size: var(--text-xs);
    line-height: 20px;
  }

  @keyframes ui-appear {
    to {
      opacity: 1;
    }
  }

  @keyframes ui-pulse {
    50% {
      background-color: var(--color-bg-muted);
    }
  }

  @keyframes ui-spin {
    to {
      rotate: 360deg;
    }
  }
}