/* ==========================================================================
   Variables
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
       Backgrounds
       ---------------------------------------------------------------------- */

  --color-background: #0b1120;
  --color-background-alt: #0f172a;
  --color-card: #111827;

  /* ----------------------------------------------------------------------
       Borders
       ---------------------------------------------------------------------- */

  --color-border: rgba(255, 255, 255, 0.08);

  /* ----------------------------------------------------------------------
       Brand
       ---------------------------------------------------------------------- */

  --color-accent: #2dd4bf;

  /* ----------------------------------------------------------------------
       Layout
       ---------------------------------------------------------------------- */

  --container-width: 1100px;

  /* ----------------------------------------------------------------------
       Text
       ---------------------------------------------------------------------- */

  --color-text: #ffffff;
  --color-text-footer: #8ea0b8;
  --color-text-muted: #b8c3d5;
  --color-text-secondary: #d8e1ee;

  /* ----------------------------------------------------------------------
       Effects
       ---------------------------------------------------------------------- */

  --border-radius-large: 20px;
  --border-radius-medium: 12px;
  --border-radius-small: 8px;

  --transition-fast: 0.2s ease;
}