/* ================================================================
   MARCUS ROLIM — DESIGN SYSTEM VARIABLES
   Portal Profissional: marcusrolim.com.br
   Gestão + Educação + Tecnologia
   ================================================================ */

:root {
  /* -------------------------------------------------------------
     1. PALETA DE CORES PRINCIPAL (Identidade Dark Oficial MR)
     ------------------------------------------------------------- */
  --color-background: #121212;
  --color-surface: #2E2E2E;
  --color-primary: #FF695B;
  --color-text: #F4F4F4;
  --color-secondary: #3A7CA5;

  /* Variações de Profundidade & Superfícies */
  --color-bg-deep: #0A0A0A;
  --color-surface-elevated: #242424;
  --color-surface-card: #1C1C1C;
  --color-surface-hover: #363636;
  --color-glass-header: rgba(18, 18, 18, 0.88);
  --color-glass-sheet: rgba(18, 18, 18, 0.96);

  /* Variantes Coral (#FF695B - Destaque Estratégico Cirúrgico) */
  --color-primary-hover: #FF8275;
  --color-primary-active: #E05346;
  --color-primary-glow: rgba(255, 105, 91, 0.25);
  --color-primary-subtle: rgba(255, 105, 91, 0.12);
  --color-primary-border: rgba(255, 105, 91, 0.35);

  /* Variantes Azul Técnico (#3A7CA5 - Tecnologia & Estrutura) */
  --color-secondary-hover: #4C94C1;
  --color-secondary-active: #2C6385;
  --color-secondary-glow: rgba(58, 124, 165, 0.25);
  --color-secondary-subtle: rgba(58, 124, 165, 0.12);
  --color-secondary-border: rgba(58, 124, 165, 0.35);

  /* Hierarquia de Texto */
  --color-text-primary: #F4F4F4;
  --color-text-muted: rgba(244, 244, 244, 0.72);
  --color-text-subtle: rgba(244, 244, 244, 0.45);
  --color-text-dim: rgba(244, 244, 244, 0.25);

  /* Bordas & Divisores */
  --border-hairline: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.14);
  --border-rule: rgba(255, 255, 255, 0.20);
  --border-active: rgba(255, 105, 91, 0.45);

  /* Feedback Semântico */
  --color-success: #4BD888;
  --color-warning: #FFB347;
  --color-error: #FF4D4D;
  --color-info: #3A7CA5;

  /* -------------------------------------------------------------
     2. TIPOGRAFIA & FONT STACKS
     ------------------------------------------------------------- */
  --font-display: "Space Grotesk", "General Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: "Onest", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-tag: "Mulish", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;

  /* Escala Modular */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1.0rem;    /* 16px */
  --text-md: 1.125rem;   /* 18px */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.5rem;     /* 24px */
  --text-2xl: 1.875rem;  /* 30px */
  --text-3xl: 2.25rem;   /* 36px */
  --text-4xl: 3.0rem;    /* 48px */
  --text-display: clamp(2.1rem, 4.2vw, 3.8rem);

  /* -------------------------------------------------------------
     3. DIMENSÕES & CONTAINER
     ------------------------------------------------------------- */
  --container-max: 1240px;
  --container-narrow: 860px;
  --header-height: 72px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* Transições Suaves */
  --transition-fast: 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-normal: 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-spring: 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}