/**
 * Design tokens from Figma (Dpx3s11LRHGGX4UVuZkRY9)
 * Colors, typography, spacing, radii
 * Updated: Increased font sizes for better PC readability.
 */
:root {
  /* Colors */
  --km-bg: #FFF7E9;
  --km-sand: #F7F3EC;
  --km-text: #544B3C;
  --km-text-muted: #696969;
  --km-accent: #FF823F;
  --km-blue: #73BDD9;
  --km-blueDeep: #1A82C4;
  --km-purple: #6A4C92;
  --km-yellow: #FFC93C;
  --km-red: #FE585E;
  --km-green: #8AC927;
  --km-gray: #EEEEEE;
  --km-white: #fff;
  --km-border: #E6E6E6;
  --km-shadow: 0 0 24px rgba(0, 0, 0, 0.05);
  --km-brown: #DA765B;
  --km-brown-dark: #883b28;
  --km-blue-light: #72C7E7;
  --km-charcoal: #202124;
  --km-text-warm: #5a5246;
  --km-dark-gray: #333;
  --km-mid-gray: #666;
  --km-gray-mid: #888;
  --km-gray-bg: #f5f5f5;
  --km-sand-light: #fffbf5;
  --km-border-mid: #e0e0e0;
  --km-border-soft: #ccc;
  --km-divider: #ddd;
  --km-placeholder: #aaa;
  --km-accent-dark: #f26100;
  --km-cream: #FFEECC;
  --km-radius: 20px;
  --km-radius-lg: 30px;
  --km-radius-card: 12px;

  /* Search UI */
  --km-search-chip-bg: #f8fcfe;
  --km-search-chip-border: #b9cbd1;
  --km-search-chip-text: #5c6e73;
  --km-search-chip-hover-bg: #dfeffd;
  --km-search-chip-hover-border: #6ea6d4;
  --km-search-chip-active-bg: linear-gradient(135deg, #3FA9F5, #1E6BD6);
  --km-search-chip-active-border: #1E6BD6;
  --km-search-chip-active-shadow: 0 8px 16px rgba(30, 107, 214, 0.28);

  --km-search-btn-bg: #fff;
  --km-search-btn-border: #c6d6db;
  --km-search-btn-text: #5c6e73;
  --km-search-btn-hover-bg: #3FA9F5;
  --km-search-btn-hover-border: #1E6BD6;
  --km-search-btn-hover-text: #fff;

  /* Typography (Optimized for PC) */
  --km-font-hero-lg: 54px;
  --km-font-hero-sm: 44px;
  --km-font-h1: 68px;
  --km-font-h2: 40px;
  --km-font-h3: 24px;
  --km-font-body: 18px;
  --km-font-body-sm: 16px;
  --km-font-caption: 14px;
  --km-font-kicker: 22px;
  --km-line-height-tight: 1.2;
  --km-line-height-body: 1.7;

  /* Spacing */
  --km-container: 1280px;
  --km-gap: 48px;
  --km-gap-sm: 16px;
  --km-section-pad: 100px;
  --km-section-pad-lg: 140px;
}
