/* Tokens de cores e fontes */
:root {
  --color-bg: #fff;
  --color-fg: #333;
  --color-blue-button: #0076DF;
  --color-fg-muted: #636363;
  --color-border: #ddd;
  --color-inverse: #000;
  --color-nav-bg: #f5f5f7;
  --color-nav-fg: #1d1d1f;
  --container-max: 100rem;
  --space-md: 1rem;
  --font-sans: "Poppins", Arial, sans-serif;

  /* ── Espaçamento ── */

  --space-section: 3rem;      /* entre seções */
  --space-title-body: 2rem; /* título -> conteúdo (sempre igual) */

  /* ── Bordas (Apple-like) ── */

  /* Cores de borda — hairline suave, estilo sistema Apple */
  --border-color: rgba(0, 0, 0, 0.08);       /* padrão (cards, inputs idle) */
  --border-color-strong: rgba(0, 0, 0, 0.16); /* hover / ênfase */
  --border-color-subtle: rgba(0, 0, 0, 0.04); /* separadores leves */
  --border-color-inverse: rgba(255, 255, 255, 0.18); /* sobre fundo escuro */
  --border-color-focus: #0071e3;             /* azul Apple (focus) */

  /* Espessura */
  --border-width: 1px;
  --border-width-thick: 2px;

  /* Atalhos compostos (use em `border:`) */
  --border: var(--border-width) solid var(--border-color);
  --border-strong: var(--border-width) solid var(--border-color-strong);
  --border-subtle: var(--border-width) solid var(--border-color-subtle);
  --border-focus: var(--border-width-thick) solid var(--border-color-focus);

  /* Raios — escala contínua estilo Apple */
  --radius-xs: 4px;    /* chips, badges */
  --radius-sm: 8px;    /* botões, inputs */
  --radius-md: 12px;   /* cards de produto */
  --radius-lg: 18px;   /* cards grandes, modais */
  --radius-xl: 22px;   /* painéis / hero blocks */
  --radius-full: 9999px; /* pills, avatar, FAB */

  /* ── Glass (Apple-like) ── */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-blur: 16px;
  --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);

  /* ── Scrollbar (Apple-like) ── */
  --scrollbar-size: 5px;
  --scrollbar-track: oklch(0.55 0.01 260 / 10%);
  --scrollbar-thumb: oklch(0.45 0.01 260 / 45%);
  --scrollbar-thumb-strong: oklch(0.40 0.01 260 / 65%);
  --scrollbar-thumb-color: transparent;
  
}

@property --scrollbar-thumb-color {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

/* WebKit (Chrome / Safari / Edge) */
* {
  --scrollbar-thumb-color: transparent;
}

*:hover {
  --scrollbar-thumb-color: var(--scrollbar-thumb);
}

*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track);
  border-radius: var(--radius-full);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border-radius: var(--radius-full);
  transition: background-color 0.15s ease;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-strong);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Utilitário glass reutilizável */
.glass-panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}

/* Firefox — isolado para não misturar com WebKit */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: transparent var(--scrollbar-track);
  }

  *:hover {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }
}