:root {
  /* ========== Fonts ========== */
  --font-family: 'Outfit', sans-serif;

  /* ========== Base Colors ========== */
  --clr-white: #ffffff;
  --clr-black: #000000;
  --clr-light-100: #f0f7ff;
  --clr-light-200: #e0ecff;
  --clr-muted: #b0c4de;
  --clr-dark-700: #94b3fd;
  --clr-dark-800: #8e9fd6;
  --clr-dark-900: #7789c4;

  /* ========== Text Colors ========== */
  --text-color: #2c2c44;
  --text-light: #6a6a8e;
  --text-ultralight: #a0a2c0;
  --text-muted: #6b7280;
  --text-neutral: #4b4e68;
  --text-subtle: #727491;
  --text-accent-pink: #f472b6;
  --text-accent-rose: #db2777;
  --clr-accent-rose-dark: #c026d3;
  --clr-accent-pink-dark: #be185d;

  /* ========== Background Colors ========== */
  --bg-color: #f9f9ff;
  --bg-primary: #ffffff;
  --bg-secondary: #f2f6ff;
  --bg-hero-start: #f0f7ff;
  --bg-hero-end: #fcefff;
  --header-bg-color: #ffffff;
  --footer-bg-color: #f0f7ff;
  --menu-mobile-bg: #eaf1ff;

  /* ========== Borders ========== */
  --border-light: rgba(100, 149, 237, 0.08);
  --border-dark: #94b3fd;
  --border-divider: #bcd4ff;
  --border-pink-soft: rgba(244, 114, 182, 0.15);
  --color-border-light: rgba(255, 255, 255, 0.06);

  /* ========== Accent Colors ========== */
  --color-accent-pink: #f472b6;
  --color-accent-light-pink: #f9a8d4;
  --color-gender-men: #cfe2ff;
  --color-gender-women: #f9a8d4;

  /* ========== Gradients ========== */
  --gradient-hero: linear-gradient(135deg, #f0f7ff, #fcefff);
  --gradient-page-bg: linear-gradient(135deg, #f9f9ff, #fcefff);
  --gradient-cta: linear-gradient(135deg, #8ab4f8, #f9a8d4);
  --gradient-profile-header: linear-gradient(135deg, #d6e3ff, #f9a8d4);
  --gradient-chart: linear-gradient(to bottom right, #f3f9ff, #ffeaf6);
  --gradient-card: linear-gradient(to right, #f0f7ff, #fff1fb);
  --gradient-contact: linear-gradient(to right, #f3faff, #fff1f9);
  --gradient-border: linear-gradient(#ffffff, #ffffff), radial-gradient(circle at top left, #f472b6, #8ab4f8);
  --gradient-title-line: linear-gradient(90deg, #f472b6, #8ab4f8);
  --gradient-blur-layer: linear-gradient(135deg, rgba(244, 114, 182, 0.06), rgba(138, 180, 248, 0.06));

  /* ========== Shadows ========== */
  --shadow-light: rgba(138, 180, 248, 0.03);
  --shadow-medium: rgba(138, 180, 248, 0.08);
  --shadow-dark: rgba(138, 180, 248, 0.12);
  --shadow-glow: rgba(138, 180, 248, 0.15);
  --shadow-glow-strong: rgba(244, 114, 182, 0.2);
  --shadow-pink: rgba(244, 114, 182, 0.1);
  --shadow-pink-soft: rgba(244, 114, 182, 0.08);
  --shadow-pink-deep: rgba(244, 114, 182, 0.05);
  --shadow-pink-strong: rgba(244, 114, 182, 0.2);
  --shadow-profile: 0 8px 20px rgba(138, 180, 248, 0.1);
  --shadow-profile-pic: 0 4px 15px rgba(138, 180, 248, 0.3);
  --shadow-metric: 0 5px 15px rgba(0, 0, 0, 0.05);
  --shadow-metric-hover: 0 10px 25px rgba(244, 114, 182, 0.1);
  --shadow-card: 0 4px 12px rgba(244, 114, 182, 0.15);
  --shadow-card-hover: 0 6px 20px rgba(244, 114, 182, 0.2);

  /* ========== Chart Specific ========== */
  --gradient-x0: 0;
  --gradient-y0: 0;
  --gradient-x1: 0;
  --gradient-y1: 400;
  --follower-gradient-start: rgba(138, 180, 248, 0.35);
  --follower-gradient-end: rgba(138, 180, 248, 0);
  --gradient-engage-start: rgba(244, 114, 182, 0.3);
  --gradient-engage-end: rgba(244, 114, 182, 0);
  --follower-line-color: #8ab4f8;
  --follower-point-bg: #f472b6;
  --follower-point-border: #ffffff;
  --chart-line-color: #8ab4f8;
  --chart-point-fill: #f472b6;
  --chart-point-border: #ffffff;
  --tick-color: #bfd8ff;
  --grid-line-color: rgba(244, 114, 182, 0.1);
  --chart-label-color: #8ab4f8;
  --chart-grid-color: rgba(244, 114, 182, 0.1);
  --tooltip-bg: #8ab4f8;
  --tooltip-title-color: #ffffff;
  --tooltip-body-color: #f0f7ff;
  --tooltip-border-color: #f472b6;
  --datalabel-color: #ffffff;
  --chart-shadow-default: 0 0 0 1px rgba(138, 180, 248, 0.08), 0 12px 30px rgba(244, 114, 182, 0.05);
  --chart-shadow-hover: 0 0 10px rgba(244, 114, 182, 0.1), 0 20px 40px rgba(244, 114, 182, 0.06);
  --chart-shadow-engagement: 0 0 0 1px rgba(138, 180, 248, 0.08), 0 12px 30px rgba(244, 114, 182, 0.04);
  --chart-border: 1px solid rgba(138, 180, 248, 0.08);
  --chart-border-radius: 1.25rem;
  --chart-canvas-radius: 12px;
  --chart-padding: 2rem 2rem 2.5rem;
  --chart-margin: 3rem auto;
  --chart-max-width: 1000px;

  /* ========== Gender Doughnut Values ========== */
  --gender-men-value: 31.1;
  --gender-women-value: 68.9;

  /* ========== Transitions ========== */
  --transition-default: transform 0.3s ease, box-shadow 0.3s ease;
  --transition-smooth: 0.4s ease;

  /* ========== UI ========== */
  --link-color: #8ab4f8;
  --link-hover-color: #f472b6;
  --menu-toggle-color: #8ab4f8;
  --logo-color: #f472b6;
  --footer-text-color: #737373;
  --footer-link-color: #f472b6;
  --footer-link-hover-color: #8ab4f8;
}