/* Logus Agency — design tokens
   Nunca alterar valores sem alinhamento de marca. */

:root {
  /* Cores exatas */
  --void: #070708;
  --ink: #12110F;
  --bone: #E6E1D6;
  --paper: #F3F0E8;
  --graphite: #8A8680;
  --signal: #E2FF3D;
  --line: rgba(18, 17, 15, 0.12);
  --line-on-void: rgba(230, 225, 214, 0.12);

  /* Tipografia */
  --font-display: "Instrument Sans", "Syne", system-ui, sans-serif;
  --font-serif-accent: "Instrument Serif", Georgia, serif;
  --font-ui: "Instrument Sans", "Syne", system-ui, sans-serif;
  --font-micro: "IBM Plex Mono", ui-monospace, monospace;

  --lh-display: 0.90;
  --track-display: -0.045em;
  --track-micro: 0.14em;
  --size-micro: 11px;

  /* Raios e composição */
  --radius-phase: 28px;
  --radius-pill: 999px;
  --radius-squircle: 22%;
  --radius-device: 14px;
  --radius-phone: 36px;

  /* Espaçamento */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Grain ~7.5% — craft studio */
  --grain-opacity: 0.075;

  /* Sombras cinematográficas */
  --shadow-card:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 18px 40px rgba(7, 7, 8, 0.08),
    0 4px 12px rgba(7, 7, 8, 0.04);
  --shadow-device:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 2px 4px rgba(7, 7, 8, 0.35),
    0 24px 48px rgba(7, 7, 8, 0.28),
    0 60px 100px rgba(7, 7, 8, 0.32);
  --shadow-device-contact:
    0 40px 30px -28px rgba(7, 7, 8, 0.55);
  --shadow-phone:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 2px 3px rgba(7, 7, 8, 0.4),
    0 18px 36px rgba(7, 7, 8, 0.3),
    0 48px 80px rgba(7, 7, 8, 0.35);

  /* Site */
  --header-h: 64px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --max-w: 1120px;
}

.bg-void { background-color: var(--void); color: var(--bone); }
.bg-ink { background-color: var(--ink); color: var(--bone); }
.bg-bone { background-color: var(--bone); color: var(--ink); }
.bg-paper { background-color: var(--paper); color: var(--ink); }
.fill-signal { background-color: var(--signal); color: var(--void); }
.text-ink { color: var(--ink); }
.text-bone { color: var(--bone); }
.text-graphite { color: var(--graphite); }
.text-signal { color: var(--signal); }
.border-line { border: 1px solid var(--line); }