/* ============================================================
   Cork Board Portfolio — base.css
   Shared reset, variables, utilities
   ============================================================ */

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* --- Variables --- */
:root {
  --cork: #c4a265;
  --wall: #f5f0e6;
  --paper: #fdfaf3;
  --paper-aged: #f3ead4;
  --paper-blue: #e4eef9;
  --paper-green: #e2f2e8;
  --paper-pink: #fae4e4;
  --paper-yellow: #fef7c0;

  --ink: #1a1a1a;
  --ink-mid: #3d3d3d;
  --ink-faded: #616161;

  --pin-red: #c0392b;
  --pin-blue: #2471a3;
  --pin-yellow: #d4ac0d;
  --pin-green: #1e8449;

  --tape: rgba(255, 225, 90, 0.48);
  --shadow-card: 3px 5px 15px rgba(0,0,0,0.2);
  --shadow-lift: 6px 10px 28px rgba(0,0,0,0.32);

  --mono: 'IBM Plex Mono', monospace;
  --hand: 'Caveat', cursive;
  --serif: 'Playfair Display', serif;

  --ease: 0.2s cubic-bezier(.4, 0, .2, 1);

  --term-bg: #f5f0e8;
  --term-text: #3a3530;
  --term-accent: #c0392b;
  --term-dim: #8a8078;
}

/* --- Utilities --- */
.visually-hidden {
  display: none;
}

/* Folder page color classes (replaces inline styles) */
.page-blue   { background: var(--paper-blue); }
.page-yellow { background: var(--paper-yellow); }
.page-green  { background: var(--paper-green); }
.page-pink   { background: var(--paper-pink); }
.page-white  { background: var(--paper); }