/* ============================================================
   SKYMP — DESIGN SYSTEM · TOKENS
   Servidor de Skyrim RP
   Direção: fantasia sombria nórdica · ouro forjado + arcano teal
   Inspiração (não-cópia): Elder Scrolls / Keizaal / Oblivion Remastered
   Fontes: 100% open-source (Cinzel, EB Garamond, MedievalSharp, Inter)
   ============================================================ */

:root {
  /* -------------------------------------------------------
     1. COR — ESCALAS BRUTAS (raw palette)
     ------------------------------------------------------- */

  /* Ink / Stone — fundos (do quase-preto ao ardósia) */
  --ink-900: #050506;   /* fundo base / vazio */
  --ink-800: #0b0b0d;   /* superfície primária */
  --ink-700: #121215;   /* card / painel */
  --ink-600: #1a1a1f;   /* card elevado / hover */
  --ink-500: #24242b;   /* borda forte / divisor */
  --ink-400: #34343d;   /* borda / stroke */
  --ink-300: #4a4a55;   /* desabilitado */

  /* Parchment — textos (pergaminho envelhecido) */
  --parch-50:  #f4efe4;  /* título máximo */
  --parch-100: #e9e2d2;  /* texto forte */
  --parch-200: #cdc4b2;  /* texto corpo */
  --parch-300: #9c9484;  /* texto secundário / legenda */
  --parch-400: #6b6558;  /* texto fraco / placeholder */

  /* Gold — âmbar forjado (acento PRIMÁRIO / marca) */
  --gold-100: #f3dca6;
  --gold-200: #e6c06a;
  --gold-300: #d4a34a;   /* âncora da marca */
  --gold-400: #c89635;   /* base (ref. Keizaal) */
  --gold-500: #a2761f;
  --gold-600: #6e4f12;   /* sombra / borda escura */

  /* Ether — teal arcano (acento SECUNDÁRIO / magia, portais) */
  --ether-100: #b9fbf6;
  --ether-200: #6fe9e0;
  --ether-300: #22d3c7;
  --ether-400: #0ceae2;  /* brilho (ref. Oblivion) */
  --ether-500: #00a499;  /* base sólida */
  --ether-600: #0a6f68;

  /* Blood — vermelho daédrico (perigo / destrutivo / PvP) */
  --blood-300: #e0674f;
  --blood-400: #c8412a;
  --blood-500: #9a2a18;

  /* Feedback funcional */
  --success: #4ea86b;    /* online */
  --success-glow: #6fe08c;
  --warning: #e0a83a;
  --danger:  #c8412a;
  --info:    #00a499;

  /* -------------------------------------------------------
     2. COR — PAPÉIS SEMÂNTICOS (semantic tokens)
     Use SEMPRE estes nos componentes, nunca a escala bruta.
     ------------------------------------------------------- */
  --bg:              var(--ink-900);
  --bg-surface:      var(--ink-800);
  --bg-card:         var(--ink-700);
  --bg-card-hover:   var(--ink-600);
  --bg-inset:        #030304;

  --border:          var(--ink-400);
  --border-soft:     rgba(233, 226, 210, 0.10); /* borda "vidro" (ref. Oblivion 15%) */
  --border-strong:   var(--ink-500);
  --border-gold:     rgba(200, 150, 53, 0.45);

  --text:            var(--parch-200);
  --text-strong:     var(--parch-100);
  --text-title:      var(--parch-50);
  --text-muted:      var(--parch-300);
  --text-faint:      var(--parch-400);
  --text-on-gold:    #1a1206;   /* texto sobre botão dourado sólido */
  --text-on-ether:   #04211f;

  --accent:          var(--gold-300);
  --accent-hover:    var(--gold-200);
  --accent-press:    var(--gold-400);
  --accent-2:        var(--ether-400);  /* arcano */

  --focus-ring:      rgba(212, 163, 74, 0.55);

  /* -------------------------------------------------------
     3. TIPOGRAFIA
     ------------------------------------------------------- */
  /* --- Stack final (escolhidas: Cinzel Decorative + MedievalSharp) --- */
  /* Ornamental ★ — MARCA, logo, títulos-herói (poucas palavras) */
  --font-ornate: "Cinzel Decorative", "Cinzel", Georgia, serif;
  /* Display / Títulos de interface — Cinzel em CAIXA ALTA (legível, limpo) */
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  /* Sabor / flavor ★ — manuscrita medieval (kickers, nomes de missão, placas, tooltips) */
  --font-flavor: "MedievalSharp", "Cinzel", serif;
  /* Corpo longo / lore — serifa humanista */
  --font-serif: "EB Garamond", Georgia, "Times New Roman", serif;
  /* UI / interface — sans neutra e legível */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Números / stats mono-tabular */
  --font-numeric: "Inter", ui-monospace, monospace;

  /* Escala tipográfica (modular ~1.25) */
  --fs-display: clamp(2.5rem, 6vw, 4.5rem); /* Hero: "ANSWER THE CALL" */
  --fs-h1: clamp(2rem, 4vw, 3rem);
  --fs-h2: 2rem;
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-lg: 1.125rem;
  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;      /* labels / eyebrow */

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;      /* lore / leitura longa */

  --tracking-display: -0.01em; /* serifa display: tracking levemente negativo */
  --tracking-label: 0.22em;    /* eyebrow / label em caixa alta */
  --tracking-wide: 0.08em;

  /* -------------------------------------------------------
     4. ESPAÇAMENTO (escala base 4px)
     ------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* -------------------------------------------------------
     5. FORMA — raio, borda, hexágono
     ------------------------------------------------------- */
  --radius-sm: 2px;   /* estética "forjada": cantos quase retos */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --border-w: 1px;
  --border-w-strong: 2px;

  /* recorte hexagonal (botões / molduras "escudo") */
  --clip-hex: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
  --clip-notch: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));

  /* -------------------------------------------------------
     6. ELEVAÇÃO / SOMBRA / BRILHO
     ------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.6);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.65);
  --glow-gold: 0 0 24px rgba(212, 163, 74, 0.35);
  --glow-ether: 0 0 28px rgba(12, 234, 226, 0.30);
  --inset-line: inset 0 1px 0 rgba(255,255,255,0.04);

  /* -------------------------------------------------------
     7. MOVIMENTO
     ------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* -------------------------------------------------------
     8. LAYOUT
     ------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 760px;
  --header-h: 72px;
}