/*
 * AlphaDrive Design System - CSS Variables
 * https://alphadrive.co.jp/
 *
 * このファイルはAlphaDriveのWebサイトから抽出したデザイン変数です。
 * 新規ページ作成時は必ずこのファイルをimportしてブランドの一貫性を保ってください。
 *
 * 使用停止したコンポーネント → components.legacy.css を参照（import 不可）
 */

:root {

  /* ============================================
   * COLOR TOKENS
   * ============================================ */

  /* Brand Colors */
  --color-brand-blue:       #005ABE;  /* プライマリブルー / CTAボタン・リンク */
  --color-brand-blue-light: #0693e3;  /* ライトブルー / ホバー・アクセント */

  /* Neutral */
  --color-black:            #000000;
  --color-white:            #ffffff;
  --color-gray-300:         #abb8c3;  /* ボーダー・プレースホルダー */
  --color-gray-100:         #f5f7f9;  /* 背景グレー / セクション区切り */
  --color-gray-700:         #333333;  /* ボディテキスト */
  --color-gray-500:         #666666;  /* サブテキスト・キャプション */

  /* Semantic */
  --color-text-primary:     var(--color-black);
  --color-text-secondary:   var(--color-gray-500);
  --color-text-on-dark:     var(--color-white);
  --color-bg-primary:       var(--color-white);
  --color-bg-secondary:     var(--color-gray-100);
  --color-bg-dark:          var(--color-black);
  --color-accent:           var(--color-brand-blue);
  --color-border:           var(--color-gray-300);

  /* Gradients */
  --gradient-brand:         linear-gradient(135deg, #005ABE 0%, #0693e3 100%);
  --gradient-dark:          linear-gradient(135deg, #000000 0%, #1a1a2e 100%);


  /* ============================================
   * TYPOGRAPHY TOKENS
   * ============================================ */

  /* Font Family */
  --font-family-base:
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic Medium", "YuGothic", Meiryo, sans-serif;
  --font-family-en:
    "nimbus-sans", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-family-display:
    "marlide-display-variable", "nimbus-sans", "Inter", Arial, sans-serif;

  /* Display Font Variation（marlide-display-variable は wght 300 がブランドトーン） */
  --font-variation-display: "wght" 300;

  /* Font Size Scale — 本文・UI */
  --font-size-xs:    11px;
  --font-size-sm:    13px;
  --font-size-base:  16px;
  --font-size-md:    20px;
  --font-size-lg:    28px;
  --font-size-xl:    36px;
  --font-size-2xl:   40px;
  --font-size-3xl:   56px;

  /* Display Font Size Scale — marlide-display-variable 専用 */
  --font-size-display-xs:  28px;
  --font-size-display-sm:  48px;
  --font-size-display-md:  64px;
  --font-size-display-lg:  80px;
  --font-size-display-xl:  120px;
  --font-size-display-2xl: 144px;
  --font-size-display-3xl: 240px;

  /* Font Weight */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;
  --font-weight-black:   900;

  /* Line Height */
  --line-height-none:    1;
  --line-height-tight:   1.5;
  --line-height-base:    1.75;
  --line-height-relaxed: 2.0;

  /* Letter Spacing */
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   1.4px;
  --letter-spacing-wider:  2px;
  --letter-spacing-tight:  0;  /* 後方互換エイリアス */


  /* ============================================
   * SPACING TOKENS
   * ============================================ */

  --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;

  /* Section Padding */
  --section-padding-sm: var(--space-12);
  --section-padding-md: var(--space-20);
  --section-padding-lg: var(--space-32);


  /* ============================================
   * LAYOUT TOKENS
   * ============================================ */

  --container-width-sm:  640px;
  --container-width-md:  960px;
  --container-width-lg: 1200px;
  --container-width-xl: 1440px;

  --container-padding-x-sm: var(--space-5);
  --container-padding-x-md: var(--space-8);
  --container-padding-x-lg: var(--space-16);

  --grid-gap-sm: var(--space-4);
  --grid-gap-md: var(--space-6);
  --grid-gap-lg: var(--space-8);


  /* ============================================
   * BORDER TOKENS
   * ============================================ */

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

  --border-width-thin:   1px;
  --border-width-medium: 2px;
  --border-width-thick:  4px;


  /* ============================================
   * SHADOW TOKENS
   * ============================================ */

  --shadow-natural:  6px  6px  9px rgba(0, 0, 0, 0.20);
  --shadow-deep:    12px 12px 50px rgba(0, 0, 0, 0.40);
  --shadow-crisp:    6px  6px  0px rgb(0, 0, 0);
  --shadow-soft:     0px  4px 24px rgba(0, 0, 0, 0.10);


  /* ============================================
   * TRANSITION TOKENS
   * ============================================ */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;


  /* ============================================
   * Z-INDEX TOKENS
   * ============================================ */

  --z-base:       0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;

}