@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---- Brand Colors ---- */
  --brand-dark: #0B0F19;
  --brand-card: rgba(20, 27, 45, 0.7);
  --brand-card-glass: rgba(20, 27, 45, 0.5);
  --brand-border: rgba(255, 255, 255, 0.08);
  --brand-border-light: rgba(255, 255, 255, 0.06);

  /* ---- Text ---- */
  --text-body: #E2E8F0;
  --text-muted: #94A3B8;
  --text-heading: #FFFFFF;
  --text-accent: #2DD4BF;

  /* ---- Accent Gradients ---- */
  --accent-teal: #14B8A6;
  --accent-sky: #38BDF8;
  --accent-blue: #3B82F6;
  --gradient-primary: linear-gradient(to right, var(--accent-teal), var(--accent-sky), var(--accent-blue));
  --gradient-border: linear-gradient(to bottom right, var(--accent-teal), var(--accent-sky), var(--accent-blue));

  /* ---- Glow Effects ---- */
  --glow-teal: radial-gradient(circle at 0% 0%, rgba(20, 184, 166, 0.15) 0%, transparent 50%);
  --glow-blue: radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.12) 0%, transparent 50%);

  /* ---- Glass ---- */
  --glass-bg: rgba(20, 27, 45, 0.5);
  --glass-blur: 16px;
  --glass-border: rgba(255, 255, 255, 0.06);

  /* ---- Typography ---- */
  --font-family: 'Plus Jakarta Sans', sans-serif;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* ---- Spacing ---- */
  --container-max: 1200px;
  --section-gap: 6rem;
  --card-padding: 1.5rem;

  /* ---- Borders ---- */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;
}