/* =====================================================
   variables.css
   Design tokens. All colors, fonts, and reusable vars.
   ===================================================== */

:root {
  /* Color palette */
  --bg:        #f5f3ef;
  --surface:   #edeae4;
  --border:    #d6d1c8;
  --text:      #1a1916;
  --muted:     #6b6760;
  --accent:    #2b5be0;
  --accent-dk: #1a3ea8;
  --tag-bg:    #e4e1db;
  --white:     #fdfcfa;
  --code:      #3d3a35;

  /* Highlight tag (skill chips) */
  --tag-hi-bg:     #dce6fc;
  --tag-hi-fg:     var(--accent-dk);
  --tag-hi-border: #c0d0f5;

  /* Typography stacks */
  --font-serif: 'DM Serif Display', 'Iowan Old Style', Georgia, serif;
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  'DM Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Layout */
  --container-max: 860px;
  --container-pad: 24px;
  --nav-height:    56px;

  /* Effects */
  --shadow-card: 0 2px 14px rgba(0, 0, 0, 0.05);
  --shadow-card-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
  --border-hover: #aaa49c;
  --transition-fast: 0.12s;
  --transition-base: 0.15s;
  --transition-slow: 0.5s;
}