/* ==========================================================================
   Design Tokens — onoretty EC-CUBE (compiled)
   Source: design/tokens/ (colors, typography, spacing, effects)
   Version: 1.1.0 | Last Updated: 2026-03-22
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Colors
     ------------------------------------------------------------------ */

  /* Primary */
  --color-primary: #364360;
  --color-primary-dark: #304267;

  /* Accent */
  --color-accent: #00c9e3;
  --color-accent-dark: #029cbf;
  --color-accent-sub: #56adb9;

  /* Text */
  --color-text-white: #fff;
  --color-text-base: #222;
  --color-text-dark: #3c3c3c;
  --color-text-gray: #4d4d4d;
  --color-text-gray-dark: #5c5c5c;
  --color-text-muted: #707070;

  /* Background */
  --color-bg-white: #ffffff;
  --color-bg-gray-1: #f8f8f8;
  --color-bg-gray-2: #f2f5fa;
  --color-bg-gray-3: #eaeef1;
  --color-bg-gray-4: #d9dce3;

  /* Border */
  --color-border: #c9c9c9;

  /* Semantic — アクションカラー */
  --color-accent-pink: #e08e8e;
  --color-danger: red;
  /* 後方互換エイリアス */
  --color-error: var(--color-accent-pink);
  --color-error-strong: var(--color-danger);

  /* ------------------------------------------------------------------
     Typography — Font Family
     ------------------------------------------------------------------ */
  --font-family-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-family-en: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-base: "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ------------------------------------------------------------------
     Typography — Font Size
     ------------------------------------------------------------------ */
  --font-size-3xs: 0.625rem;
  --font-size-2xs: 0.6875rem;
  --font-size-xs: 0.8125rem;
  --font-size-sm-2: 0.875rem;
  --font-size-sm: 0.9375rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.0625rem;
  --font-size-xl: 1.125rem;
  --font-size-2xl: 1.25rem;
  --font-size-3xl: 1.375rem;
  --font-size-4xl: 1.4375rem;
  --font-size-5xl: 1.625rem;
  --font-size-6xl: 2.625rem;

  /* ------------------------------------------------------------------
     Typography — Font Weight
     ------------------------------------------------------------------ */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* ------------------------------------------------------------------
     Typography — Line Height
     ------------------------------------------------------------------ */
  --line-height-xs: 16px;
  --line-height-sm: 18px;
  --line-height-md: 20px;
  --line-height-lg: 21px;
  --line-height-xl: 26px;
  --line-height-2xl: 31px;
  --line-height-3xl: 36px;
  --line-height-4xl: 38px;
  --line-height-5xl: 57px;
  --line-height-6xl: 64px;
  --line-height-7xl: 106px;

  /* ------------------------------------------------------------------
     Typography — Letter Spacing
     ------------------------------------------------------------------ */
  --letter-spacing-tight: -0.55px;
  --letter-spacing-normal: 0;
  --letter-spacing-xs: 0.26px;
  --letter-spacing-sm: 0.36px;
  --letter-spacing-md: 0.39px;
  --letter-spacing-base: 0.45px;
  --letter-spacing-lg: 0.5px;
  --letter-spacing-xl: 0.6px;
  --letter-spacing-2xl: 0.75px;
  --letter-spacing-3xl: 0.9px;
  --letter-spacing-4xl: 1px;
  --letter-spacing-5xl: 1.1px;
  --letter-spacing-6xl: 1.15px;
  --letter-spacing-7xl: 2.1px;

  /* ------------------------------------------------------------------
     Spacing（4px 基準スケール）
     ------------------------------------------------------------------ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ------------------------------------------------------------------
     Border Radius
     ------------------------------------------------------------------ */
  --radius-none: 0;
  --radius-sm: 7px;
  --radius-md: 11px;
  --radius-lg: 17px;
  --radius-full: 9999px;

  /* ------------------------------------------------------------------
     Shadow
     ------------------------------------------------------------------ */
  --shadow-sm: 0 2px 2px rgba(0, 0, 0, 0.16);
  --shadow-header: 0 1px 3px rgba(0, 0, 0, 0.15);

  /* ------------------------------------------------------------------
     Transition
     ------------------------------------------------------------------ */
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;

  /* ------------------------------------------------------------------
     Breakpoint（参照用コメント — メディアクエリで使用）
     ------------------------------------------------------------------ */
  /* Breakpoints:
     SP:       ~767px (default)
     Tablet:   768px~1919px  @media (min-width: 768px) and (max-width: 1919px)
     PC:       1920px~       @media (min-width: 1920px)
  */
}