/**
 * MEDAILY OFFICIAL DESIGN TOKENS (CDN READY)
 * Central Oficial de Tokens, Tipografia Híbrida e Sistema Cromático Tenebrista
 *
 * Padrões Oficiais:
 * - Paleta: Tenebrismo e Foco Absoluto (Preto Quente, Ouro Velho, Umbra, Giz)
 * - Tipografia Híbrida: Fraunces (Display) / Lora (Editorial) / Open Sans (UI) / JetBrains Mono (Métricas)
 * - Escala Tipográfica: 85% Compacto (13.6px base)
 */

/* Importação Otimizada das 4 Famílias Oficiais */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,400;1,9..144,600&family=JetBrains+Mono:wght@400;500;600;700&family=Lora:ital,wght@0,500;0,600;0,700;1,400;1,600&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* 1. Sistema Tipográfico Híbrido Oficial */
  --font-serif-display: 'Fraunces', Georgia, serif;
  --font-editorial: 'Lora', Georgia, serif;
  --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* 2. Escala Tipográfica Oficial: 85% (Compacto - Base 13.6px) */
  --font-scale: 0.85;
  --font-size-base: 0.85rem;           /* 13.6px na raiz de 16px */
  --font-size-display: 2.125rem;       /* 34px (2.5rem na escala 85% = ~34px) */
  --line-height-display: 1.15;
  --font-size-h2: 1.5rem;              /* 24px */
  --line-height-h2: 1.25;
  --font-size-h3: 1.125rem;            /* 18px */
  --line-height-h3: 1.35;
  --font-size-editorial: 0.875rem;     /* 14px */
  --line-height-editorial: 1.6;
  --font-size-ui: 0.85rem;             /* 13.6px (1.0rem base Medaily) */
  --line-height-ui: 1.5;
  --font-size-caption: 0.6875rem;      /* 11px */
  --line-height-caption: 1.4;
  --letter-spacing-caption: 0.05em;
  --font-size-data: 0.75rem;           /* 12px */
  --line-height-data: 1.5;

  /* 3. Espaçamentos Universais */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* 4. Raios de Borda */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* 5. Transições */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* 6. Cores Brutas (Raw Brand Colors) */
  --brand-raw-c1: #0D0B0A; /* Preto Quente */
  --brand-raw-c2: #D4AF37; /* Ouro Velho */
  --brand-raw-c3: #3A2318; /* Umbra Escura */
  --brand-raw-c4: #F2EBE1; /* Branco Giz */

  /* 7. Sistema Cromático Primário: Tenebrismo e Foco Absoluto (Modo Escuro) */
  --color-bg: #0D0B0A;
  --color-surface: #181412;
  --color-surface-elevated: #261F1C;
  --color-surface-subtle: #13100E;
  --color-border: rgba(212, 175, 55, 0.28);
  --color-border-subtle: rgba(242, 235, 225, 0.08);
  --color-text: #F2EBE1;
  --color-text-muted: #BFB4A7;
  --color-text-dim: #797167;
  --color-primary: #D4AF37;
  --color-primary-hover: #E7C455;
  --color-primary-text: #0D0B0A;
  --color-secondary: #573626;
  --color-secondary-hover: #6E4430;
  --color-secondary-text: #FFFFFF;
  --color-accent: #D4AF37;
  --color-accent-glow: rgba(212, 175, 55, 0.35);
  --badge-bg: rgba(212, 175, 55, 0.14);
  --badge-text: #E7C455;
}

/* Modo Claro Oficial (Pergaminho Editorial para Impressão e Relatórios) */
[data-theme="light"] {
  --color-bg: #EAE3D7;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #F5EFE5;
  --color-surface-subtle: #E2D9CB;
  --color-border: rgba(13, 11, 10, 0.18);
  --color-border-subtle: rgba(13, 11, 10, 0.08);
  --color-text: #0D0B0A;
  --color-text-muted: #5C544F;
  --color-text-dim: #948B84;
  --color-primary: #0D0B0A;
  --color-primary-hover: #26211E;
  --color-primary-text: #FFFFFF;
  --color-secondary: #3A2318;
  --color-secondary-hover: #271710;
  --color-secondary-text: #FFFFFF;
  --color-accent: #B89223;
  --color-accent-glow: rgba(184, 146, 35, 0.25);
  --badge-bg: rgba(184, 146, 35, 0.15);
  --badge-text: #886810;
}

/* Estilização Oficial do Logotipo: Prefixo "med" em Destaque Cirúrgico Legível */
.logo-wm-med {
  color: var(--color-primary, #D4AF37);
  font-weight: 700;
  transition: color var(--transition-fast);
}

.logo-wm-aily {
  color: var(--color-text, #F2EBE1);
  font-weight: 400;
  opacity: 0.95;
}