/* ===================================================================
   FreeDoc$ — Design System :: Colors & Type
   Identidade do evento "FreeDoc$ Experience"
   Preto texturizado · Laranja vibrante (gradiente) · Prata cromado
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Archivo+Black&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --orange:        #FF6E14;  /* laranja primário da marca */
  --orange-bright: #FF6400;  /* laranja vivo (picos de saturação) */
  --orange-deep:   #E8530A;  /* laranja escuro / base do gradiente */
  --orange-ember:  #C24400;  /* brasa — sombras quentes */
  --gold:          #FFB347;  /* topo do gradiente, brilho dourado */
  --gold-hi:       #FFD089;  /* realce dourado / luz especular */

  /* ---------- METAL / PRATA ---------- */
  --silver-hi:   #FCFCFD;  /* realce cromado quase branco */
  --silver:      #D7DADF;  /* prata claro */
  --silver-mid:  #A8ABB2;  /* prata médio */
  --silver-dark: #5B5E66;  /* prata escuro / sombra do metal */

  /* ---------- BACKGROUNDS (preto texturizado) ---------- */
  --bg-0:    #060607;  /* preto absoluto — fundo principal */
  --bg-1:    #0C0C0E;  /* preto elevado */
  --bg-2:    #15151A;  /* painel / card charcoal */
  --bg-3:    #1E1E24;  /* card elevado / hover */
  --bg-line: #2A2A31;  /* hairlines / bordas sutis */

  /* ---------- FOREGROUND / TEXTO ---------- */
  --fg-1: #F4F4F6;  /* texto principal (branco quente) */
  --fg-2: #C2C2C8;  /* texto secundário / corpo */
  --fg-3: #8A8A92;  /* texto terciário / legendas */
  --fg-4: #5C5C63;  /* desabilitado / placeholder */

  /* ---------- SEMÂNTICAS ---------- */
  --accent:       var(--orange);
  --accent-soft:  rgba(255,110,20,0.14);
  --accent-line:  rgba(255,110,20,0.45);
  --success: #3FBF7F;
  --danger:  #FF4D4D;
  --on-accent: #120A03;  /* texto sobre laranja sólido */

  /* ---------- GRADIENTES ---------- */
  /* Letras "Free" / destaques laranja */
  --grad-orange: linear-gradient(180deg, #FFC062 0%, #FF8A22 42%, #F26410 72%, #D14600 100%);
  --grad-orange-flat: linear-gradient(180deg, #FF8A22 0%, #E8530A 100%);
  /* Cromado "Doc$" / números — banda especular no meio */
  --grad-chrome: linear-gradient(180deg, #FDFDFE 0%, #DDE0E5 30%, #9DA0A8 52%, #7E818A 58%, #C9CCD2 78%, #EEF0F3 100%);
  /* Feixes de luz diagonais (raios laranja) */
  --grad-beam: linear-gradient(180deg, rgba(255,150,40,0) 0%, #FF8A22 45%, #FFC062 50%, #FF8A22 55%, rgba(255,150,40,0) 100%);
  /* Fundo da marca — vinheta radial + brilho quente */
  --grad-bg: radial-gradient(120% 90% at 50% 18%, #1A1A1F 0%, #0C0C0E 55%, #060607 100%);
  --grad-bg-warm: radial-gradient(90% 70% at 78% 80%, rgba(255,110,20,0.16) 0%, rgba(255,110,20,0) 60%), var(--grad-bg);

  /* ---------- SOMBRAS / GLOW ---------- */
  --shadow-card: 0 18px 48px -16px rgba(0,0,0,0.75);
  --shadow-deep: 0 32px 80px -24px rgba(0,0,0,0.85);
  --glow-orange: 0 0 28px rgba(255,120,30,0.45), 0 0 8px rgba(255,150,50,0.35);
  --glow-orange-soft: 0 0 60px rgba(255,110,20,0.22);
  --inset-metal: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -2px 4px rgba(0,0,0,0.4);

  /* ---------- RAIOS / ESPAÇO ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;  --sp-9: 96px;

  /* ---------- TIPOGRAFIA — FAMÍLIAS ---------- */
  /* Wordmark/logo: aproximação do logotipo cromado (use o PNG quando possível) */
  /* Archivo Black = sans pesada e quadrada, próxima do lettering original */
  --font-logo: 'Archivo Black', 'Montserrat', system-ui, sans-serif;
  /* Workhorse: títulos, corpo, eyebrows */
  --font-sans: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* ---------- ESCALA TIPOGRÁFICA ---------- */
  --t-eyebrow: 600 14px/1.2 var(--font-sans);   /* SAVE THE DATE — tracking largo */
  --t-display: 800 72px/0.98 var(--font-sans);  /* hero */
  --t-h1: 800 48px/1.02 var(--font-sans);
  --t-h2: 800 34px/1.08 var(--font-sans);
  --t-h3: 700 24px/1.2 var(--font-sans);
  --t-lead: 400 20px/1.5 var(--font-sans);
  --t-body: 400 16px/1.6 var(--font-sans);
  --t-small: 500 13px/1.5 var(--font-sans);
  --t-label: 600 12px/1.3 var(--font-sans);

  --track-eyebrow: 0.42em;  /* espaçamento das eyebrows (SAVE THE DATE) */
  --track-caps:    0.16em;  /* uppercase geral (EXPERIENCE) */
}

/* ===================================================================
   ELEMENTOS SEMÂNTICOS BASE
   =================================================================== */
.fd-eyebrow {
  font: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--fg-3);
}
h1, .fd-h1 { font: var(--t-h1); color: var(--fg-1); letter-spacing: -0.01em; }
h2, .fd-h2 { font: var(--t-h2); color: var(--fg-1); letter-spacing: -0.01em; }
h3, .fd-h3 { font: var(--t-h3); color: var(--fg-1); }
.fd-lead { font: var(--t-lead); color: var(--fg-2); }
p, .fd-body { font: var(--t-body); color: var(--fg-2); }
.fd-caps { text-transform: uppercase; letter-spacing: var(--track-caps); }

/* Texto preenchido com gradiente laranja */
.fd-text-orange {
  background: var(--grad-orange);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Texto cromado/prata */
.fd-text-chrome {
  background: var(--grad-chrome);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}