/* ============================================
   デザイントークン — パラダイスファクトリー
   ※ このファイルを直接編集しない（Figma Variables が正）
   ============================================ */

/* --- Colors --- */
:root {
  /* Brand */
  --color-primary:       #D42A7E;   /* ホットピンク（フッター・アクセント） */
  --color-primary-light: #E5509A;
  --color-yellow:        #FFE200;   /* About セクション背景 */
  --color-yellow-dark:   #F0D600;

  /* Text */
  --color-text-base:     #1a1a1a;
  --color-text-muted:    #666666;
  --color-text-light:    #999999;
  --color-text-invert:   #ffffff;

  /* Background */
  --color-bg-base:       #ffffff;
  --color-bg-alt:        #f5f5f5;
  --color-bg-blue:       #E4EDF8;   /* Eventセクション背景 */
  --color-bg-ghost:      #F0F0F0;   /* Positive Waku Waku テキスト色 */

  /* Misc */
  --color-border:        #E0E0E0;
  --color-black:         #000000;
  --color-white:         #ffffff;
}

/* --- Typography --- */
:root {
  --font-sans:   'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-serif:  'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  --font-en:     'Inter', 'Helvetica Neue', Arial, sans-serif;

  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  1.875rem;   /*  30px */
  --text-4xl:  2.25rem;    /*  36px */
  --text-5xl:  3rem;       /*  48px */
  --text-6xl:  3.75rem;    /*  60px */
  --text-7xl:  4.5rem;     /*  72px */
  --text-8xl:  6rem;       /*  96px */

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;
  --leading-ja:     1.8;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-widest:   0.1em;
}

/* --- Spacing --- */
:root {
  --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;
  --space-32: 128px;
}

/* --- Border Radius --- */
:root {
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;
}

/* --- Shadows --- */
:root {
  --shadow-sm:  0 1px 2px rgba(0,0,0,.05);
  --shadow-md:  0 4px 6px rgba(0,0,0,.07);
  --shadow-lg:  0 10px 15px rgba(0,0,0,.1);
  --shadow-xl:  0 20px 25px rgba(0,0,0,.1);
}

/* --- Transitions --- */
:root {
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --ease-default:    ease;
  --ease-in-out:     ease-in-out;
}

/* --- Z-index --- */
:root {
  --z-base:    0;
  --z-above:   10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-header:  300;
  --z-toast:   400;
}