/* ═══════════════════════════════════════════════════════════
   Mano Design System — Base Tokens
   Raw values only. No opinions about where they're used.
   theme.css maps these into semantic context-specific variables.
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ── Raw Color Palette ─────────────────────────────────── */

  /* Warm neutrals (editorial) */
  --palette-warm-50:  #F7F6F3;
  --palette-warm-100: #F0EFEC;
  --palette-warm-200: #FAFAF8;
  --palette-warm-300: #E8E6E1;
  --palette-warm-400: #BFBCB7;
  --palette-warm-500: #8A8580;
  --palette-warm-600: #6B6762;
  --palette-warm-700: #555555;
  --palette-warm-900: #1A1A1A;

  /* Brand */
  --palette-blue:       #2AABEE;
  --palette-blue-soft:  rgba(42, 171, 238, 0.15);

  /* Semantic */
  --palette-amber:      #D97706;
  --palette-amber-soft: #FEF3C7;
  --palette-yellow:     #FEF08A;
  --palette-green:      #059669;
  --palette-green-sage: #E1E7BB;
  --palette-green-sage-dark: #4A7A5A;  /* text on sage bubble */
  --palette-red:        #B91C1C;

  /* Always-dark */
  --palette-ink:   #1A1A1A;
  --palette-white: #FFFFFF;

  /* ── Raw Typography ────────────────────────────────────── */
  --font-sans:   'DM Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  --font-serif:  'DM Serif Display', Georgia, serif;
  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  --font-mono:   'SF Mono', 'Fira Code', 'Menlo', monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   15px;
  --text-xl:   16px;
  --text-2xl:  20px;
  --text-3xl:  22px;
  --text-4xl:  26px;
  --text-5xl:  30px;

  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --leading-tight:   1.1;
  --leading-snug:    1.35;
  --leading-normal:  1.45;
  --leading-prose:   1.75;

  --tracking-wide:  0.08em;
  --tracking-wider: 0.10em;

  /* ── Raw Spacing ───────────────────────────────────────── */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  10px;
  --space-6:  12px;
  --space-7:  14px;
  --space-8:  16px;
  --space-9:  20px;
  --space-10: 24px;
  --space-11: 28px;
  --space-12: 32px;
  --space-13: 36px;
  --space-14: 40px;
  --space-15: 48px;

  /* ── Raw Radii ─────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  14px;
  --radius-full: 9999px;

  /* ── Raw Shadows ───────────────────────────────────────── */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);

  /* ── Transitions ───────────────────────────────────────── */
  --duration-fast:   100ms;
  --duration-normal: 200ms;
  --duration-slow:   280ms;
  --ease-default: ease;
  --ease-spring:  cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Layout ────────────────────────────────────────────── */
  --header-h:    56px;
  --header-h-md: 64px;
  --toc-width:   240px;
  --max-w:       1100px;
  --input-bar-h: 52px;

  /* ── Component sizes ───────────────────────────────────── */
  --touch-target: 44px;   /* HIG minimum touch target */

  /* ── Safe Areas ────────────────────────────────────────── */
  --safe-top:    env(safe-area-inset-top, 44px);
  --safe-bottom: env(safe-area-inset-bottom, 20px);

  /* ── Z-Index ───────────────────────────────────────────── */
  --z-header:  100;
  --z-overlay: 200;
  --z-input:   900;
  --z-nav:     950;
  --z-modal:   1000;
}