/* HMVIP UI central — Scaffold com CSS Layers
   Ordem: base → components → utilities
   Observação: manter tudo namespaced (.hmvip-*) e tokens em :root
*/

@layer base, components, utilities;

/* @layer base: tokens e theming */
@layer base {
  :root {
    /* ====== CORES SEMÂNTICAS (completas) ====== */
    --hmvip-color-bg: #ffffff;
    --hmvip-color-surface: #f8f9fb;
    --hmvip-color-surface-2: #eef2f7;
    --hmvip-color-text: #111827;
    --hmvip-color-text-muted: #4b5563;
    --hmvip-color-border: #e5e7eb;
    --hmvip-color-accent: #2563eb;     /* primary accent */
    --hmvip-color-on-accent: #ffffff;  /* text on accent */
    --hmvip-color-success: #16a34a;
    --hmvip-color-warn: #d97706;
    --hmvip-color-error: #dc2626;

    /* ====== PRIMITIVES (escala de cinza e accent) ====== */
    --hmvip-gray-50: #f9fafb;
    --hmvip-gray-100: #f3f4f6;
    --hmvip-gray-200: #e5e7eb;
    --hmvip-gray-300: #d1d5db;
    --hmvip-gray-400: #9ca3af;
    --hmvip-gray-500: #6b7280;
    --hmvip-gray-600: #4b5563;
    --hmvip-gray-700: #374151;
    --hmvip-gray-800: #1f2937;
    --hmvip-gray-900: #111827;

    --hmvip-accent-100: #dbeafe;
    --hmvip-accent-200: #bfdbfe;
    --hmvip-accent-300: #93c5fd;
    --hmvip-accent-400: #60a5fa;
    --hmvip-accent-500: #3b82f6;
    --hmvip-accent-600: #2563eb;
    --hmvip-accent-700: #1d4ed8;
    --hmvip-accent-800: #1e40af;
    --hmvip-accent-900: #1e3a8a;

    /* ====== TIPOGRAFIA ====== */
    --hmvip-font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --hmvip-font-weight-regular: 400;
    --hmvip-font-weight-medium: 500;
    --hmvip-font-weight-semibold: 600;
    --hmvip-font-size-xs: 0.75rem;   /* 12px */
    --hmvip-font-size-sm: 0.875rem;  /* 14px */
    --hmvip-font-size-md: 1rem;      /* 16px */
    --hmvip-font-size-lg: 1.125rem;  /* 18px */
    --hmvip-font-size-xl: 1.25rem;   /* 20px */
    --hmvip-font-size-2xl: 1.5rem;   /* 24px */
    --hmvip-line-height: 1.5;

    /* ====== ESPAÇAMENTOS (t-shirt, ampliado) ====== */
    --hmvip-space-2: 0.125rem;   /* 2px */
    --hmvip-space-4: 0.25rem;    /* 4px */
    --hmvip-space-6: 0.375rem;   /* 6px */
    --hmvip-space-8: 0.5rem;     /* 8px */
    --hmvip-space-12: 0.75rem;   /* 12px */
    --hmvip-space-16: 1rem;      /* 16px */
    --hmvip-space-20: 1.25rem;   /* 20px */
    --hmvip-space-24: 1.5rem;    /* 24px */
    --hmvip-space-32: 2rem;      /* 32px */
    --hmvip-space-40: 2.5rem;    /* 40px */
    --hmvip-space-48: 3rem;      /* 48px */
    --hmvip-space-64: 4rem;      /* 64px */

    /* Espaçamentos escalados por density (conveniência) */
    --hmvip-space-8-d: calc(var(--hmvip-space-8) * var(--hmvip-density-scale));
    --hmvip-space-12-d: calc(var(--hmvip-space-12) * var(--hmvip-density-scale));
    --hmvip-space-16-d: calc(var(--hmvip-space-16) * var(--hmvip-density-scale));
    --hmvip-space-24-d: calc(var(--hmvip-space-24) * var(--hmvip-density-scale));
    --hmvip-space-32-d: calc(var(--hmvip-space-32) * var(--hmvip-density-scale));

    /* ====== RADIUS e SOMBRAS ====== */
    --hmvip-radius-xs: 4px;
    --hmvip-radius-sm: 6px;
    --hmvip-radius-md: 10px;
    --hmvip-radius-lg: 14px;
    --hmvip-radius-full: 9999px;

    --hmvip-shadow-1: 0 1px 2px rgba(0,0,0,0.06);
    --hmvip-shadow-2: 0 6px 16px rgba(0,0,0,0.08);
    --hmvip-shadow-3: 0 18px 48px rgba(0,0,0,0.12);
    --hmvip-shadow-4: 0 30px 60px rgba(0,0,0,0.18);

    /* ====== Z-INDEX POLICY ====== */
    --hmvip-z-adornos: 0;
    --hmvip-z-bg: 1;
    --hmvip-z-overlay: 2;
    --hmvip-z-content: 3;
    --hmvip-z-actions: 4;
    --hmvip-z-sticky: 999;

    /* ====== MOTION ====== */
    --hmvip-ease-1: cubic-bezier(0.2, 0, 0, 1);
    --hmvip-ease-2: cubic-bezier(0.4, 0, 0.2, 1);
    --hmvip-dur-1: 120ms;
    --hmvip-dur-2: 240ms;
    --hmvip-dur-3: 360ms;

    /* ====== DENSITY ====== */
    --hmvip-density-scale: 1; /* 1 = comfortable; 0.9 = compact */
  }

  /* Theming LIGHT explícito (opcional) */
  [data-hmvip-theme="light"] {
    --hmvip-color-bg: #ffffff;
    --hmvip-color-surface: #f8f9fb;
    --hmvip-color-surface-2: #eef2f7;
    --hmvip-color-text: #111827;
    --hmvip-color-text-muted: #4b5563;
    --hmvip-color-border: #e5e7eb;
    --hmvip-color-accent: #2563eb;
    --hmvip-color-on-accent: #ffffff;
  }

  /* Theming DARK completo */
  [data-hmvip-theme="dark"] {
    --hmvip-color-bg: #0b1220;
    --hmvip-color-surface: #0f172a;
    --hmvip-color-surface-2: #111a2e;
    --hmvip-color-text: #e5e7eb;
    --hmvip-color-text-muted: #9ca3af;
    --hmvip-color-border: #1f2a3d;
    --hmvip-color-accent: #60a5fa;
    --hmvip-color-on-accent: #0b1220;

    /* Ajustes de sombras em dark (mais suaves para evitar halos) */
    --hmvip-shadow-1: 0 1px 2px rgba(0,0,0,0.4);
    --hmvip-shadow-2: 0 6px 16px rgba(0,0,0,0.5);
    --hmvip-shadow-3: 0 18px 48px rgba(0,0,0,0.55);
    --hmvip-shadow-4: 0 30px 60px rgba(0,0,0,0.6);
  }

  /* Fallback automático: se o atributo data-hmvip-theme não estiver presente, respeita prefers-color-scheme */
  @media (prefers-color-scheme: dark) {
    :root:not([data-hmvip-theme]) {
      --hmvip-color-bg: #0b1220;
      --hmvip-color-surface: #0f172a;
      --hmvip-color-surface-2: #111a2e;
      --hmvip-color-text: #e5e7eb;
      --hmvip-color-text-muted: #9ca3af;
      --hmvip-color-border: #1f2a3d;
      --hmvip-color-accent: #60a5fa;
      --hmvip-color-on-accent: #0b1220;
    }
  }

  /* Density switches */
  [data-hmvip-density="compact"] { --hmvip-density-scale: 0.9; }
  [data-hmvip-density="comfortable"] { --hmvip-density-scale: 1; }
}

/* @layer components: placeholders (preenchidos nas próximas tarefas) */
@layer components {
  /* ====== Button (componentes mínimos) ====== */
  .hmvip-button {
    display: inline-flex;
    -webkit-user-select: none;
            user-select: none;
    align-items: center;
    justify-content: center;
    gap: var(--hmvip-space-8);
    min-height: 44px; /* Tamanho mínimo de toque */
    padding-block: var(--hmvip-space-12);
    padding-inline: var(--hmvip-space-16);
    border-radius: var(--hmvip-radius-md);
    font-family: var(--hmvip-font-family);
    font-size: var(--hmvip-font-size-sm);
    font-weight: var(--hmvip-font-weight-medium);
    line-height: var(--hmvip-line-height);
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    position: relative;
    transition: background-color var(--hmvip-dur-1) var(--hmvip-ease-1),
                color var(--hmvip-dur-1) var(--hmvip-ease-1),
                border-color var(--hmvip-dur-1) var(--hmvip-ease-1),
                box-shadow var(--hmvip-dur-1) var(--hmvip-ease-1);
  }
  .hmvip-button[disabled],
  .hmvip-button.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
  }
  .hmvip-button:focus-visible {
    outline: 2px solid var(--hmvip-accent-400);
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .hmvip-button { transition: none; }
    .hmvip-button:focus-visible { outline-offset: 2px; }
  }
  /* Variantes */
  .hmvip-button--primary {
    background: var(--hmvip-color-accent);
    color: var(--hmvip-color-on-accent);
    border-color: var(--hmvip-color-accent);
    box-shadow: var(--hmvip-shadow-1);
  }
  .hmvip-button--primary:hover {
    background: var(--hmvip-accent-700);
    border-color: var(--hmvip-accent-700);
  }
  .hmvip-button--primary:active {
    background: var(--hmvip-accent-800);
    border-color: var(--hmvip-accent-800);
  }
  .hmvip-button--ghost {
    background: transparent;
    color: var(--hmvip-color-text);
    border-color: var(--hmvip-color-border);
  }
  .hmvip-button--ghost:hover {
    background: var(--hmvip-color-surface-2);
  }
  .hmvip-button--ghost:active {
    background: var(--hmvip-gray-200);
  }
  .hmvip-button--danger {
    background: var(--hmvip-color-error);
    color: var(--hmvip-color-on-accent);
    border-color: var(--hmvip-color-error);
  }
  .hmvip-button--danger:hover { background: #b91c1c; border-color: #b91c1c; }
  .hmvip-button--danger:active { background: #991b1b; border-color: #991b1b; }

  /* ====== Badge ====== */
  .hmvip-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hmvip-space-4);
    min-height: 20px;
    padding-inline: var(--hmvip-space-8);
    padding-block: 2px;
    font-family: var(--hmvip-font-family);
    font-size: var(--hmvip-font-size-xs);
    line-height: 1;
    border-radius: var(--hmvip-radius-full);
    border: 1px solid transparent;
    white-space: nowrap;
  }
  .hmvip-badge--default { background: var(--hmvip-color-surface-2); color: var(--hmvip-color-text); border-color: var(--hmvip-color-border); }
  .hmvip-badge--success { background: var(--hmvip-gray-100); color: var(--hmvip-color-success); border-color: var(--hmvip-color-success); }
  .hmvip-badge--warn { background: var(--hmvip-gray-100); color: var(--hmvip-color-warn); border-color: var(--hmvip-color-warn); }
  .hmvip-badge--error { background: var(--hmvip-gray-100); color: var(--hmvip-color-error); border-color: var(--hmvip-color-error); }
  .hmvip-badge--accent { background: var(--hmvip-accent-100); color: var(--hmvip-accent-700); border-color: var(--hmvip-accent-600); }

  /* ====== Card ====== */
  .hmvip-card {
    background: var(--hmvip-color-surface);
    color: var(--hmvip-color-text);
    border: 1px solid var(--hmvip-color-border);
    border-radius: var(--hmvip-radius-lg);
    box-shadow: var(--hmvip-shadow-1);
    position: relative;
    overflow: hidden; /* compat com ring-gradient */
    isolation: isolate; /* separa adornos */
  }
  .hmvip-card:hover { box-shadow: var(--hmvip-shadow-2); }
  .hmvip-card__header,
  .hmvip-card__body,
  .hmvip-card__footer { padding: var(--hmvip-space-16); }
  .hmvip-card__header { border-bottom: 1px solid var(--hmvip-color-border); }
  .hmvip-card__footer { border-top: 1px solid var(--hmvip-color-border); }
  /* Camadas internas do card respeitando z-index policy */
  .hmvip-card__content { position: relative; z-index: var(--hmvip-z-content); }
}

/* @layer utilities: Utilities essenciais (Tarefa 3) */
@layer utilities {
  /* Layout */
  .hmvip-flex { display: flex; }
  .hmvip-inline-flex { display: inline-flex; }
  .hmvip-grid { display: grid; }
  .hmvip-stack { display: flex; flex-direction: column; gap: var(--hmvip-space-16-d, var(--hmvip-space-16)); }
  .hmvip-center { display: grid; place-items: center; }

  /* Alinhamento (helpers básicos) */
  .hmvip-items-center { align-items: center; }
  .hmvip-justify-center { justify-content: center; }
  .hmvip-content-center { align-content: center; }

  /* Visibilidade / Acessibilidade */
  .hmvip-hidden { display: none !important; }
  .hmvip-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .hmvip-not-sr-only { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; white-space: normal !important; }

  /* Espaçamentos (margin/padding com logical properties para RTL) */
  /* Margens */
  .hmvip-m-2 { margin: var(--hmvip-space-2); }
  .hmvip-m-4 { margin: var(--hmvip-space-4); }
  .hmvip-m-6 { margin: var(--hmvip-space-6); }
  .hmvip-m-8 { margin: var(--hmvip-space-8); }
  .hmvip-m-12 { margin: var(--hmvip-space-12); }
  .hmvip-m-16 { margin: var(--hmvip-space-16); }
  .hmvip-m-24 { margin: var(--hmvip-space-24); }
  .hmvip-m-32 { margin: var(--hmvip-space-32); }

  .hmvip-mx-8 { margin-inline: var(--hmvip-space-8); }
  .hmvip-my-8 { margin-block: var(--hmvip-space-8); }
  .hmvip-mt-8 { margin-block-start: var(--hmvip-space-8); }
  .hmvip-mr-8 { margin-inline-end: var(--hmvip-space-8); }
  .hmvip-mb-8 { margin-block-end: var(--hmvip-space-8); }
  .hmvip-ml-8 { margin-inline-start: var(--hmvip-space-8); }

  .hmvip-mx-16 { margin-inline: var(--hmvip-space-16); }
  .hmvip-my-16 { margin-block: var(--hmvip-space-16); }
  .hmvip-mt-16 { margin-block-start: var(--hmvip-space-16); }
  .hmvip-mr-16 { margin-inline-end: var(--hmvip-space-16); }
  .hmvip-mb-16 { margin-block-end: var(--hmvip-space-16); }
  .hmvip-ml-16 { margin-inline-start: var(--hmvip-space-16); }

  /* Padding */
  .hmvip-p-2 { padding: var(--hmvip-space-2); }
  .hmvip-p-4 { padding: var(--hmvip-space-4); }
  .hmvip-p-6 { padding: var(--hmvip-space-6); }
  .hmvip-p-8 { padding: var(--hmvip-space-8); }
  .hmvip-p-12 { padding: var(--hmvip-space-12); }
  .hmvip-p-16 { padding: var(--hmvip-space-16); }
  .hmvip-p-24 { padding: var(--hmvip-space-24); }
  .hmvip-p-32 { padding: var(--hmvip-space-32); }

  .hmvip-px-8 { padding-inline: var(--hmvip-space-8); }
  .hmvip-py-8 { padding-block: var(--hmvip-space-8); }
  .hmvip-pt-8 { padding-block-start: var(--hmvip-space-8); }
  .hmvip-pr-8 { padding-inline-end: var(--hmvip-space-8); }
  .hmvip-pb-8 { padding-block-end: var(--hmvip-space-8); }
  .hmvip-pl-8 { padding-inline-start: var(--hmvip-space-8); }

  .hmvip-px-16 { padding-inline: var(--hmvip-space-16); }
  .hmvip-py-16 { padding-block: var(--hmvip-space-16); }
  .hmvip-pt-16 { padding-block-start: var(--hmvip-space-16); }
  .hmvip-pr-16 { padding-inline-end: var(--hmvip-space-16); }
  .hmvip-pb-16 { padding-block-end: var(--hmvip-space-16); }
  .hmvip-pl-16 { padding-inline-start: var(--hmvip-space-16); }

  /* Ring utilitário com fallback */
  .hmvip-ring-gradient {
    position: relative;
    isolation: isolate;
  }
  .hmvip-ring-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: var(--hmvip-z-adornos);
    padding: 2px; /* largura do anel */
    background: conic-gradient(
      from 0deg,
      var(--hmvip-accent-600),
      var(--hmvip-accent-400),
      var(--hmvip-accent-600)
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
  }
  @supports not ((-webkit-mask: linear-gradient(#000 0 0)) or (mask: linear-gradient(#000 0 0))) {
    .hmvip-ring-gradient::before {
      background: none;
      border: 2px solid var(--hmvip-accent-600);
      padding: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .hmvip-ring-gradient::before { transition: none !important; }
  }
}


/* ====== Tarefa 5 — Responsividade (Container queries) e RTL ====== */
@layer utilities {
  /* Container para ativar container queries no escopo desejado */
  .hmvip-container { container-type: inline-size; }
  /* Modificador opcional para explicitar tamanho objetivo (documental) */
  .hmvip-container--size { container-name: hmvip-scope; }
}

@layer components {
  /* Grid responsiva baseada no container */
  .hmvip-grid { grid-template-columns: 1fr; gap: var(--hmvip-space-16); }
  .hmvip-grid--auto { grid-template-columns: 1fr; }

  /* Ao crescer o container, ajustar colunas de forma fluida */
  @container (min-width: 480px) {
    .hmvip-grid--auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @container (min-width: 768px) {
    .hmvip-grid--auto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @container (min-width: 992px) {
    .hmvip-grid--auto { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* Cards responsivos: ajustes internos conforme a largura do container */
  .hmvip-card--responsive .hmvip-card__header,
  .hmvip-card--responsive .hmvip-card__body,
  .hmvip-card--responsive .hmvip-card__footer { padding-inline: var(--hmvip-space-16); }

  @container (min-width: 480px) {
    .hmvip-card--responsive .hmvip-card__header,
    .hmvip-card--responsive .hmvip-card__body,
    .hmvip-card--responsive .hmvip-card__footer { padding-inline: var(--hmvip-space-24); }
  }
  @container (min-width: 768px) {
    .hmvip-card--responsive .hmvip-card__header,
    .hmvip-card--responsive .hmvip-card__body,
    .hmvip-card--responsive .hmvip-card__footer { padding-inline: var(--hmvip-space-32); }

    /* Header em duas colunas quando houver espaço suficiente */
    .hmvip-card--responsive .hmvip-card__header { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  }

  /* RTL-safe já coberto via logical properties; reforço em ações no header */
  .hmvip-card--responsive .hmvip-card__actions { margin-inline-start: auto; }
}