/* ==========================================================================
   CSS Variables (Design Tokens) - 完全版
   sp-life-area2 plugin
   ========================================================================== */

/* ==========================================================================
   1. グローバル共通トークン
   ========================================================================== */
:root {

  /* --- ベースカラー（サイト共通） --- */
  --color-site-primary:    #339900;   /* サイトTOP色 */
  --color-cta-red:         #C0392B;   /* CTAボタン赤 */
  --color-supervisor:      #F39C12;   /* 監修者バッジ */
  --color-success:         #27AE60;
  --color-warning:         #F39C12;
  --color-error:           #C0392B;

  /* --- グレースケール --- */
  --gray-50:   #FAFAFA;
  --gray-100:  #F5F5F5;
  --gray-200:  #EEEEEE;
  --gray-300:  #E0E0E0;
  --gray-400:  #BDBDBD;
  --gray-500:  #9E9E9E;
  --gray-600:  #757575;
  --gray-700:  #616161;
  --gray-800:  #424242;
  --gray-900:  #212121;

  /* --- テキストカラー --- */
  --color-text-primary:    #1A1A1A;
  --color-text-secondary:  #555555;
  --color-text-muted:      #888888;
  --color-text-inverse:    #FFFFFF;
  --color-link:            #0066CC;
  --color-link-hover:      #004499;

  /* --- 背景カラー --- */
  --color-bg-base:         #FFFFFF;
  --color-bg-alt:          #F8F9FA;
  --color-bg-dark:         #1A1A1A;
  --color-border:          #E0E0E0;
  --color-border-dark:     #BDBDBD;

  /* --- フォント --- */
  --font-family-base:
    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
    Meiryo, 'Yu Gothic', sans-serif;
  --font-family-mono:
    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --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.875rem;  /* 30px */
  --font-size-3xl:   2.25rem;   /* 36px */
  --font-size-4xl:   3rem;      /* 48px */

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

  --line-height-tight:   1.25;
  --line-height-snug:    1.4;
  --line-height-base:    1.7;
  --line-height-relaxed: 1.9;

  /* --- スペーシング（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-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* --- ブレイクポイント（参照用） --- */
  /* --bp-sm: 480px  */
  /* --bp-md: 768px  */
  /* --bp-lg: 1024px */
  /* --bp-xl: 1280px */

  /* --- コンテナ幅 --- */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;

  /* --- border-radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* --- シャドウ --- */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:   0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:   0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.05);
  --shadow-xl:   0 20px 25px rgba(0,0,0,.10), 0 10px 10px rgba(0,0,0,.04);

  /* --- トランジション --- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* --- z-index --- */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-header:  400;

  /* --- デフォルトテーマ（水サービス） --- */
  --color-primary:         #0693e3;
  --color-primary-light:   #3DB1F0;
  --color-primary-soft:    #E8F4FA;
  --color-primary-dark:    #0578B8;
  --color-primary-text-on: #FFFFFF;
  --color-accent:          #0693e3;
  --color-accent-light:    #3DB1F0;
  --color-accent-soft:     #E8F4FA;
  --color-accent-dark:     #0578B8;
  --color-text-on-primary: #FFFFFF;
  --color-text-on-accent:  #FFFFFF;
}

/* ==========================================================================
   2. サービス別テーマ
   ========================================================================== */

/* --- 水サービス --- */
body.theme-water {
  --color-primary:         #0693e3;
  --color-primary-light:   #3DB1F0;
  --color-primary-soft:    #E8F4FA;
  --color-primary-dark:    #0578B8;
  --color-primary-text-on: #FFFFFF;
  --color-accent:          #0693e3;
  --color-accent-light:    #3DB1F0;
  --color-accent-soft:     #E8F4FA;
  --color-accent-dark:     #0578B8;
  --color-text-on-primary: #FFFFFF;
  --color-text-on-accent:  #FFFFFF;
}

/* --- ガラスサービス（2層構造） --- */
body.theme-glass {
  /* ベース（既存サイト一致） */
  --color-primary:         #cccccc;
  --color-primary-light:   #E0E0E0;
  --color-primary-soft:    #F5F5F5;
  --color-primary-dark:    #999999;
  --color-primary-text-on: #1A1A1A;

  /* アクセントカラー（テキスト・CTA・見出し・ボタン用） */
  --color-accent:          #006B7C;
  --color-accent-light:    #00838F;
  --color-accent-soft:     #E0F7FA;
  --color-accent-dark:     #004D5A;
  --color-text-on-primary: #1A1A1A;
  --color-text-on-accent:  #FFFFFF;
}

/* --- 鍵サービス --- */
body.theme-key {
  --color-primary:         #fcb900;
  --color-primary-light:   #FFD133;
  --color-primary-soft:    #FFF8E1;
  --color-primary-dark:    #D89E00;
  --color-primary-text-on: #1A1A1A;
  --color-accent:          #fcb900;
  --color-accent-light:    #FFD133;
  --color-accent-soft:     #FFF8E1;
  --color-accent-dark:     #D89E00;
  --color-text-on-primary: #1A1A1A;
  --color-text-on-accent:  #1A1A1A;
}