/* ============================================
   Gadgets-X Design Tokens
   ============================================ */

:root {
  /* Brand Colors */
  --gx-accent:      #FF4500;   /* Tech orange (link to deal/alert feel) */
  --gx-accent-dark: #CC3700;
  --gx-accent-light: #FF7A45;  /* Hover state — brighter warm orange */
  --gx-dark:        #0D0D0D;
  --gx-dark-2:      #1A1A1A;
  --gx-mid:         #2E2E2E;
  --gx-gray:        #6B7280;
  --gx-gray-light:  #E5E7EB;
  --gx-white:       #FFFFFF;
  --gx-bg:          #F9FAFB;

  /* Typography */
  --font-display: 'Inter', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-jp:      'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', sans-serif;

  /* Font Scale */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   24px;
  --fs-xl:   32px;
  --fs-2xl:  48px;

  /* Spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* Border */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.1);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.15);

  /* Deal / Badge Colors */
  --gx-hot:      #FF4500;   /* HOT バッジ（--gx-accent と同値） */
  --gx-new:      #22C55E;   /* NEW バッジ */
  --gx-cold:     #3B82F6;   /* COLD 投票・NEWS バッジ */
  --gx-discount: #EF4444;   /* 割引率バッジ */
  --gx-ai:       #06B6D4;   /* AI バッジ */
  --gx-pct:      #7C3AED;   /* -XX% バッジ */

  /* Animation */
  --duration-fast:  0.15s;
  --duration-base:  0.25s;
  --duration-slow:  0.4s;
  --ease-out:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
}