/* ==========================================================================
   Design Tokens - ブランドカラー・フォント・スペーシング等
   営業相手ごとにこのファイルの値を変更するだけで全ページに反映されます

   スペーシングルール: 基本8pxの倍数、一部4pxの倍数を許容
   ========================================================================== */

:root {
  /* =================================================================
     BRAND COLORS（営業先ごとにここを変更）
     ================================================================= */

  /* プライマリ：メインのブランドカラー（CTA・お知らせバー・アクティブ状態） */
  --color-primary: #ED993F;
  --color-primary-light: #F2B366;
  --color-primary-dark: #D4832E;

  /* セカンダリ：補助カラー（テキスト・アイコン等） */
  --color-secondary: #424242;
  --color-secondary-light: #616161;
  --color-secondary-dark: #212121;

  /* アクセント：検索ボタン等の限定的な強調 */
  --color-accent: #FFD700;
  --color-accent-dark: #E6C200;

  /* =================================================================
     NEUTRAL COLORS
     ================================================================= */
  --color-white: #FFFFFF;
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #EEEEEE;
  --color-gray-300: #E0E0E0;
  --color-gray-400: #BDBDBD;
  --color-gray-500: #9E9E9E;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;
  --color-black: #000000;

  /* =================================================================
     SEMANTIC COLORS
     ================================================================= */
  --color-success: #388E3C;
  --color-warning: #F57C00;
  --color-error: #D32F2F;
  --color-info: #1976D2;
  --color-rating: #F5A623;

  /* =================================================================
     CONTEXTUAL COLORS（上記トークンを参照）
     ================================================================= */

  /* 背景 */
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-gray-50);
  --color-bg-tertiary: var(--color-gray-100);

  /* テキスト */
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-tertiary: var(--color-gray-500);
  --color-text-inverse: var(--color-white);
  --color-text-link: var(--color-primary);

  /* ボーダー */
  --color-border: var(--color-gray-200);
  --color-border-light: var(--color-gray-100);
  --color-border-dark: var(--color-gray-300);

  /* =================================================================
     TYPOGRAPHY
     ================================================================= */
  --font-family-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  --font-family-heading: var(--font-family-base);

  /* フォントサイズ（分析結果ベース・8の倍数に近い値に整理）
     11px → 補足テキスト（税込表示等）
     12px → お知らせバー・パンくず
     14px → ナビ・商品カード名・本文小
     16px → 本文・ボタン
     18px → 商品カード価格
     20px → セクション見出し
     24px → ページタイトル・商品詳細価格
     28px → 大見出し */
  --font-size-2xs: 0.6875rem;  /* 11px — 例外的に4px倍数外だが分析結果に準拠 */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md: 1.125rem;    /* 18px */
  --font-size-lg: 1.25rem;     /* 20px */
  --font-size-xl: 1.5rem;      /* 24px */
  --font-size-2xl: 1.75rem;    /* 28px */
  --font-size-3xl: 2.25rem;    /* 36px — ヒーロー見出し用 */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-snug: 1.4;
  --line-height-base: 1.6;
  --line-height-loose: 1.8;

  /* =================================================================
     SPACING（8pxグリッド基準、4px倍数も許容）
     ================================================================= */
  --space-1: 0.25rem;   /*  4px  — 最小余白（テキスト間等） */
  --space-2: 0.5rem;    /*  8px  — カード内要素間 */
  --space-3: 0.75rem;   /* 12px  — カード内パディング */
  --space-4: 1rem;      /* 16px  — カード間ギャップ・コンテナパディング */
  --space-5: 1.25rem;   /* 20px  — カード間ギャップ（広め） */
  --space-6: 1.5rem;    /* 24px  — セクション見出し下マージン */
  --space-8: 2rem;      /* 32px  — セクション内余白 */
  --space-10: 2.5rem;   /* 40px  — セクション間余白（小） */
  --space-12: 3rem;     /* 48px  — セクション間余白（標準） */
  --space-14: 3.5rem;   /* 56px  — セクション間余白（大） */
  --space-16: 4rem;     /* 64px  — ページ上下余白 */

  /* =================================================================
     BORDER RADIUS（分析結果ベース）
     ================================================================= */
  --radius-none: 0;        /* カード・入力・画像（矩形） */
  --radius-sm: 4px;        /* CTAボタン・ゴーストボタン */
  --radius-pill: 24px;     /* ピル型ボタン（カートドロワーCTA） */
  --radius-full: 9999px;   /* カテゴリアイコン（円形） */

  /* =================================================================
     LAYOUT
     ================================================================= */
  --container-max-width: 1200px;
  --container-padding: var(--space-4);  /* 16px */

  /* ヘッダー */
  --header-announcement-height: 32px;   /* 8px × 4 */
  --header-main-height: 64px;           /* 8px × 8 */
  --header-nav-height: 40px;            /* 8px × 5 */

  /* 商品カード */
  --card-padding: var(--space-3);       /* 12px */
  --card-gap: var(--space-5);           /* 20px */
  --card-image-ratio: 1 / 1;           /* 正方形 */

  /* カートドロワー */
  --drawer-width: 360px;               /* 8px × 45 */

  /* =================================================================
     TRANSITION
     ================================================================= */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* =================================================================
     Z-INDEX
     ================================================================= */
  --z-dropdown: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-overlay: 400;
}