/* =========================================================
   FULLGASOL · DESIGN SYSTEM
   Cores tiradas da fachada (grafite texturizado + letreiro verde),
   da logo (cromado + verde neon) e das artes do Instagram.
   ========================================================= */
:root {
  color-scheme: dark;

  /* Grafite — fachada e fundo */
  --carbon: #050607;          /* fundo da página */
  --graphite-950: #0a0c0d;
  --graphite-900: #0f1214;
  --graphite-800: #151a1d;
  --graphite-700: #1d2327;
  --graphite-600: #283035;

  /* Metal — cromado da logo */
  --steel-600: #4e585e;
  --steel-500: #6c777e;
  --steel-400: #8d979d;
  --steel-300: #b3bbc0;
  --steel-200: #d3d9dc;
  --steel-100: #eceff0;
  --ink: #f4f7f6;             /* texto principal */
  --ink-soft: #b9c2c6;        /* texto secundário */
  --ink-mute: #7e898f;

  /* Verde Fullgasol — só como acento */
  --green: #35e07f;
  --green-hi: #8af5b9;
  --green-mint: #63e3b0;      /* tom do letreiro da fachada */
  --green-deep: #0c6b3a;
  --green-ink: #03200f;       /* texto sobre botão verde */
  --green-glow: rgba(53, 224, 127, 0.35);
  --green-line: rgba(53, 224, 127, 0.45);

  --amber: #ffb547;           /* alerta do diagnóstico */
  --red-tail: #ff3b3b;

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --glass: rgba(16, 20, 22, 0.62);

  /* Tipografia */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  --font-tech: 'Michroma', 'Archivo', sans-serif;  /* ecoa a logo */

  --fs-hero: clamp(2.9rem, 8.4vw, 8.2rem);
  --fs-h1: clamp(2.4rem, 5.6vw, 5.4rem);
  --fs-h2: clamp(2rem, 4.2vw, 3.9rem);
  --fs-h3: clamp(1.3rem, 2vw, 1.75rem);
  --fs-lead: clamp(1.05rem, 1.35vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.7rem;

  /* Espaço (base 4px) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;
  --gutter: clamp(16px, 4.5vw, 64px);
  --maxw: 1320px;

  /* Raios por hierarquia */
  --r-frame: 28px;
  --r-card: 20px;
  --r-btn: 14px;
  --r-chip: 999px;

  /* Movimento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-med: 420ms;

  --shadow-deep: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
}