/* ============================================================
   PCD HUB — tokens.css (v3 · Onda 2)
   Fonte: skill pcd-hub-brand v3 (bloco reproduzido exatamente)
   + tokens estruturais herdados do site atual (compatíveis v3)
   + tokens de motion (novos, Onda 2)
   ============================================================ */

:root {
  /* ---------- Bloco oficial do skill pcd-hub-brand (v3) ---------- */
  /* Institucional */
  --pcd-navy: #0A1047;
  --pcd-orange: #F25C05;
  --pcd-cyan: #00A5CF;
  --pcd-cream: #FFECE5;          /* uso pontual */
  --pcd-violet: #525DC0;         /* nunca em texto */
  --pcd-ink: #090808;

  /* Bases neutras (v3) */
  --pcd-white: #FFFFFF;
  --pcd-off-white: #FDFBF7;      /* fundo padrão */
  --pcd-snow: #F0F2F5;           /* separadores */

  /* Sub-paleta clínica (Care) */
  --pcd-sky: #A8D5E2;
  --pcd-sage: #C7E0C0;
  --pcd-lavender: #E8E1F0;
  --pcd-success: #5BA88A;
  --pcd-amber: #E8B86D;

  /* Tipografia */
  --font-display: 'Luciole', 'Atkinson Hyperlegible', sans-serif;
  --font-body: 'Comfortaa', 'Inter', sans-serif;

  /* ---------- Complementos v3 (derivados do skill) ---------- */
  --pcd-error-muted: #3A3D5C;    /* regressão clínica — nunca vermelho puro */
  --pcd-mint: #9FFFCB;           /* deprecado — só celebração pontual */
  --pcd-focus: var(--pcd-orange);/* outline de foco 3px obrigatório */

  /* ---------- Estruturais (herdados do site atual) ---------- */
  --text-sm: .875rem;  --text-base: 1rem;   --text-lg: 1.125rem;
  --text-xl: 1.25rem;  --text-2xl: 1.5rem;  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem; --text-5xl: 3rem;    --text-6xl: 3.75rem;
  --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.625;

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem;  --space-12: 3rem;  --space-16: 4rem;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-full: 9999px;

  --shadow-card: 0 2px 12px rgba(10,16,71,.06);
  --shadow-lifted: 0 10px 30px rgba(10,16,71,.10);

  --max-width: 1200px;
  --max-width-prose: 72ch;

  /* ---------- Motion tokens (novos — Onda 2) ---------- */
  --motion-fast: 150ms;   /* hover, toggle, feedback imediato */
  --motion-base: 250ms;   /* transição de estado, entrada de tooltip/dropdown */
  --motion-slow: 400ms;   /* reveals, modal, surface da Ampara */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* padrão — natural */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);          /* entradas */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);           /* saídas */
  /* Regra: nada elástico/bouncy em contexto clínico. */

  /* Aliases usados pelo template do blog (base.css/components.css/pages.css) —
     nomes referenciados nesses arquivos que nunca tinham sido declarados aqui.
     Sem eles, var() cai em "unset": color herda do body (mascara o problema
     às vezes) mas background/shadow/space/z-index somem de verdade —
     ex.: botões e tabelas --color-navy com texto --color-white ficavam
     invisíveis (navy sobre navy) antes desta correção. */
  --transition-fast: var(--motion-fast) var(--ease-out);
  --transition-base: var(--motion-base) var(--ease-out);
  --transition-slow: var(--motion-slow) var(--ease-out);

  --color-navy: var(--pcd-navy);
  --color-navy-mid: #363B68;
  --color-navy-alpha-06: rgba(10,16,71,.06);
  --color-navy-alpha-08: rgba(10,16,71,.08);
  --color-navy-alpha-12: rgba(10,16,71,.12);
  --color-navy-alpha-40: rgba(10,16,71,.40);
  --color-white: var(--pcd-white);
  --color-surface: var(--pcd-white);
  --color-sand: var(--pcd-off-white);
  --color-muted: #64748B;
  --color-muted-dark: var(--pcd-error-muted);
  --color-muted-light: #94A3B8;
  --color-teal: var(--pcd-cyan);
  --color-teal-dark: #0E7490;
  --color-teal-light: var(--pcd-sky);
  --color-orange-dark: #D14E00;
  --color-danger: #F43F5E;
  --color-warning: #F97316;

  --font-mono: 'SF Mono', 'Menlo', 'Consolas', monospace;
  --gradient-signature: linear-gradient(135deg, var(--pcd-navy) 0%, var(--pcd-cyan) 100%);
  --gradient-teal: linear-gradient(135deg, var(--pcd-cyan) 0%, var(--pcd-sky) 100%);

  --radius-2xl: 24px;
  --shadow-xs: 0 1px 2px rgba(10,16,71,.04);
  --shadow-sm: 0 1px 4px rgba(10,16,71,.06);
  --shadow-md: var(--shadow-card);
  --shadow-lg: 0 6px 20px rgba(10,16,71,.08);
  --shadow-xl: var(--shadow-lifted);

  --text-xs: .75rem;
  --leading-snug: 1.35;
  --tracking-wide: .05em;
  --tracking-widest: .1em;

  --space-5: 1.25rem; --space-7: 1.75rem; --space-10: 2.5rem;
  --space-20: 5rem;   --space-32: 8rem;

  --z-sticky: 100;
  --z-modal: 200;
  --container-px: 24px;
}

/* Marca — leve escala no hover/focus do logo (cabeçalho das páginas que não
   usam o template.js/components.css, que já tem sua própria regra em .nav-logo) */
a[aria-label="PCD Hub — início"] {
  display: inline-flex;
  transition: transform var(--motion-fast) var(--ease-out);
}
a[aria-label="PCD Hub — início"]:hover,
a[aria-label="PCD Hub — início"]:focus-visible {
  transform: scale(1.045);
}

/* prefers-reduced-motion: obrigatório — desliga tudo */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}