/* =============================================================
   BLEND DESIGN SYSTEM — colors_and_type.css
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&family=Caveat:wght@500;700&display=swap');

:root {
  --blend-yellow:  #FDCD03;
  --blend-orange:  #FF7403;
  --blend-green:   #13A454;
  --blend-blue:    #2457E5;
  --blend-pink:    #F7B6C2;
  --blend-red:     #E8442C;
  --blend-cream:   #FFF8E8;
  --blend-cream-2: #F5EEDA;
  --blend-ink:     #2D2D2D;
  --blend-ink-2:   #5C5C5C;
  --blend-ink-3:   #8A8A8A;
  --blend-line:    #2D2D2D;
  --blend-black:   #0F0F0F;
  --blend-white:   #FFFFFF;

  --bg:            var(--blend-cream);
  --bg-2:          var(--blend-cream-2);
  --bg-dark:       var(--blend-black);
  --fg1:           var(--blend-ink);
  --fg2:           var(--blend-ink-2);
  --fg3:           var(--blend-ink-3);
  --fg-inverse:    var(--blend-cream);
  --border:        var(--blend-ink);
  --border-soft:   rgba(45,45,45,0.12);
  --focus:         var(--blend-orange);

  --ok:       var(--blend-green);
  --warn:     var(--blend-yellow);
  --danger:   var(--blend-red);
  --info:     var(--blend-blue);

  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-hand:    'Caveat', cursive;

  --radius-md:  14px;
  --radius-pill: 999px;

  --shadow-hard: 5px 5px 0 0 var(--blend-ink);
}

html { color: var(--fg1); background: var(--bg); font-family: var(--font-body); }