/* tokens.css — Design System Everson Filipe Portfolio
   Importar PRIMEIRO, antes de qualquer outro CSS.
   Nunca usar cores ou valores hardcoded fora deste arquivo.
-------------------------------------------------- */

@font-face {
  font-family: 'Glacial Indifference';
  src: url('../fonts/GlacialIndifference-Regular.otf') format('opentype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Glacial Indifference';
  src: url('../fonts/GlacialIndifference-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Libre Baskerville';
  src: url('../fonts/LibreBaskerville-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('../fonts/LibreBaskerville-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('../fonts/LibreBaskerville-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Superfícies ───────────────────────────────── */
  --color-bg-base:        #374f5b;
  --color-bg-deep:        #1e2d35;
  --color-bg-raised:      #435f6e;
  --color-bg-overlay:     rgba(30, 45, 53, 0.85);

  /* ── Texto ─────────────────────────────────────── */
  --color-text-primary:   #f5f9fb;
  --color-text-muted:     #b6ccd7;
  --color-text-inverse:   #1e2d35;

  /* ── Acentos ────────────────────────────────────── */
  --color-accent-electric:      #233dff;              /* decorativo: bordas, glows, dots */
  --color-accent-electric-dim:  rgba(35, 61, 255, 0.12);
  --color-accent-electric-text: #8099ff;              /* texto sobre bg-base (contraste 3:1) */
  --color-accent-electric-deep: #233dff;              /* texto sobre bg-deep (legivel) */
  --color-accent-mist:          #b6ccd7;
  --color-accent-mist-dim:      rgba(182, 204, 215, 0.15);

  /* ── Semântica ──────────────────────────────────── */
  --color-success:  #4ade80;
  --color-warning:  #fbbf24;
  --color-error:    #f87171;
  --color-info:     #60a5fa;

  /* ── Tipografia ─────────────────────────────────── */
  --font-primary: 'Glacial Indifference', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
  --font-secondary: 'Libre Baskerville', Georgia, serif;

  --font-weight-default:  300;
  --font-weight-emphasis: 700;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.75rem;
  --text-xl:   2.5rem;
  --text-2xl:  3.5rem;
  --text-3xl:  5rem;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.08em;
  --tracking-widest:   0.2em;

  --leading-tight:   1.15;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* ── Espaçamento ────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;
  --space-32:  128px;
  --space-48:  192px;

  /* ── Grid ───────────────────────────────────────── */
  --grid-max-w:   1200px;
  --grid-content: 720px;
  --grid-gutter:  var(--space-6);

  /* ── Bordas & Raios ─────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  --border-thin:   1px solid rgba(182, 204, 215, 0.18);
  --border-accent: 1px solid rgba(35, 61, 255, 0.4);

  /* ── Elevação ───────────────────────────────────── */
  --shadow-card:  0 1px 3px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.2);
  --shadow-float: 0 8px 32px rgba(0,0,0,0.4);
  --glow-accent:  0 0 24px rgba(35, 61, 255, 0.25);

  /* ── Motion ─────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --ease-out:        cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:     cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Acessibilidade: desabilitar animações se o usuário preferir */
@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;
  }
}