/* ============================================================
   CopyCraft — design tokens + base styles
   Ported from the claude.ai/design "CopyCraft" design system.
   Token source of truth: _ds/.../tokens/*.css
   ============================================================ */

/* Webfonts (Google Fonts). Falls back gracefully to system fonts when offline. */
@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&family=Nunito:wght@400;500;600;700;800;900&display=swap");

:root {
  /* ---- Ink / outline ---- */
  --cc-ink-900: #2A2017;
  --cc-ink-800: #3A2E22;
  --cc-ink-700: #4A3A2A;
  --cc-ink-600: #5A4632;
  --cc-ink-400: #8A7A5F;
  --cc-ink-300: #B8A988;

  /* ---- Parchment / surfaces ---- */
  --cc-parchment-50:  #FBF8EF;
  --cc-parchment-100: #FBF6E9;
  --cc-parchment-200: #F2E7CF;
  --cc-parchment-300: #EDE1C7;
  --cc-parchment-400: #E2D2B0;
  --cc-surface:       #FFFEF8;

  /* ---- Block hues ---- */
  --cc-grass:        #5C9E3A;
  --cc-grass-light:  #7FBF54;
  --cc-grass-dark:   #3F7A26;
  --cc-grass-deep:   #2E7D32;
  --cc-grass-border: #1B4D1E;

  --cc-dirt:        #9B6A3F;
  --cc-dirt-light:  #B5824F;
  --cc-dirt-dark:   #6F4A2A;

  --cc-stone:       #9AA0A6;
  --cc-stone-light: #BFC4C9;
  --cc-stone-dark:  #6E747A;

  --cc-gold:        #E8A33D;
  --cc-gold-light:  #F4C065;
  --cc-gold-dark:   #B5762A;

  --cc-sky:         #7FB7D9;
  --cc-water:       #4FA3C7;
  --cc-redstone:    #C5483B;
  --cc-redstone-dark:#9B3329;

  /* ---- Semantic aliases ---- */
  --cc-bg:              var(--cc-parchment-200);
  --cc-bg-grad-top:     var(--cc-parchment-100);
  --cc-bg-grad-bottom:  var(--cc-parchment-200);
  --cc-surface-card:    var(--cc-surface);
  --cc-surface-sunken:  var(--cc-parchment-300);

  --cc-text:            var(--cc-ink-800);
  --cc-text-secondary:  var(--cc-ink-600);
  --cc-text-muted:      var(--cc-ink-400);
  --cc-text-on-primary: #FBF6E9;
  --cc-text-on-accent:  var(--cc-ink-900);

  --cc-border:          var(--cc-ink-900);
  --cc-border-soft:     var(--cc-parchment-400);

  --cc-primary:         var(--cc-grass);
  --cc-primary-press:   var(--cc-grass-dark);
  --cc-primary-border:  var(--cc-grass-border);
  --cc-accent:          var(--cc-gold);
  --cc-accent-press:    var(--cc-gold-dark);
  --cc-success:         var(--cc-grass-deep);
  --cc-danger:          var(--cc-redstone);
  --cc-info:            var(--cc-water);

  /* ---- Typography ---- */
  --cc-font-display: 'Pixelify Sans', 'Trebuchet MS', sans-serif;
  --cc-font-body:    'Nunito', system-ui, -apple-system, sans-serif;
  --cc-font-num:     'Pixelify Sans', monospace;

  /* ---- Effects ---- */
  --cc-radius-xs: 3px;
  --cc-radius-sm: 4px;
  --cc-radius-md: 6px;
  --cc-radius-lg: 10px;
  --cc-radius-pill: 999px;

  --cc-border-w:   3px;
  --cc-border-w-sm: 2px;

  --cc-shadow-block:    0 6px 0 var(--cc-ink-900);
  --cc-shadow-block-sm: 0 4px 0 var(--cc-ink-900);
  --cc-shadow-block-lg: 0 8px 0 var(--cc-ink-900);
  --cc-shadow-press:    0 2px 0 var(--cc-ink-900);
  --cc-shadow-primary:  0 6px 0 var(--cc-grass-border);
  --cc-shadow-accent:   0 6px 0 var(--cc-gold-dark);
  --cc-shadow-float: 0 14px 30px rgba(42, 32, 23, 0.22);
  --cc-shadow-inset: inset 0 3px 0 rgba(42, 32, 23, 0.12);

  --cc-transition: 80ms steps(2, end);

  /* ---- Spacing ---- */
  --cc-tap-min:    44px;
  --cc-block-tile: 46px;
  --cc-screen-pad: 18px;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #F2E7CF;
}

#root {
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

* { box-sizing: border-box; }

button { font-family: var(--cc-font-body); }

/* ---- Animations (from the design prototype) ---- */
@keyframes cc-pop { 0% { transform: scale(.7); opacity: 0 } 60% { transform: scale(1.08) } 100% { transform: scale(1); opacity: 1 } }
@keyframes cc-fadein { from { opacity: 0 } to { opacity: 1 } }
@keyframes cc-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes cc-blink { 0%, 92%, 100% { opacity: 1 } 96% { opacity: 0 } }
@keyframes cc-timer-pulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.06) } }