// ==========================================================
// Project 3 - variables
// Colors, spacing, fonts, and the breakpoints map. Setting a
// value once here and reusing it everywhere keeps the palette
// consistent, which is one of the main reasons to use variables.
// ==========================================================

// Colors (kept in sync with the shared site palette)
$primary:       #1f2937;  // dark navy: header, footer
$primary-light: #374151;  // hover navy
$accent:        #7c2d12;  // rust: headings and accents
$highlight:     #fbbf24;  // amber: focus outlines
$bg:            #f5f3ef;  // cream page background
$surface:       #ffffff;  // cards
$ink:           #1f2937;  // body text
$muted:         #57534e;  // secondary text
$link:          #075985;  // in-content links
$border:        #d6d3d1;  // hairline borders

// Typography (embedded web font applied in _base.scss)
$font-body: "Poppins", "Segoe UI", Helvetica, Arial, sans-serif;
$font-code: "Source Code Pro", "Courier New", Courier, monospace;

// Spacing and shape
$space:  1rem;
$radius: 0.5rem;
$maxw:   62rem;

// Nested variables: a SASS map holds the responsive breakpoints as
// nested key/value pairs, so every media query reads from one source.
$breakpoints: (
  tablet: 768px,
  phone:  480px,
);