/* ==========================================================================
   Rande Vértice — tokens RDS 2.3 (evolução da 2.2, mesma direção)
   Paleta oficial: canvas #0B0B0C · ação #1F8CFF (cobalt)
   Prefixo único: --rv-*   (substitui --r-*, --rg-* da 2.2)
   Valores de cor derivados (hover/pressed/borda) usam color-mix em OKLCH;
   validar contraste nas composições reais antes de congelar.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Cor: base dark (padrão) ---------------------------------------- */
  --rv-canvas:        #0B0B0C;  /* fundo de app */
  --rv-obsidian:      #030711;  /* hero institucional, vídeo, cenas cinematográficas */
  --rv-surface:       #151618;  /* cards operacionais (Solid) */
  --rv-raised:        #1D1F23;  /* listas elevadas, overlays sólidos */
  --rv-sunken:        #101113;  /* trilhos, campos rebaixados */
  --rv-border-subtle: #22242A;  /* separação de baixa ênfase, não interativo */
  --rv-border:        #2E3137;  /* bordas estruturais / interativas */
  --rv-border-strong: #4A4E56;  /* hover de borda */
  --rv-text:          #F5F7FA;  /* texto principal */
  --rv-text-2:        #C3CAD2;  /* texto secundário */
  --rv-muted:         #A7ADB5;  /* metadados (conferir contraste no fundo real) */
  --rv-ice:           #DDE8F0;  /* reflexo neutro / realce suave — não é status */

  /* ---- Cor: semântica ------------------------------------------------- */
  --rv-cobalt:  #1F8CFF;  /* ação, navegação, rota, seleção */
  --rv-emerald: #14B86A;  /* sucesso, concluído, disponível */
  --rv-amber:   #F1B33B;  /* atenção, pendente */
  --rv-rose:    #E45A6B;  /* erro, perigo, desconexão */

  /* pares cor + conteúdo (texto sobre a cor) */
  --rv-cobalt-content:  #F7FBFF;
  --rv-emerald-content: #04140C;
  --rv-amber-content:   #1A1204;
  --rv-rose-content:    #FFF6F7;

  /* estados derivados (mesma cor, sem inventar paleta nova) */
  --rv-cobalt-hover:   color-mix(in oklch, var(--rv-cobalt) 86%, white);
  --rv-cobalt-pressed: color-mix(in oklch, var(--rv-cobalt) 84%, black);
  --rv-cobalt-soft:    color-mix(in oklch, var(--rv-cobalt) 14%, var(--rv-canvas)); /* fundo tingido */
  --rv-cobalt-line:    color-mix(in oklch, var(--rv-cobalt) 45%, var(--rv-canvas)); /* borda tingida */
  --rv-emerald-soft:   color-mix(in oklch, var(--rv-emerald) 14%, var(--rv-canvas));
  --rv-amber-soft:     color-mix(in oklch, var(--rv-amber) 14%, var(--rv-canvas));
  --rv-rose-soft:      color-mix(in oklch, var(--rv-rose) 14%, var(--rv-canvas));
  --rv-hover-overlay:  color-mix(in oklch, var(--rv-text) 6%, transparent);
  --rv-press-overlay:  color-mix(in oklch, var(--rv-text) 10%, transparent);

  /* foco: anel visível só com teclado (usar :focus-visible) */
  --rv-focus-ring: 0 0 0 2px var(--rv-canvas), 0 0 0 4px var(--rv-cobalt);

  /* ---- Forma ---------------------------------------------------------- */
  --rv-radius-xs: 4px;   /* selector: checkbox, badge, tag, kbd */
  --rv-radius-sm: 6px;   /* field: input, botão compacto, item de menu */
  --rv-radius-md: 8px;   /* botão padrão, popover, tooltip */
  --rv-radius-lg: 10px;  /* box: card, sheet, dialog, dock — MÁXIMO em UI comum */
  /* regra: raio interno = raio externo − padding (cantos concêntricos) */

  --rv-control-h-sm: 36px;
  --rv-control-h:    44px;
  --rv-control-h-lg: 48px;
  --rv-hit-min:      44px;  /* área de toque mínima (pode crescer via ::before) */

  /* espaço: grid de 4px */
  --rv-space-1: 4px;  --rv-space-2: 8px;  --rv-space-3: 12px; --rv-space-4: 16px;
  --rv-space-5: 20px; --rv-space-6: 24px; --rv-space-8: 32px; --rv-space-10: 40px;
  --rv-space-12: 48px; --rv-space-16: 64px;

  /* ---- Tipografia ----------------------------------------------------- */
  --rv-font-display:   'Syne', 'Onest', system-ui, sans-serif;       /* só display ≥ 32px */
  --rv-font-ui:        'Onest', system-ui, -apple-system, sans-serif; /* UI e corpo */
  --rv-font-editorial: 'Newsreader', Georgia, serif;                  /* uso editorial raro */
  --rv-font-mono:      'Azeret Mono', ui-monospace, monospace;        /* números, IDs, telemetria */

  /* escala: tamanho / altura de linha / tracking (aperta conforme cresce) */
  --rv-text-xs:  12px; --rv-lh-xs: 16px; --rv-tr-xs:  0.01em;
  --rv-text-sm:  13px; --rv-lh-sm: 20px; --rv-tr-sm:  0.005em;
  --rv-text-md:  15px; --rv-lh-md: 22px; --rv-tr-md:  0;
  --rv-text-lg:  17px; --rv-lh-lg: 24px; --rv-tr-lg: -0.005em;
  --rv-text-xl:  22px; --rv-lh-xl: 28px; --rv-tr-xl: -0.018em;
  --rv-text-2xl: 28px; --rv-lh-2xl: 34px; --rv-tr-2xl: -0.02em;
  --rv-text-3xl: 36px; --rv-lh-3xl: 40px; --rv-tr-3xl: -0.025em;
  --rv-text-4xl: 44px; --rv-lh-4xl: 48px; --rv-tr-4xl: -0.03em;
  --rv-text-5xl: 56px; --rv-lh-5xl: 58px; --rv-tr-5xl: -0.035em;

  /* ---- Movimento (mantém a gramática 2.2) ----------------------------- */
  --rv-dur-instant: 70ms;   /* reconhecer o toque */
  --rv-dur-touch:   110ms;  /* press/soltura, checkbox */
  --rv-dur-fast:    160ms;  /* hover, foco, borda, ícone; também saída de overlay */
  --rv-dur-control: 210ms;  /* dropdown, toggle, segmented */
  --rv-dur-overlay: 280ms;  /* modal, popover, sheet */
  --rv-dur-route:   340ms;  /* push/pop */
  --rv-dur-object:  440ms;  /* revelar 3D relevante */
  --rv-dur-special: 650ms;  /* hero editorial excepcional */

  --rv-ease-enter:    cubic-bezier(.16, 1, .3, 1);   /* entra e assenta sem ressalto */
  --rv-ease-standard: cubic-bezier(.2, .75, .2, 1);  /* controles, brilho, seleção */
  --rv-ease-exit:     cubic-bezier(.4, 0, 1, 1);     /* sai rápido */
  /* molas (Motion): ver references/motion.md — control ζ≈0.9–1.0, overlay bounce 0, rota bounce -0.1 */

  /* ---- Materiais ------------------------------------------------------ */
  /* Solid: "um pixel, duas luzes" — profundidade por luz, não por blur */
  --rv-solid-fill:   linear-gradient(180deg, #1A1C1F 0%, #151618 100%);
  --rv-solid-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.40), 0 8px 24px rgba(0,0,0,.18);
  --rv-key-edge:     0 1px 0 rgba(0,0,0,.45);
  --rv-highlight:    inset 0 1px 0 rgba(255,255,255,.14);

  /* Soft (cenários claros) */
  --rv-soft-surface:   #F2F3F5;
  --rv-soft-surface-2: #ECEEF1;
  --rv-soft-card:      #FFFFFF;
  --rv-soft-border:    #E1E5EA;
  --rv-text-dark:      #121418;
  --rv-soft-shadow:    0 1px 2px rgba(18,20,24,.05), 0 0 0 1px rgba(18,20,24,.05);

  /* Glass (só controles/ações flutuantes) */
  --rv-glass-blur:     16px;
  --rv-glass-black:    linear-gradient(148deg, rgba(55,60,66,.44), rgba(19,23,29,.74) 46%, rgba(29,33,40,.82));
  --rv-glass-white:    linear-gradient(148deg, rgba(255,255,255,.72), rgba(246,248,250,.56) 46%, rgba(232,236,240,.62));
  --rv-glass-cobalt:   linear-gradient(148deg, rgba(48,152,255,.92), rgba(31,140,255,.92) 48%, rgba(13,104,214,.96));
  --rv-glass-graphite: linear-gradient(148deg, rgba(73,81,91,.34), rgba(24,29,36,.72) 43%, rgba(30,35,43,.78));
  --rv-glass-stroke:   rgba(236,245,251,.24);
  --rv-glass-shadow:   inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px rgba(0,0,0,.20);

  /* Overlays */
  --rv-overlay-shadow: 0 16px 40px rgba(0,0,0,.36), 0 0 0 1px var(--rv-border);
  --rv-scrim:          rgba(3,7,17,.56);
}

/* Light de verdade (não inverter com filter) */
:root[data-theme='light'] {
  color-scheme: light;
  --rv-canvas: #F6F7F8;
  --rv-surface: #FFFFFF;
  --rv-raised: #FFFFFF;
  --rv-sunken: #EEF0F2;
  --rv-border-subtle: #E8EBEF;
  --rv-border: #E1E5EA;
  --rv-border-strong: #C9CFD6;
  --rv-text: #1A1D21;
  --rv-text-2: #3A4048;
  --rv-muted: #5F6772;
  --rv-cobalt-soft: color-mix(in oklch, var(--rv-cobalt) 10%, white);
  --rv-hover-overlay: color-mix(in oklch, #1A1D21 5%, transparent);
  --rv-press-overlay: color-mix(in oklch, #1A1D21 9%, transparent);
  --rv-solid-fill: #FFFFFF;
  --rv-solid-shadow: var(--rv-soft-shadow);
}

/* Material como atributo: mesma marcação, material diferente */
[data-material='solid'] { background: var(--rv-solid-fill); box-shadow: var(--rv-solid-shadow); border-radius: var(--rv-radius-lg); }
[data-material='soft']  { background: var(--rv-soft-card); color: var(--rv-text-dark); box-shadow: var(--rv-soft-shadow); border-radius: var(--rv-radius-lg); }
[data-material='glass'] {
  background: var(--rv-glass-black);
  border: 1px solid var(--rv-glass-stroke);
  box-shadow: var(--rv-glass-shadow);
  -webkit-backdrop-filter: blur(var(--rv-glass-blur)) saturate(120%);
  backdrop-filter: blur(var(--rv-glass-blur)) saturate(120%);
}
[data-material='glass'][data-tone='white']    { background: var(--rv-glass-white); color: var(--rv-text-dark); }
[data-material='glass'][data-tone='cobalt']   { background: var(--rv-glass-cobalt); color: var(--rv-cobalt-content); }
[data-material='glass'][data-tone='graphite'] { background: var(--rv-glass-graphite); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-material='glass'] { background: var(--rv-raised); }
}
@media (prefers-reduced-transparency: reduce) {
  [data-material='glass'] { background: var(--rv-raised); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Base de interação: hover só com mouse, foco só com teclado */
:where(button, [role='button'], a, input, select, textarea) { -webkit-tap-highlight-color: transparent; }
:where(button, [role='button']) { touch-action: manipulation; user-select: none; }
:where(input, select, textarea) { font-size: max(16px, 1rem); }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--rv-focus-ring); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}