/* =====================================================================
   VORTEX WEB DESIGN - THEME FILE  (change the look of the whole site here)
   Colors, gradients, fonts, spacing, buttons and cards all start here.
   Only edit the values after the colon, e.g. --violet: #5b2eff;
   ===================================================================== */

/* Fonts (loaded from Google Fonts in templates/index.html):
   headings = Space Grotesk, body = DM Sans */

:root {
  /* ---- 1. COLORS ---- */
  --midnight:   #0b0b1e;   /* page background */
  --midnight-2: #14142e;   /* cards and panels */
  --violet:     #5b2eff;   /* main brand color */
  --cyan:       #00c2ff;   /* second brand color */
  --magenta:    #ff3d9a;   /* small accent color */
  --text:       #f4f4ff;   /* main text (very readable on midnight) */
  --text-soft:  #b8b8d6;   /* softer text for descriptions */
  --line:       rgba(255, 255, 255, .12);  /* thin borders */
  --danger:     #ff6b6b;   /* error messages */
  --success:    #3ddc97;   /* success messages */

  /* ---- 2. GRADIENTS ---- */
  --grad-main:   linear-gradient(135deg, var(--violet), var(--cyan));
  --grad-accent: linear-gradient(135deg, var(--violet), var(--magenta));
  --grad-text:   linear-gradient(90deg, var(--cyan), var(--violet) 55%, var(--magenta));

  /* ---- 3. FONTS ---- */
  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "DM Sans", system-ui, sans-serif;
  --text-base: 1.0625rem;          /* body size (17px) */
  --text-h1: clamp(2.4rem, 8vw, 4.5rem);
  --text-h2: clamp(1.9rem, 5vw, 3rem);
  --text-h3: 1.35rem;

  /* ---- 4. SPACING ---- */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --page-width: 1100px;
  --gutter: 1rem;                  /* side margin on phones */

  /* ---- 5. SHAPES AND MOTION ---- */
  --radius-card: 20px;
  --radius-pill: 999px;
  --tap: 48px;                     /* minimum button height (touch friendly) */
  --speed: .25s;

  /* ---- 6. BUTTONS ---- */
  --btn-primary-bg: var(--grad-accent);
  --btn-primary-text: #ffffff;
  --btn-ghost-border: var(--line);

  /* ---- 7. CARDS ---- */
  --card-bg: var(--midnight-2);
  --card-border: var(--line);
}