/* tokens.css — Bento 2026 design tokens (new system, no reuse of old --color-* tokens) */

:root {
  /* Palette — white + light brown only, no amber, no dark chocolate */
  --bento-white:      #FFFFFF;
  --bento-cream:      #FBF7F1;
  --bento-sand:       #F2E9DC;
  --bento-tan-100:    #EAD9C2;
  --bento-tan-200:    #DCC3A0;
  --bento-tan-300:    #C7A47C;
  --bento-line:       #E4D6C4;
  --bento-ink:        #211A14;
  --bento-ink-soft:   #4A3F33;
  --bento-btn-text:   #17120D;
  --bento-shadow:       rgba(33, 26, 20, 0.06);
  --bento-shadow-hover: rgba(33, 26, 20, 0.10);

  /* Semantic accents (muted, still light — used sparingly for status only) */
  --bento-success: #3D6B4C;
  --bento-error:   #A34A3A;
  --bento-warning: #B8863F;
  --bento-info:    #3D6B84;

  /* Spacing scale — 8px base */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --sp-9: 64px;
  --sp-10: 80px;

  /* Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-card:       0 1px 2px var(--bento-shadow), 0 8px 24px var(--bento-shadow);
  --shadow-card-hover: 0 2px 4px var(--bento-shadow-hover), 0 20px 36px var(--bento-shadow-hover);

  /* Motion */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* Loader timing — single source of truth, read by loader.js so the
     animation duration and the "safe to hide" gate can never drift apart */
  --loader-anim-ms: 1400;
  --loader-max-wait-ms: 6000;

  /* Typography */
  --font-display: 'Newsreader', Georgia, serif;
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Z-index scale */
  --z-nav: 100;
  --z-dropdown: 200;
  --z-modal: 500;
  --z-loader: 999;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
    --loader-anim-ms: 1;
  }
}