/* =====================================================================
   THEME — edit this file to restyle the site.
   Everything visual (colours, backgrounds, images, fonts) lives here.

   Backgrounds: each section has a colour AND an optional image.
   To use a picture, drop it in /assets/img/ and set e.g.
     --hero-bg-image: url("../img/hero-bg.jpg");
   (the path is relative to THIS css file). Use "none" for no image.
   ===================================================================== */

:root {
  /* ---- Brand / accent ------------------------------------------- */
  --accent: #3ddc97;          /* main accent (links, timeline dots, buttons) */
  --accent-strong: #1fb77a;   /* accent hover */
  --accent-contrast: #06281a; /* text on accent buttons */

  /* ---- Dark surfaces (hero, projects, contact, footer) ---------- */
  --dark-bg: #0f1419;
  --dark-bg-alt: #151c23;
  --dark-card: #1b242d;
  --dark-text: #e6edf3;
  --dark-muted: #9aa7b4;
  --dark-border: #2a3540;

  /* ---- Light surfaces (about, experience, skills) --------------- */
  --light-bg: #f6f8fa;
  --light-bg-alt: #ffffff;
  --light-card: #ffffff;
  --light-text: #1a2129;
  --light-muted: #5b6672;
  --light-border: #dfe4ea;

  /* ---- Per-section backgrounds ---------------------------------- */
  /* Hero (top of the page) */
  --hero-bg: radial-gradient(1200px 600px at 80% -10%, #1d3a32 0%, transparent 60%), var(--dark-bg);
  --hero-bg-image: none;                 /* e.g. url("../img/hero-bg.jpg") */
  --hero-overlay: rgba(10, 14, 18, 0.65); /* darkens the image so text stays readable */

  --about-bg: var(--light-bg-alt);
  --about-bg-image: none;

  --experience-bg: var(--light-bg);
  --experience-bg-image: none;

  --projects-bg: var(--dark-bg-alt);
  --projects-bg-image: none;

  --skills-bg: var(--light-bg-alt);
  --skills-bg-image: none;

  --contact-bg: var(--dark-bg);
  --contact-bg-image: none;

  --footer-bg: #0a0e12;

  /* ---- Profile picture ------------------------------------------ */
  /* Set the image path in assets/js/config.js (profileImage).
     If empty, initials are shown in this circle instead. */
  --avatar-bg: linear-gradient(135deg, #1fb77a, #2b6cb0);
  --avatar-size: 132px;

  /* ---- Typography ----------------------------------------------- */
  --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "JetBrains Mono", Consolas, "SFMono-Regular", Menlo, monospace;

  /* ---- Shape ---------------------------------------------------- */
  --radius: 14px;
  --radius-sm: 8px;
  --max-width: 1100px;
}