/* =====================================================================
   DESIGN SYSTEM — Tokens
   Thiago Barbosa · Digital Portfolio
   Base escura, azul elétrico e ciano. Superfícies translúcidas com
   profundidade controlada. Todos os valores usados no projeto vivem aqui.
   ===================================================================== */

:root {
  /* ---- Cores: base ---- */
  --void:        #04060b;   /* fundo absoluto */
  --graphite:    #0a0f18;   /* fundo de seção alternada */
  --surface:     #0e1523;   /* cards e superfícies */
  --surface-2:   #131c2d;   /* superfície elevada */
  --deep-blue:   #0d1b33;   /* azul escuro de apoio */

  /* ---- Cores: marca ---- */
  --blue:        #2f6bff;   /* azul elétrico — ação primária */
  --blue-soft:   #5b8cff;
  --cyan:        #22d3ee;   /* ciano — destaque e dados */
  --cyan-deep:   #0891a8;

  /* ---- Cores: texto ---- */
  --ink:         #eaf0fa;   /* texto principal */
  --ink-2:       #b9c6da;   /* texto secundário */
  --muted:       #7d8da6;   /* texto de apoio */
  --faint:       #4e5c73;   /* legendas e metadados */

  /* ---- Cores: estado ---- */
  --ok:          #35d07f;
  --warn:        #f5b544;
  --danger:      #f2545b;

  /* ---- Linhas e véus ---- */
  --line:        rgba(146, 173, 214, 0.13);
  --line-strong: rgba(146, 173, 214, 0.24);
  --glass:       rgba(18, 26, 42, 0.62);
  --glass-hi:    rgba(24, 34, 54, 0.78);
  --overlay:     rgba(4, 6, 11, 0.78);

  /* ---- Gradientes (uso contido) ---- */
  --grad-brand:  linear-gradient(118deg, var(--blue) 0%, var(--cyan) 100%);
  --grad-edge:   linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent);
  --grad-veil:   radial-gradient(120% 90% at 50% -20%, rgba(47, 107, 255, 0.20), transparent 62%);

  /* ---- Tipografia ---- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Escala tipográfica — razão 1.25 com ajuste fluido */
  --fs-2xs:  0.6875rem;   /* 11px — telemetria */
  --fs-xs:   0.78125rem;  /* 12.5px */
  --fs-sm:   0.875rem;    /* 14px */
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   clamp(1.25rem, 0.9rem + 1vw, 1.5rem);
  --fs-xl:   clamp(1.5rem, 1.05rem + 1.6vw, 2rem);
  --fs-2xl:  clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem);
  --fs-3xl:  clamp(2.4rem, 1.4rem + 4vw, 4.25rem);

  --lh-tight: 1.08;
  --lh-snug:  1.28;
  --lh-base:  1.68;

  --ls-tight: -0.022em;
  --ls-wide:  0.08em;

  /* ---- Espaçamento — escala de 4px ---- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  --section-y: clamp(4rem, 8vw, 7.5rem);
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --maxw:      1240px;
  --maxw-text: 68ch;

  /* ---- Raios ---- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  32px;
  --r-pill: 999px;

  /* ---- Sombras e brilho ---- */
  --sh-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-md:   0 12px 30px -14px rgba(0, 0, 0, 0.85);
  --sh-lg:   0 34px 70px -30px rgba(0, 0, 0, 0.92);
  --glow-blue: 0 0 0 1px rgba(47, 107, 255, 0.35), 0 14px 44px -18px rgba(47, 107, 255, 0.55);
  --glow-cyan: 0 0 0 1px rgba(34, 211, 238, 0.32), 0 14px 44px -18px rgba(34, 211, 238, 0.45);

  /* ---- Movimento ---- */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 520ms;
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Camadas ---- */
  --z-canvas: 0;
  --z-base:   1;
  --z-sticky: 50;
  --z-header: 100;
  --z-float:  200;
  --z-modal:  300;
}

/* Área do Moto Grupo — sobrescreve o acento mantendo a mesma estrutura */
[data-theme="moto"] {
  --blue:      #c8442f;
  --blue-soft: #e0664f;
  --cyan:      #f0a742;
  --cyan-deep: #b87a1e;
  --grad-brand: linear-gradient(118deg, #c8442f 0%, #f0a742 100%);
  --grad-veil:  radial-gradient(120% 90% at 50% -20%, rgba(200, 68, 47, 0.22), transparent 62%);
  --glow-blue: 0 0 0 1px rgba(200, 68, 47, 0.38), 0 14px 44px -18px rgba(200, 68, 47, 0.5);
}