@charset "utf-8";
/**
 * Design Tokens
 *
 * テーマ全体で使用するデザイントークン（変数）を定義します。
 * このファイルを変更するだけでサイト全体のトーンを調整できます。
 *
 * @package LivalestCo
 */

:root {
  /* -------------------------------------------------------
   * Color
   * ------------------------------------------------------- */

  /* Primary */
  --color-primary: #dc0714;
  --color-primary-rgb: 220, 7, 20;
  --color-primary-dark: #640000;

  /* Accent (coral orange) */
  --color-accent: #f97316;
  --color-accent-rgb: 249, 115, 22;
  --color-accent-light: #fb923c;

  /* Neutral */
  --color-text: #444;
  --color-text-rgb: 68, 68, 68;
  --color-white: #fff;
  --color-white-rgb: 255, 255, 255;
  --color-bg: #f8f9fa;
  --color-bg-rgb: 248, 249, 250;
  --color-border: #e2e2e2;

  /* Semantic */
  --color-success: #22c55e;
  --color-warning: #fb9200;
  --color-error: #e53e3e;
  --color-info: #3b82f6;


  /* Gradients */
  --gradient-warm: linear-gradient(45deg, #ff4d4d, #dc0714, #a00010, #640000);

  /* -------------------------------------------------------
   * Font
   * ------------------------------------------------------- */

  --font-base: Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

  /* Fluid typography: clamp(min, preferred, max)
   * 320px〜1280pxの間で滑らかにスケール
   * 計算式: preferred = min + (max - min) * ((100vw - 320px) / (1280px - 320px))
   *       → rem + vw の組み合わせに変換 */
  --font-size-xs:  clamp(0.6875rem, 0.656rem + 0.16vw, 0.75rem);     /* 11px → 12px */
  --font-size-sm:  clamp(0.75rem,   0.703rem + 0.24vw, 0.875rem);    /* 12px → 14px */
  --font-size-base: clamp(0.875rem, 0.813rem + 0.31vw, 1rem);        /* 14px → 16px */
  --font-size-lg:  clamp(1rem,      0.938rem + 0.31vw, 1.125rem);    /* 16px → 18px */
  --font-size-xl:  clamp(1.125rem,  1.031rem + 0.47vw, 1.25rem);     /* 18px → 20px */
  --font-size-2xl: clamp(1.25rem,   1.063rem + 0.94vw, 1.5rem);      /* 20px → 24px */
  --font-size-3xl: clamp(1.5rem,    1.125rem + 1.88vw, 2rem);        /* 24px → 32px */
  --font-size-4xl: clamp(1.75rem,   1.125rem + 3.13vw, 2.5rem);      /* 28px → 40px */

  --line-height-tight: 1.4;
  --line-height-base: 1.8;
  --line-height-loose: 2.0;

  --letter-spacing-tight: 0.5px;
  --letter-spacing-base: 2px;
  --letter-spacing-wide: 4px;

  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* -------------------------------------------------------
   * Space  (8px grid)
   * ------------------------------------------------------- */

  --space-0: 0;
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 2.5rem;   /* 40px */
  --space-8: 3rem;     /* 48px */
  --space-9: 3.5rem;   /* 56px */
  --space-10: 4rem;    /* 64px */
  --space-12: 5rem;    /* 80px */
  --space-16: 8rem;    /* 128px */

  /* -------------------------------------------------------
   * Radius
   * ------------------------------------------------------- */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* -------------------------------------------------------
   * Shadow
   * ------------------------------------------------------- */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* -------------------------------------------------------
   * Transition
   * ------------------------------------------------------- */

  --duration-fast: 0.15s;
  --duration-base: 0.4s;
  --duration-slow: 0.6s;
  --easing-base: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --easing-out: cubic-bezier(0.33, 1, 0.68, 1);

  /* -------------------------------------------------------
   * Z-index
   * ------------------------------------------------------- */

  --z-header: 100;
  --z-spmenu-modal: 200;
  --z-spmenu: 300;
  --z-overlay: 400;
  --z-modal: 500;

  /* -------------------------------------------------------
   * Layout
   * ------------------------------------------------------- */

  --content-width: 1200px;
  --sidebar-width: 320px;

  /* Breakpoints (コメントで明記。CSS変数は @media に使えない)
   * --bp-sm: 480px
   * --bp-md: 768px
   * --bp-lg: 960px
   * --bp-xl: 1280px
   */
}