:root {

   /* --nav-h: 84px; */
   --progress-h: 3px;

  /* =========================
     BRAND COLORS
  ========================= */

  --color-primary: #8c52ff;
  --color-primary-hover: #a978ff;

  --color-secondary: #5ce1e6;
  --color-secondary-hover: #7ff0f4;

  --color-accent: #c4b5fd;

    /* =========================
     Navbar COLORS
  ========================= */

  --bg: #0b0b0d;
  --panel: #131317;
  --panel-2: #14151a;
  --card: #17181c;
  --ink: #f5f1e8;
  --muted: #93938c;
  --line: #26272d;
  --accent: #8c52ff;
  --accent-2: #7c93ff;
  --accent-3: #5a47ff;
  --accent-4: #3d2eb8;

  /* =========================
     TEXT COLORS
  ========================= */

  --color-text-primary: #ffffff;

  --color-text-secondary: #c7c9d1;

  --color-text-light: #8b90a1;

  /* =========================
     BACKGROUND COLORS
  ========================= */

  --color-bg-primary: #030712;

  --color-bg-secondary: #0b1120;

  --color-bg-tertiary: #111827;

  /* =========================
     SURFACE / GLASS
  ========================= */

  --color-surface: rgba(255,255,255,0.06);

  --color-surface-hover: rgba(255,255,255,0.10);

  --color-surface-solid: #131c31;

  /* =========================
     BORDER
  ========================= */

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

  --color-border-strong: rgba(255,255,255,0.16);

  /* =========================
     STATUS COLORS
  ========================= */

  --color-success: #22c55e;

  --color-warning: #f59e0b;

  --color-error: #ef4444;

  --color-info: #38bdf8;

  /* =========================
     SPACE GLOW COLORS
  ========================= */

  --glow-primary: rgba(140,82,255,0.45);

  --glow-secondary: rgba(92,225,230,0.45);

  --glow-soft: rgba(255,255,255,0.08);

  /* =========================
     GRADIENTS
  ========================= */

  --gradient-primary:
  linear-gradient(
    135deg,
    #8c52ff,
    #5ce1e6
  );

  --gradient-dark:
  linear-gradient(
    135deg,
    #081120,
    #030712
  );

  --gradient-surface:
  linear-gradient(
    135deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.03)
  );

  /* =========================
     SHADOWS
  ========================= */

  --shadow-sm:
  0 2px 8px rgba(0,0,0,0.25);

  --shadow-md:
  0 8px 24px rgba(0,0,0,0.35);

  --shadow-lg:
  0 16px 48px rgba(0,0,0,0.45);

  --shadow-glow:
  0 0 24px rgba(140,82,255,0.22),
  0 0 48px rgba(92,225,230,0.12);


      /* FONT FAMILY */
  --font-primary: "Noto Sans", sans-serif;

  /* FONT WEIGHTS */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* RESPONSIVE TYPOGRAPHY */
  --fs-h1: clamp(2.25rem, 1.8rem + 2vw, 3rem);
  /* 36px → 48px */
  --fs-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2rem);
  /* 28px → 32px */
  --fs-h3: clamp(1.25rem, 1.1rem + 1vw, 1.5rem);
  /* 20px → 24px */
  --fs-body: clamp(0.95rem, 0.9rem + 0.2vw, 1rem);
  /* 15px → 16px */
  --fs-para: clamp(0.85rem, 0.8rem + 0.2vw, 0.875rem);
  /* 13px → 14px */

  --nav-h: clamp(72px, 6vw + 20px, 100px);

  --fs-logo: clamp(1.1rem, 0.9rem + 1vw, 1.5rem);
  --fs-nav: clamp(0.82rem, 0.7rem + 0.4vw, 0.95rem);
  --fs-sub-title: clamp(0.85rem, 0.75rem + 0.3vw, 0.95rem);
  --fs-sub-desc: clamp(0.72rem, 0.65rem + 0.2vw, 0.8rem);
  --fs-btn: clamp(0.78rem, 0.68rem + 0.3vw, 0.92rem);
  --fs-mobile: clamp(1.05rem, 0.9rem + 1.4vw, 1.4rem);

  --font-body: "Inter", sans-serif;
  --font-display: "Fraunces", serif;
}