/* for all pages fonts */
/* use two local font but can chage it to google fonts */
:root {
  --font-primary: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-secondary: "Georgia", Times, "Times New Roman", serif;

  /* light mode */
  --bg-main-light: #f7f9fc;
  --bg-card-light: #ffffff;
  --text-primary-light: #1d2d35;
  --text-secondary-light: #5a6a72;
  --accent-primary-light: #0077cc;
  --accent-secondary-light: #ff6b6b;
  --border-light: #e1e8ed;
  --shadow-light: 0px 8px 25px rgba(0, 50, 100, 0.08);

  /* dark mode */
  --bg-main-dark: #1a202c;
  --bg-card-dark: #2d3748;
  --text-primary-dark: #e2e8f0;
  --text-secondary-dark: #a0aec0;
  --accent-primary-dark: #38bdf8;
  --accent-secondary-dark: #ff8787;
  --border-dark: #4a5568;
  --shadow-dark: 0px 8px 25px rgba(0, 0, 0, 0.2);
}

html.light {
  --bg-main: var(--bg-main-light);
  --bg-card: var(--bg-card-light);
  --text-primary: var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --accent-primary: var(--accent-primary-light);
  --accent-secondary: var(--accent-secondary-light);
  --border-color: var(--border-light);
  --card-shadow: var(--shadow-light);
}

html.dark {
  --bg-main: var(--bg-main-dark);
  --bg-card: var(--bg-card-dark);
  --text-primary: var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --accent-primary: var(--accent-primary-dark);
  --accent-secondary: var(--accent-secondary-dark);
  --border-color: var(--border-dark);
  --card-shadow: var(--shadow-dark);
}