/* ─────────────────────────────────────────────────────────────
   Tokens V-A — Project Peppe
   Espelho de .claude/ui-design/working/fase-2-tokens.md §4
   Placeholders declarados enquanto a Task B.1.3 (caminho A)
   não entregar medição pixel confiável.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Color / Surface ──────────────────────────────────────── */
  --color-surface-base: #F7F7F7;          /* off-white dominante */
  --color-surface-raised-top: #F7F7F7;    /* topo do gradiente raised — mesmo que surface-base, pra emergir suave */
  --color-surface-raised-bottom: #FBFBFB; /* base do gradiente raised — levemente mais clara */
  --color-surface-floating: #FBFBFB;      /* modal / popover — sólido, mais claro que base */
  --color-surface-carved: #F8F8F8;        /* fundo do cavado */
  --color-surface-divider: #ECECEC;       /* linha separadora / hairline */
  --color-surface-shell: #FFFFFF;         /* invólucro de navegação — sidebar + topbar; V-A puro */

  /* Bordas de superfície */
  --border-base: #EBEBEB;                 /* contorno sólido sutil da base */
  --border-raised-top: #FCFCFC;           /* borda raised — topo iluminado */
  --border-raised-bottom: #F8F8F8;        /* borda raised — base sombreada */
  --border-carved-top: #E8E8E8;           /* borda carved — topo em sombra (mais escuro que raised p/ enfatizar o sulco) */
  --border-carved-bottom: #FFFFFF;        /* borda carved — base iluminada */

  /* ── Color / Ink ──────────────────────────────────────────── */
  --color-ink-primary: #171717;       /* texto principal */
  --color-ink-secondary: #6B6B6B;     /* texto de apoio */
  --color-ink-tertiary: #A1A1A1;      /* texto desabilitado / caption */
  --color-ink-inverse: #F7F7F7;       /* texto sobre fundo escuro */

  /* ── Color / Functional ───────────────────────────────────── */
  --color-functional-success: #37A35A;
  --color-functional-alert: #D4A017;
  --color-functional-error: #C43D3D;
  --color-functional-info: #3875B0;

  /* Tints p/ chips de estado (fundo) */
  --color-functional-success-tint: #E8F2EC;
  --color-functional-alert-tint: #F6EEDA;
  --color-functional-error-tint: #F3E2E1;
  --color-functional-info-tint: #E2EAF2;

  /* ── Color / Accent V-B (tecla) ───────────────────────────────
     Paleta retrofuturista usada como acento em elemento contido.
     Origem: Figma do user, 2026-04-21. Placeholder declarado —
     valores serão cruzados com extração oficial do lote 3 V-B
     (Task B.4.1) quando o banco estiver curado.
     ──────────────────────────────────────────────────────────── */
  /* Socket — overlay ambient tint 20% (top→bottom, padding-box) */
  --color-tecla-socket-overlay-top: rgba(239, 239, 239, 0.2);    /* #EFEFEF 20% — tint de topo, evita leitura chapada */
  --color-tecla-socket-overlay-bottom: rgba(251, 251, 251, 0.2); /* #FBFBFB 20% — tint de base, par do raised-bottom */

  /* Rim — profundidade/lateral da tecla */
  --color-accent-rim: #5F0000;                  /* borgonha escuro — sombra tátil do âmbar */
  --color-accent-rim-border-top: #FFFFFF;       /* borda rim — topo iluminado */
  --color-accent-rim-border-bottom: #CECECE;    /* borda rim — base sombreada */

  /* Cap — topo do botão (rest) */
  --color-accent-amber-top: #F7692B;
  --color-accent-amber-bottom: #FA4C00;
  --color-accent-amber-border-top: #FF9567;
  --color-accent-amber-border-bottom: #FF4E00;

  /* Cap — hover (topo mais claro, gradiente normal — lighter top → darker bottom) */
  --color-accent-amber-hover-top: #FF986B;
  --color-accent-amber-hover-bottom: #FF7135;
  --color-accent-amber-hover-border-top: #FFA37B;
  --color-accent-amber-hover-border-bottom: #FF5E17;

  /* Cap — active: reutiliza o gradiente do rest (amber-top/bottom),
     o que muda é inset shadow (--shadow-tecla-pressed) + ausência de
     borda interna. Não existem tokens "active-*" — decisão 2026-04-21
     Figma atualizado do user. */

  /* Cap — disabled (dessaturado) */
  --color-accent-amber-disabled-top: #C9C9C9;
  --color-accent-amber-disabled-bottom: #B8B8B8;

  /* ── Radius / Tecla ────────────────────────────────────────
     Raios dedicados da tecla V-B.

     Large — geometria do Figma (65px de altura). 18px não cabe na
     escala regular (--radius-sm/md/lg/xl) — oddball. 16 e 12 são
     múltiplos de 4 (exceção aceita por anti-patterns.md §12).

     Medium — variante compacta (cap ≈ 40px, casa com .btn). Socket 52px.
     14/12/8 preserva o step 2/4 da large (18→16→12); 14 é oddball (par
     do 18 da large, mesmo desvio de mult-4); 12 e 8 respeitam mult-4.
     Cap 8 = --radius-sm, alinha com .btn na mesma row.
     ──────────────────────────────────────────────────────────── */
  --radius-tecla-socket: 18px;
  --radius-tecla-rim: 16px;
  --radius-tecla-cap: 12px;

  --radius-tecla-md-socket: 14px;
  --radius-tecla-md-rim: 12px;
  --radius-tecla-md-cap: 8px;

  /* ── Radius ───────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* ── Shadow ───────────────────────────────────────────────── */
  /* Direção fixa: luz vinda do canto superior esquerdo.
     Raised — tridimensionalidade direcional (não neumorphism simétrico):
     sombra fraca (5%) canto inf-dir + highlight forte (100%) canto sup-esq
     com gradientes de fundo e border sinalizando a direção.
     Floating — sombra única longa embaixo, sem highlight.
     Carved — sombra interna curta vindo de cima (borda superior do sulco). */
  --shadow-raised:
    8px 8px 24px 0 rgba(0, 0, 0, 0.05),
    -8px -8px 24px 0 rgba(255, 255, 255, 1);
  --shadow-floating:
    0 8px 40px 0 rgba(0, 0, 0, 0.08);
  --shadow-carved:
    inset 0 4px 16px 0 rgba(0, 0, 0, 0.08);

  /* Tecla — volume ao redor (rest state).
     Alinhado com o export Anima/Figma: #0000000d (≈5% preto) + #ffffff
     (branco opaco), blur 24, offset 8/8. Idêntico ao --shadow-raised
     em valores; existe como token separado pelo contrato semântico
     (tecla é peça distinta; mudanças futuras na gramática de cards não
     devem arrastar a tecla). Tentativas anteriores de suavizar via
     opacidade/blur/inset shadows fugiram da leitura que o Figma
     desenhou — voltamos aos valores originais. */
  --shadow-tecla:
    8px 8px 24px 0 rgba(0, 0, 0, 0.05),
    -8px -8px 24px 0 rgba(255, 255, 255, 1);
  --shadow-tecla-sm:
    4px 4px 12px 0 rgba(0, 0, 0, 0.05),
    -4px -4px 12px 0 rgba(255, 255, 255, 1);

  /* Tecla — sombra interna de "afundou" no active state.
     Figma atualizado 2026-04-21: inset 0 4px 8px rgba(0,0,0,0.2).
     Valor retrocede a normalização 8/8 inicial por decisão de design
     (user manipulou no Figma pra afinar a leitura de pressed). */
  --shadow-tecla-pressed:
    inset 0 4px 8px 0 rgba(0, 0, 0, 0.2);

  /* ── Type / Family ────────────────────────────────────────── */
  --type-family-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --type-family-serif: "Instrument Serif", "Times New Roman", Georgia, serif;

  /* ── Type / Weight ────────────────────────────────────────── */
  --type-weight-regular: 400;
  --type-weight-medium: 500;
  --type-weight-bold: 700;

  /* ── Type / Size (desktop) ────────────────────────────────── */
  --type-size-xs: 12px;
  --type-size-sm: 14px;
  --type-size-md: 16px;
  --type-size-lg: 20px;
  --type-size-xl: 40px;
  --type-size-display: 64px;
  --type-size-display-lg: 88px;

  /* ── Type / Tracking ──────────────────────────────────────── */
  --type-tracking-tight: -0.02em;
  --type-tracking-normal: 0;
  --type-tracking-loose: 0.08em;

  /* ── Type / Line-height ───────────────────────────────────── */
  --type-leading-tight: 1.1;
  --type-leading-snug: 1.3;
  --type-leading-normal: 1.5;

  /* ── Space (base 8) ───────────────────────────────────────── */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;  /* ajuste óptico para composições que pedem metade de --space-24 (ex.: grid 2-col com gap) */
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  /* ── Card ─────────────────────────────────────────────────── */
  --card-padding: var(--space-32);        /* padding interno padrão do Card */

  /* ── Icon ─────────────────────────────────────────────────── */
  --icon-stroke: 1.5px;
  --icon-size-sm: 16px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;

  /* ── Layout ───────────────────────────────────────────────── */
  --container-max: 1280px;
  --container-pad: var(--space-48);
  --header-height: 64px;

  /* ── Touch target ─────────────────────────────────────────── */
  --touch-target-md: 40px;   /* botão interativo mínimo — hamburger e similares */

  /* ── Swatch ───────────────────────────────────────────────── */
  --swatch-size-md: 48px;    /* swatch padrão — tabelas de token */
  --swatch-size-sm: 24px;    /* swatch compacto — tabelas de contraste */

  /* ── Layering ─────────────────────────────────────────────── */
  --z-topbar:  20;   /* barra mobile sticky */
  --z-overlay: 30;   /* overlay escuro do drawer */
  --z-drawer:  40;   /* sidebar off-canvas */

  /* ── Motion ───────────────────────────────────────────────── */
  --duration-micro: 80ms;    /* transições instantâneas — links, hovers */
  --duration-panel: 200ms;   /* painéis, drawers, overlays */

  /* ── Color / Overlay ──────────────────────────────────────── */
  --color-overlay: rgba(23, 23, 23, 0.32);   /* backdrop do drawer mobile */

  /* ── Color / Nav ──────────────────────────────────────────── */
  /* Tints de estado para itens de nav — derivados de ink-primary em alfa baixo.
     Intensidade escalonada: active (5%) > hover (3%).
     O tint não é o sinal principal — reforça a borda-esquerda 2px.
     Namespace nav/ em color/ (fora de surface/) porque são estados de
     interação de componente, não materialidades de superfície — alinhado
     com o padrão de --color-overlay que já existe solto neste namespace. */
  --color-nav-active: rgba(23, 23, 23, 0.05);  /* item selecionado — 5% ink-primary */
  --color-nav-hover:  rgba(23, 23, 23, 0.03);  /* hover N1 — 3% ink-primary */

  /* ── Accessibility ────────────────────────────────────────── */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
}

/* Breakpoints responsivos — ajustes pontuais de escala */
@media (max-width: 1024px) {
  :root {
    --type-size-xl: 32px;           /* tablet + mobile ambos em 32 */
    --type-size-display: 56px;      /* tablet + mobile ambos em 56 */
    --container-pad: var(--space-32);
    /* --type-size-display-lg permanece 88px em tablet */
  }
}

@media (max-width: 768px) {
  :root {
    --container-pad: var(--space-24);
    /* --type-size-xl já em 32 pelo breakpoint acima, fica 32 em mobile */
    /* --type-size-display já em 56 pelo breakpoint acima, fica 56 em mobile */
    /* --type-size-display-lg permanece 88px em mobile */
  }
}