/* ==========================================================================
   Vendora — Design tokens
   Identidade "Pinho & Goiaba". Fonte da verdade para cores, tipografia,
   espaçamento, raios, sombras, motion e camadas do painel.
   Documentação: docs/brand/BRAND.md  ·  Vitrine: docs/brand/brand-board.html
   Contraste verificado com docs/brand/scripts/contrast.py
   Convenção: todos os tokens usam o prefixo --vdr-.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fontes (self-hosted, OFL — licenças em ../fonts/LICENSES/)
   Arquivos variáveis, subconjuntos latin + latin-ext (acentos PT-BR).
   -------------------------------------------------------------------------- */

/* Bricolage Grotesque — display (títulos, números de destaque) */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter — interface (texto, formulários, tabelas) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono — SKU, IDs de pedido, códigos */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Primitivos e escalas (não mudam com o tema)
   -------------------------------------------------------------------------- */
:root {
  /* 2.1 Pinho — cor primária da marca */
  --vdr-brand-50: #edf8f3;
  --vdr-brand-100: #d3efe2;
  --vdr-brand-200: #a8dec6;
  --vdr-brand-300: #72c7a4;
  --vdr-brand-400: #40ad83;
  --vdr-brand-500: #138a62;
  --vdr-brand-600: #0b6e50;
  --vdr-brand-700: #0a5a42;
  --vdr-brand-800: #0b4936;
  --vdr-brand-900: #0a3c2d;
  --vdr-brand-950: #042219;

  /* 2.2 Goiaba — acento (etiqueta do símbolo, destaques, novidades) */
  --vdr-accent-50: #fff0f3;
  --vdr-accent-100: #ffdde4;
  --vdr-accent-200: #ffbaca;
  --vdr-accent-300: #ff8da6;
  --vdr-accent-400: #fa7393;
  --vdr-accent-500: #f2557a;
  --vdr-accent-600: #d93a63;
  --vdr-accent-700: #b3264f;
  --vdr-accent-800: #901f42;
  --vdr-accent-900: #761d3a;
  --vdr-accent-950: #450a1c;

  /* 2.3 Neutros — grafite com leve tom de musgo */
  --vdr-neutral-0: #ffffff;
  --vdr-neutral-50: #f6f8f6;
  --vdr-neutral-100: #edf0ee;
  --vdr-neutral-200: #dde2df;
  --vdr-neutral-300: #c3cac6;
  --vdr-neutral-400: #8d9792;
  --vdr-neutral-500: #626d68;
  --vdr-neutral-600: #515b56;
  --vdr-neutral-700: #3c4541;
  --vdr-neutral-800: #28302c;
  --vdr-neutral-900: #18201c;
  --vdr-neutral-950: #0e1411;

  /* 2.4 Semânticas (primitivos) */
  --vdr-green-50: #ebf7ec;
  --vdr-green-500: #2f9a46;
  --vdr-green-600: #23803a;
  --vdr-green-700: #1c6a30;
  --vdr-green-300: #74d08a;
  --vdr-green-950: #10301a;

  --vdr-amber-50: #fff6e0;
  --vdr-amber-400: #f5b544;
  --vdr-amber-500: #e09a12;
  --vdr-amber-700: #965400;
  --vdr-amber-950: #3a2706;

  --vdr-red-50: #fdeceb;
  --vdr-red-300: #ff8f85;
  --vdr-red-600: #c8271e;
  --vdr-red-700: #a81f18;
  --vdr-red-950: #3f1411;

  --vdr-blue-50: #e9f2fd;
  --vdr-blue-300: #86b9f5;
  --vdr-blue-600: #1d64be;
  --vdr-blue-700: #17519c;
  --vdr-blue-950: #10243d;

  /* 2.6 Tipografia ------------------------------------------------------- */
  --vdr-font-display: "Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vdr-font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vdr-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --vdr-font-weight-regular: 400;
  --vdr-font-weight-medium: 500;
  --vdr-font-weight-semibold: 600;
  --vdr-font-weight-bold: 700;

  /* Escala fluida mobile-first (min em 360px, máx em ~1280px). Base 16px: inputs nunca < 16px no celular (evita zoom no iOS). */
  --vdr-font-size-2xs: 0.6875rem;                                   /* 11px — rótulos de gráfico */
  --vdr-font-size-xs: 0.75rem;                                      /* 12px — badges, legendas */
  --vdr-font-size-sm: 0.875rem;                                     /* 14px — tabelas, ajuda */
  --vdr-font-size-md: 1rem;                                         /* 16px — corpo, inputs */
  --vdr-font-size-lg: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem); /* 17→18px */
  --vdr-font-size-xl: clamp(1.125rem, 1.07rem + 0.27vw, 1.25rem);   /* 18→20px — título de card */
  --vdr-font-size-2xl: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);    /* 20→24px — título de seção */
  --vdr-font-size-3xl: clamp(1.5rem, 1.34rem + 0.7vw, 1.875rem);    /* 24→30px — título de página */
  --vdr-font-size-4xl: clamp(1.875rem, 1.6rem + 1.2vw, 2.5rem);     /* 30→40px — métricas */
  --vdr-font-size-5xl: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);       /* 36→52px — destaque/marketing */

  --vdr-line-height-none: 1;
  --vdr-line-height-tight: 1.15;   /* display */
  --vdr-line-height-snug: 1.3;     /* títulos de UI */
  --vdr-line-height-normal: 1.5;   /* corpo */
  --vdr-line-height-relaxed: 1.65; /* textos longos, ajuda */

  --vdr-letter-spacing-display: -0.02em;
  --vdr-letter-spacing-tight: -0.01em;
  --vdr-letter-spacing-normal: 0;
  --vdr-letter-spacing-caps: 0.06em; /* rótulos em caixa-alta */

  /* 2.7 Espaçamento — escala de 4px */
  --vdr-space-0: 0;
  --vdr-space-px: 1px;
  --vdr-space-0-5: 0.125rem; /* 2px */
  --vdr-space-1: 0.25rem;    /* 4px */
  --vdr-space-1-5: 0.375rem; /* 6px */
  --vdr-space-2: 0.5rem;     /* 8px */
  --vdr-space-3: 0.75rem;    /* 12px */
  --vdr-space-4: 1rem;       /* 16px */
  --vdr-space-5: 1.25rem;    /* 20px */
  --vdr-space-6: 1.5rem;     /* 24px */
  --vdr-space-8: 2rem;       /* 32px */
  --vdr-space-10: 2.5rem;    /* 40px */
  --vdr-space-12: 3rem;      /* 48px */
  --vdr-space-16: 4rem;      /* 64px */
  --vdr-space-20: 5rem;      /* 80px */
  --vdr-space-24: 6rem;      /* 96px */

  /* 2.8 Raios */
  --vdr-radius-none: 0;
  --vdr-radius-xs: 4px;     /* checkbox, tags pequenas */
  --vdr-radius-sm: 6px;     /* badges */
  --vdr-radius-md: 10px;    /* botões, inputs */
  --vdr-radius-lg: 14px;    /* cards */
  --vdr-radius-xl: 20px;    /* modais, painéis grandes */
  --vdr-radius-full: 9999px;

  /* 2.9 Motion */
  --vdr-duration-instant: 80ms;
  --vdr-duration-fast: 140ms;   /* hover, foco */
  --vdr-duration-base: 220ms;   /* abrir menu, toggle */
  --vdr-duration-slow: 320ms;   /* modal, drawer */
  --vdr-duration-slower: 480ms; /* gráficos, skeleton */
  --vdr-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --vdr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --vdr-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --vdr-ease-emphasized: cubic-bezier(0.3, 0, 0, 1.25);

  /* 2.10 Camadas (z-index) */
  --vdr-z-base: 0;
  --vdr-z-raised: 10;
  --vdr-z-dropdown: 1000;
  --vdr-z-sticky: 1100;
  --vdr-z-header: 1200;
  --vdr-z-sidebar: 1300;
  --vdr-z-overlay: 1400;
  --vdr-z-modal: 1500;
  --vdr-z-popover: 1600;
  --vdr-z-toast: 1700;
  --vdr-z-tooltip: 1800;

  /* 2.11 Alvos de toque e controles */
  --vdr-touch-target-min: 44px;  /* WCAG 2.5.5 / Apple HIG */
  --vdr-control-height-sm: 36px; /* só em desktop; manter área clicável de 44px com padding/::after */
  --vdr-control-height-md: 44px; /* padrão */
  --vdr-control-height-lg: 52px; /* CTA principal no celular */
  --vdr-icon-size-sm: 16px;
  --vdr-icon-size-md: 20px;
  --vdr-icon-size-lg: 24px;

  /* 2.12 Layout */
  --vdr-sidebar-width: 264px;
  --vdr-header-height: 64px;
  --vdr-content-max-width: 1280px;
  --vdr-breakpoint-sm: 480px;  /* referência (media queries não aceitam var) */
  --vdr-breakpoint-md: 768px;
  --vdr-breakpoint-lg: 1024px;
  --vdr-breakpoint-xl: 1280px;
}

/* --------------------------------------------------------------------------
   2b. Papéis de cor — TEMA CLARO (padrão)
   Também aplicável a um trecho com [data-theme="light"] dentro de página escura.
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Marca */
  --vdr-color-primary: var(--vdr-brand-600);
  --vdr-color-primary-hover: var(--vdr-brand-700);
  --vdr-color-primary-active: var(--vdr-brand-800);
  --vdr-color-on-primary: #ffffff;
  --vdr-color-primary-soft: var(--vdr-brand-50);
  --vdr-color-primary-soft-hover: var(--vdr-brand-100);
  --vdr-color-primary-text: var(--vdr-brand-700);
  --vdr-color-accent: var(--vdr-accent-500);
  --vdr-color-accent-hover: var(--vdr-accent-600);
  --vdr-color-on-accent: var(--vdr-neutral-950);
  --vdr-color-accent-soft: var(--vdr-accent-50);
  --vdr-color-accent-text: var(--vdr-accent-700);

  /* Semânticas: solid (fundo forte / ícone), text (texto sobre soft ou superfície), soft (fundo suave), border */
  --vdr-color-success: var(--vdr-green-600);
  --vdr-color-on-success: #ffffff;
  --vdr-color-success-text: var(--vdr-green-700);
  --vdr-color-success-soft: var(--vdr-green-50);
  --vdr-color-success-border: #b5e0bf;

  --vdr-color-warning: var(--vdr-amber-500);
  --vdr-color-on-warning: var(--vdr-neutral-950);
  --vdr-color-warning-text: var(--vdr-amber-700);
  --vdr-color-warning-soft: var(--vdr-amber-50);
  --vdr-color-warning-border: #f3d48f;

  --vdr-color-danger: var(--vdr-red-600);
  --vdr-color-danger-hover: var(--vdr-red-700);
  --vdr-color-on-danger: #ffffff;
  --vdr-color-danger-text: var(--vdr-red-700);
  --vdr-color-danger-soft: var(--vdr-red-50);
  --vdr-color-danger-border: #f4b9b4;

  --vdr-color-info: var(--vdr-blue-600);
  --vdr-color-on-info: #ffffff;
  --vdr-color-info-text: var(--vdr-blue-700);
  --vdr-color-info-soft: var(--vdr-blue-50);
  --vdr-color-info-border: #b7d3f6;

  /* Superfícies */
  --vdr-surface-page: var(--vdr-neutral-50);      /* fundo da aplicação */
  --vdr-surface-default: var(--vdr-neutral-0);    /* cards, tabelas, painéis */
  --vdr-surface-raised: var(--vdr-neutral-0);     /* menus, popovers, modais */
  --vdr-surface-sunken: var(--vdr-neutral-100);   /* áreas recuadas, trilhas */
  --vdr-surface-hover: var(--vdr-neutral-100);    /* hover de linha/item */
  --vdr-surface-selected: var(--vdr-brand-50);    /* item selecionado */
  --vdr-surface-inverse: var(--vdr-neutral-900);  /* tooltip, toast */
  --vdr-surface-sidebar: var(--vdr-brand-950);    /* navegação lateral (sempre escura) */
  --vdr-surface-overlay: rgb(14 20 17 / 0.48);    /* véu atrás de modais */

  /* Bordas */
  --vdr-border-subtle: var(--vdr-neutral-200);    /* divisórias */
  --vdr-border-default: var(--vdr-neutral-300);   /* cards */
  --vdr-border-strong: var(--vdr-neutral-500);    /* inputs (≥ 3:1) */
  --vdr-border-focus: var(--vdr-brand-600);

  /* Texto */
  --vdr-text-primary: var(--vdr-neutral-900);
  --vdr-text-secondary: var(--vdr-neutral-600);
  --vdr-text-tertiary: var(--vdr-neutral-500);    /* metadados, placeholder */
  --vdr-text-disabled: var(--vdr-neutral-400);    /* isento de contraste (WCAG 1.4.3) */
  --vdr-text-inverse: var(--vdr-neutral-50);
  --vdr-text-link: var(--vdr-brand-700);
  --vdr-text-link-hover: var(--vdr-brand-800);
  --vdr-text-on-sidebar: var(--vdr-neutral-100);
  --vdr-text-on-sidebar-muted: var(--vdr-brand-200);

  /* Foco */
  --vdr-focus-ring-color: var(--vdr-brand-600);
  --vdr-focus-ring-width: 2px;
  --vdr-focus-ring-offset: 2px;
  --vdr-focus-ring: 0 0 0 var(--vdr-focus-ring-offset) var(--vdr-surface-default), 0 0 0 calc(var(--vdr-focus-ring-offset) + var(--vdr-focus-ring-width)) var(--vdr-focus-ring-color);

  /* Sombras (tingidas de grafite, nunca preto puro) */
  --vdr-shadow-xs: 0 1px 2px rgb(14 20 17 / 0.06);
  --vdr-shadow-sm: 0 1px 3px rgb(14 20 17 / 0.08), 0 1px 2px rgb(14 20 17 / 0.04);
  --vdr-shadow-md: 0 4px 12px -2px rgb(14 20 17 / 0.10), 0 2px 4px -2px rgb(14 20 17 / 0.06);
  --vdr-shadow-lg: 0 12px 28px -6px rgb(14 20 17 / 0.14), 0 4px 8px -4px rgb(14 20 17 / 0.06);
  --vdr-shadow-xl: 0 24px 48px -12px rgb(14 20 17 / 0.22);
}

/* --------------------------------------------------------------------------
   3. Tema escuro — papéis de cor
   Aplicado com [data-theme="dark"] ou, sem data-theme, pela preferência do SO.
   Os dois blocos abaixo são idênticos de propósito.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;

  --vdr-color-primary: var(--vdr-brand-400);
  --vdr-color-primary-hover: var(--vdr-brand-300);
  --vdr-color-primary-active: var(--vdr-brand-200);
  --vdr-color-on-primary: var(--vdr-brand-950);
  --vdr-color-primary-soft: #11291f;
  --vdr-color-primary-soft-hover: #163427;
  --vdr-color-primary-text: var(--vdr-brand-300);
  --vdr-color-accent: var(--vdr-accent-400);
  --vdr-color-accent-hover: var(--vdr-accent-300);
  --vdr-color-on-accent: var(--vdr-neutral-950);
  --vdr-color-accent-soft: #351520;
  --vdr-color-accent-text: var(--vdr-accent-300);

  --vdr-color-success: var(--vdr-green-300);
  --vdr-color-on-success: var(--vdr-neutral-950);
  --vdr-color-success-text: var(--vdr-green-300);
  --vdr-color-success-soft: var(--vdr-green-950);
  --vdr-color-success-border: #24573a;

  --vdr-color-warning: var(--vdr-amber-400);
  --vdr-color-on-warning: var(--vdr-neutral-950);
  --vdr-color-warning-text: var(--vdr-amber-400);
  --vdr-color-warning-soft: var(--vdr-amber-950);
  --vdr-color-warning-border: #6b4a12;

  --vdr-color-danger: var(--vdr-red-300);
  --vdr-color-danger-hover: #ffaba3;
  --vdr-color-on-danger: var(--vdr-neutral-950);
  --vdr-color-danger-text: var(--vdr-red-300);
  --vdr-color-danger-soft: var(--vdr-red-950);
  --vdr-color-danger-border: #6e2a24;

  --vdr-color-info: var(--vdr-blue-300);
  --vdr-color-on-info: var(--vdr-neutral-950);
  --vdr-color-info-text: var(--vdr-blue-300);
  --vdr-color-info-soft: var(--vdr-blue-950);
  --vdr-color-info-border: #24497a;

  --vdr-surface-page: var(--vdr-neutral-950);
  --vdr-surface-default: var(--vdr-neutral-900);
  --vdr-surface-raised: #1f2823;
  --vdr-surface-sunken: #0a0f0c;
  --vdr-surface-hover: #222c27;
  --vdr-surface-selected: #11291f;
  --vdr-surface-inverse: var(--vdr-neutral-100);
  --vdr-surface-sidebar: #0a120e;
  --vdr-surface-overlay: rgb(0 0 0 / 0.6);

  --vdr-border-subtle: #252e29;
  --vdr-border-default: #313b36;
  --vdr-border-strong: #6f7a75;
  --vdr-border-focus: var(--vdr-brand-300);

  --vdr-text-primary: var(--vdr-neutral-100);
  --vdr-text-secondary: var(--vdr-neutral-300);
  --vdr-text-tertiary: #9aa49f;
  --vdr-text-disabled: var(--vdr-neutral-600);
  --vdr-text-inverse: var(--vdr-neutral-900);
  --vdr-text-link: var(--vdr-brand-300);
  --vdr-text-link-hover: var(--vdr-brand-200);
  --vdr-text-on-sidebar: var(--vdr-neutral-100);
  --vdr-text-on-sidebar-muted: var(--vdr-brand-200);

  --vdr-focus-ring-color: var(--vdr-brand-300);
  /* re-declarado: var() em custom property resolve no elemento onde é declarado */
  --vdr-focus-ring: 0 0 0 var(--vdr-focus-ring-offset) var(--vdr-surface-default), 0 0 0 calc(var(--vdr-focus-ring-offset) + var(--vdr-focus-ring-width)) var(--vdr-focus-ring-color);

  --vdr-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --vdr-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3);
  --vdr-shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --vdr-shadow-lg: 0 12px 28px -6px rgb(0 0 0 / 0.55), 0 4px 8px -4px rgb(0 0 0 / 0.3);
  --vdr-shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.65);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --vdr-color-primary: var(--vdr-brand-400);
    --vdr-color-primary-hover: var(--vdr-brand-300);
    --vdr-color-primary-active: var(--vdr-brand-200);
    --vdr-color-on-primary: var(--vdr-brand-950);
    --vdr-color-primary-soft: #11291f;
    --vdr-color-primary-soft-hover: #163427;
    --vdr-color-primary-text: var(--vdr-brand-300);
    --vdr-color-accent: var(--vdr-accent-400);
    --vdr-color-accent-hover: var(--vdr-accent-300);
    --vdr-color-on-accent: var(--vdr-neutral-950);
    --vdr-color-accent-soft: #351520;
    --vdr-color-accent-text: var(--vdr-accent-300);

    --vdr-color-success: var(--vdr-green-300);
    --vdr-color-on-success: var(--vdr-neutral-950);
    --vdr-color-success-text: var(--vdr-green-300);
    --vdr-color-success-soft: var(--vdr-green-950);
    --vdr-color-success-border: #24573a;

    --vdr-color-warning: var(--vdr-amber-400);
    --vdr-color-on-warning: var(--vdr-neutral-950);
    --vdr-color-warning-text: var(--vdr-amber-400);
    --vdr-color-warning-soft: var(--vdr-amber-950);
    --vdr-color-warning-border: #6b4a12;

    --vdr-color-danger: var(--vdr-red-300);
    --vdr-color-danger-hover: #ffaba3;
    --vdr-color-on-danger: var(--vdr-neutral-950);
    --vdr-color-danger-text: var(--vdr-red-300);
    --vdr-color-danger-soft: var(--vdr-red-950);
    --vdr-color-danger-border: #6e2a24;

    --vdr-color-info: var(--vdr-blue-300);
    --vdr-color-on-info: var(--vdr-neutral-950);
    --vdr-color-info-text: var(--vdr-blue-300);
    --vdr-color-info-soft: var(--vdr-blue-950);
    --vdr-color-info-border: #24497a;

    --vdr-surface-page: var(--vdr-neutral-950);
    --vdr-surface-default: var(--vdr-neutral-900);
    --vdr-surface-raised: #1f2823;
    --vdr-surface-sunken: #0a0f0c;
    --vdr-surface-hover: #222c27;
    --vdr-surface-selected: #11291f;
    --vdr-surface-inverse: var(--vdr-neutral-100);
    --vdr-surface-sidebar: #0a120e;
    --vdr-surface-overlay: rgb(0 0 0 / 0.6);

    --vdr-border-subtle: #252e29;
    --vdr-border-default: #313b36;
    --vdr-border-strong: #6f7a75;
    --vdr-border-focus: var(--vdr-brand-300);

    --vdr-text-primary: var(--vdr-neutral-100);
    --vdr-text-secondary: var(--vdr-neutral-300);
    --vdr-text-tertiary: #9aa49f;
    --vdr-text-disabled: var(--vdr-neutral-600);
    --vdr-text-inverse: var(--vdr-neutral-900);
    --vdr-text-link: var(--vdr-brand-300);
    --vdr-text-link-hover: var(--vdr-brand-200);
    --vdr-text-on-sidebar: var(--vdr-neutral-100);
    --vdr-text-on-sidebar-muted: var(--vdr-brand-200);

    --vdr-focus-ring-color: var(--vdr-brand-300);
    --vdr-focus-ring: 0 0 0 var(--vdr-focus-ring-offset) var(--vdr-surface-default), 0 0 0 calc(var(--vdr-focus-ring-offset) + var(--vdr-focus-ring-width)) var(--vdr-focus-ring-color);

    --vdr-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --vdr-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3);
    --vdr-shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --vdr-shadow-lg: 0 12px 28px -6px rgb(0 0 0 / 0.55), 0 4px 8px -4px rgb(0 0 0 / 0.3);
    --vdr-shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.65);
  }
}

/* --------------------------------------------------------------------------
   4. Preferências de acessibilidade
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --vdr-duration-instant: 0ms;
    --vdr-duration-fast: 0ms;
    --vdr-duration-base: 0ms;
    --vdr-duration-slow: 0ms;
    --vdr-duration-slower: 0ms;
  }
}

/* Mais contraste quando o SO pede (somente tema claro; o escuro já é ≥ 7:1 no texto secundário) */
@media (prefers-contrast: more) {
  :root[data-theme="light"] {
    --vdr-text-secondary: var(--vdr-neutral-700);
    --vdr-text-tertiary: var(--vdr-neutral-600);
    --vdr-border-default: var(--vdr-neutral-500);
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --vdr-text-secondary: var(--vdr-neutral-700);
    --vdr-text-tertiary: var(--vdr-neutral-600);
    --vdr-border-default: var(--vdr-neutral-500);
  }
}