/* ===================================
   1. CSS VARIABLES
   =================================== */
  :root {
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --line-height: 1.6;

  /* Blue Palette */
  --primary-blue: hsla(204, 64%, 52%, 1);
  --dark-blue: hsla(220, 65%, 30%, 1);
  --navy-blue: hsla(220, 60%, 39%, 1);
  --sidebar-blue: #287fb8;

  /* Yellow Palette */
  --bright-yellow: hsla(54, 100%, 62%, 0.7);

  /* Red/Orange/Green Palette */
  --primary-red: hsla(6, 78%, 57%, 1);
  --dark-red: hsla(6, 78%, 47%, 1);
  --primary-orange: hsla(43, 95%, 47%, 1);
  --dark-orange: hsla(43, 100%, 45%, 1);
  --primary-green: hsla(145, 63%, 42%, 1);
  --dark-green-alt: hsla(145, 63%, 37%, 1);
  --dark-green-fade: rgb(124, 221, 164);

  /* Neutral Colors */
  --sidebar-darker: hsla(210, 29%, 24%, 1);
  --sidebar-dark: hsla(210, 29%, 29%, 1);
  --text-white: hsla(0, 0%, 100%, 1);
  --text-light-gray: hsla(192, 15%, 94%, 1);
  --text-medium-gray: hsla(210, 14%, 83%, 1);
  --text-dark: hsla(0, 0%, 20%, 1);
  --text-darker: hsla(0, 0%, 10%, 1);
  --text-black: hsla(0, 0%, 0%, 1);
  --tree-gray: hsla(150, 5%, 65%, 1);
  --gray: hsla(0, 0%, 50%, 0.5);
  --border-gray: hsla(0, 0%, 87%, 1);
  --bg-light-gray: hsla(0, 0%, 96%, 1);

  /* Shadows and Effects */
  --shadow-light: hsla(0, 0%, 0%, 0.1);
  --shadow-medium: hsla(0, 0%, 0%, 0.15);
  --shadow-dark: hsla(0, 0%, 0%, 0.2);
  --shadow-darker: hsla(0, 0%, 0%, 0.3);
  --shadow-blue: hsla(204, 64%, 52%, 0.4);
  --shadow-blue-dark: hsla(204, 64%, 52%, 0.3);
  --shadow-red: hsla(6, 78%, 57%, 0.5);
  --shadow-red-dark: hsla(6, 78%, 57%, 0.4);
  --shadow-orange: hsla(43, 95%, 47%, 0.5);
  --shadow-orange-dark: hsla(43, 95%, 47%, 0.4);
  --shadow-green: hsla(145, 63%, 42%, 0.5);
  --shadow-green-dark: hsla(145, 63%, 42%, 0.4);
  --overlay-dark: hsla(0, 0%, 0%, 0.5);

  /* Fire Shadow Effect Colors */
  --fire-orange-1: hsla(39, 100%, 50%, 0.8);
  --fire-orange-2: hsla(33, 100%, 50%, 0.6);
  --fire-orange-3: hsla(16, 100%, 50%, 0.4);
  --fire-red-1: hsla(0, 100%, 50%, 0.8);

/* Neon Colors */
--neon-green: hsla(120, 100%, 50%, 1);
--neon-blue: hsla(195, 100%, 50%, 1);
--bg-dark-cosmic: hsla(270, 20%, 12%, 1);
--neon-purple: hsla(280, 100%, 60%, 1);

  /* Nav link spacing options */
  --nav-spacing-wide: 40px;
  --nav-spacing-normal: 20px;
  --nav-spacing-compact: 15px;

  /* Background Theme Colors */
  --bg-clr-nav: hsla(225, 43%, 93%, 1);
  --bg-clr-sidebar: hsla(210, 29%, 24%, 1);
  --bg-clr-sidebar-2: hsla(210, 29%, 24%, 1);
  --bg-clr-hero: hsla(225, 43%, 93%, 1);
  --bg-clr-section: hsla(225, 43%, 93%, 1);
  --bg-clr-section-2: hsla(156, 78%, 92%, 1);
  --bg-clr-section-3: hsla(156, 78%, 92%, 1);
  --bg-clr-section-3-2: hsla(123, 38%, 57%, 1);
  --bg-clr-section-4: hsla(123, 38%, 57%, 1);
  --bg-clr-section-4-2: hsla(156, 78%, 92%, 1);
  --bg-clr-card: hsla(225, 25%, 93%, 1);
  --bg-clr-card-2: hsla(225, 25%, 93%, 1);
  --bg-clr-card-3: hsla(225, 25%, 93%, 1);
  --bg-clr-btn-1: hsla(6, 78%, 57%, 1);
  --bg-clr-call-to-action: var(--bg-light-gray);
  --bg-clr-btn-2: hsla(31, 91%, 56%, 1);
  --bg-clr-btn-3: hsla(145, 63%, 42%, 1);
  --bg-clr-btn-4: hsla(204, 64%, 52%, 1);
  --bg-clr-btn-5: hsla(6, 78%, 57%, 1);
  --bg-clr-footer: hsla(210, 29%, 24%, 1);

  /* Text/Foreground Theme Colors */
  --clr-main-content: hsla(0, 0%, 100%, 1);
  --clr-nav: hsla(225, 43%, 93%, 1);
  --clr-main: hsla(225, 43%, 93%, 1);
  --clr-header: hsla(31, 91%, 56%, 1);
  --clr-sidebar: hsla(210, 29%, 24%, 1);
  --clr-sidebar-2: hsla(210, 29%, 24%, 1);
  --clr-sidebar-h: hsla(204, 64%, 52%, 1);
  --clr-portfolio-h: hsla(192, 15%, 94%, 1);
  --clr-section: hsla(225, 43%, 93%, 1);
  --clr-section-h: hsla(220, 65%, 30%, 1);
  --clr-section-2: hsla(0, 0%, 0%, 1);
  --clr-section-2-h: hsla(220, 65%, 30%, 1);
  --clr-section-3: hsla(225, 43%, 93%, 1);
  --clr-section-3-h: hsla(220, 65%, 30%, 1);
  --clr-section-3-h-2: hsla(220, 65%, 30%, 1);
  --clr-section-4: hsla(123, 38%, 57%, 1);
  --clr-footer: hsla(210, 29%, 24%, 1);
  --clr-footer-2: hsla(210, 29%, 24%, 1);
  --clr-footer-3: hsla(210, 29%, 24%, 1);
  --clr-footer-bottom: hsla(204, 7%, 62%, 1);
  --clr-btn-1: hsla(6, 78%, 57%, 1);
  --clr-btn-2: hsla(31, 91%, 56%, 1);
  --clr-btn-3: hsla(145, 63%, 42%, 1);
  --clr-btn-4: hsla(204, 64%, 52%, 1);
  --clr-btn-5: hsla(6, 78%, 57%, 1);
  --clr-card: hsla(0, 0%, 0%, 1);
  --brd-clr-card: hsla(145, 63%, 42%, 1);


/* ─── DESIGN TOKENS for FANCY CARD ────────────────────────────────── */
  --font-f-card: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

  --clr-f-card-bg-start:       hsl(168, 100%, 50%);
  --clr-f-card-bg-end:         hsl(181, 93%, 46%);
  --clr-f-card-title:          hsl(183, 100%, 26%);
  --clr-f-card-text:           hsla(182, 100%, 27%, 0.76);
  --clr-f-card-accent:         hsl(184, 100%, 38%);
  --clr-f-card-stroke:         hsl(182, 100%, 38%);
  --clr-f-card-icon-fill:      hsl(183, 100%, 27%);
  --clr-f-card-circle-bg:      hsla(166, 100%, 49%, 0.20);
  --clr-f-card-button-bg:      hsl(0, 0%, 100%);
  --clr-f-card-shadow:         hsla(133, 87%, 15%, 0.50);

  --clr-f-card-glass-lo:       hsla(0, 0%, 100%, 0.35);
  --clr-f-card-glass-hi:       hsla(0, 0%, 100%, 0.82);

  --clr-f-card-btn-hover-bg:   hsl(0, 0%, 0%);
  --clr-f-card-btn-hover-icon: hsl(0, 0%, 100%);

  /* ── NAV TOKENS ─────────────────────── */
--clr-nav-bg:               var(--bg-clr-nav);
--clr-nav-shadow:           var(--shadow-medium);
--clr-nav-link:             hsl(270, 80%, 35%);
--clr-nav-link-hover:       rgb(37, 200, 4);
--clr-nav-link-active-bg:   var(--dark-orange);
--clr-nav-link-active-text: var(--text-white);
--clr-nav-hamburger:        var(--dark-blue);
--clr-prm-700: hsl(270, 80%, 35%);
--nav-spacing-normal:       20px;
--nav-spacing-compact:      15px;

/* ── FOOTER TOKENS ──────────────────── */
--clr-footer-bg:            var(--bg-clr-footer);
--clr-footer-text:          var(--text-light-gray);
--clr-footer-heading:       var(--primary-blue);
--clr-footer-link:          var(--text-light-gray);
--clr-footer-link-hover:    var(--primary-blue);
--clr-footer-muted:         var(--text-medium-gray);
--clr-footer-bottom-text:   var(--clr-footer-bottom);
--clr-footer-border:        var(--sidebar-dark);
--clr-prm-700: hsl(270, 80%, 35%);
--clr-neon-700: hsl(280, 100%, 60%);
}