/* ============================================================
   THE HUMBLE NURSE — DESIGN TOKENS
   ============================================================
   Edit colors, fonts, and spacing here.
   Changes apply to the entire site.
   ============================================================ */


/* ── COLORS ──────────────────────────────────────────────────
   Change --red to update the brand color everywhere          */
:root {
  /* Brand red — main accent color */
  --red:        #C1121F;
  --red-bright: #E63946;  /* hover state */
  --red-glow:   rgba(193, 18, 31, 0.12); /* subtle background tint */

  /* DARK MODE surfaces (default) */
  --bg:       #080808;  /* page background */
  --bg2:      #0F0F0D;  /* alternate section background */
  --bg3:      #161614;  /* card hover / deeper surface */
  --fg:       #F0EFE9;  /* primary text */
  --fg2:      rgba(240, 239, 233, 0.55); /* secondary text */
  --fg3:      rgba(240, 239, 233, 0.25); /* muted text / labels */
  --border:   rgba(255, 255, 255, 0.07); /* subtle borders */
  --border2:  rgba(255, 255, 255, 0.12); /* stronger borders */
  --card:     #111110;  /* card backgrounds */
  --nav-bg:   rgba(8, 8, 8, 0.92); /* nav background (with blur) */
}

/* ── LIGHT MODE ──────────────────────────────────────────────
   Applied when user toggles the theme button               */
[data-theme="light"] {
  --bg:       #F2F1ED;
  --bg2:      #E8E7E3;
  --bg3:      #DDDCD8;
  --fg:       #0A0908;
  --fg2:      rgba(10, 9, 8, 0.55);
  --fg3:      rgba(10, 9, 8, 0.28);
  --border:   rgba(0, 0, 0, 0.08);
  --border2:  rgba(0, 0, 0, 0.14);
  --card:     #FFFFFF;
  --nav-bg:   rgba(242, 241, 237, 0.92);
}


/* ── TYPOGRAPHY ──────────────────────────────────────────────
   Fonts are loaded in each HTML file from Google Fonts.
   Change font names here to swap fonts site-wide.          */
:root {
  --font-display: 'Bebas Neue', sans-serif;  /* headlines */
  --font-body:    'DM Sans', sans-serif;     /* body text */
  --font-mono:    'DM Mono', monospace;      /* labels, tags, nav */
}


/* ── SPACING ─────────────────────────────────────────────────  */
:root {
  --nav-h:   68px;   /* nav bar height */
  --gutter:  60px;   /* page side padding */
  --max-w:   1200px; /* max content width */
  --radius:  10px;   /* card border radius */
}

/* Tablet */
@media (max-width: 1100px) { :root { --gutter: 40px; } }
/* Mobile */
@media (max-width: 768px)  { :root { --gutter: 24px; } }
/* Small mobile */
@media (max-width: 480px)  { :root { --gutter: 18px; } }


/* ── ANIMATION EASING ────────────────────────────────────────  */
:root {
  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* smooth spring easing */
}