/* ==========================================================================
   INFRAVIZE — Design Tokens
   ========================================================================== */
:root {
  /* Color — base surfaces */
  --c-bg:        #0A0D12;
  --c-bg-1:      #10151C;
  --c-bg-2:      #161D27;
  --c-bg-3:      #1D2530;

  /* Color — lines & structure */
  --c-line:      #232B36;
  --c-line-soft: #1A212B;
  --c-grid:      rgba(76, 141, 255, 0.06);

  /* Color — ink */
  --c-ink:       #E9EEF4;
  --c-ink-dim:   #9AA7B6;
  --c-ink-faint: #5C6876;

  /* Color — accents */
  --c-blue:      #3D8BFD;
  --c-blue-dim:  #2A5FB8;
  --c-cyan:      #46E1C8;
  --c-violet:    #8B7CF6;
  --c-amber:     #E8A23D;

  /* Color — on-accent */
  --c-on-blue:   #04101F;

  /* Type */
  --f-display: 'Manrope', 'Inter', sans-serif;
  --f-body:    'Inter', sans-serif;
  --f-mono:    'JetBrains Mono', 'IBM Plex Mono', monospace;

  --fs-000: 0.75rem;
  --fs-00:  0.8125rem;
  --fs-0:   0.9375rem;
  --fs-1:   1.0625rem;
  --fs-2:   1.375rem;
  --fs-3:   1.75rem;
  --fs-4:   2.375rem;
  --fs-5:   3.25rem;
  --fs-6:   4.375rem;

  /* Space (8px base) */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 6.5rem;
  --sp-9: 9rem;

  /* Layout */
  --container: 1320px;
  --container-narrow: 780px;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --border: 1px solid var(--c-line);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 180ms;
  --dur-2: 340ms;
  --dur-3: 620ms;
}

@media (max-width: 720px) {
  :root {
    --fs-6: 2.75rem;
    --fs-5: 2.25rem;
    --fs-4: 1.75rem;
    --fs-3: 1.375rem;
    --sp-8: 4rem;
    --sp-9: 5rem;
  }
}