/*
Theme Name: RayPhoneAI
Theme URI: https://rayphone.com
Author: Jyumaru / Rayphone
Author URI: https://rayphone.com
Description: AI × ライティング専門メディア向けWordPressテーマ。ダークテック系デザイン。全カラー・フォント・レイアウトをWordPress Customizerから変更可能。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rayphoneai
Tags: dark, technology, blog, ai, magazine, customizable, responsive
*/

/* =============================================
   CSS カスタムプロパティ（Customizerで上書き可能）
   ============================================= */
:root {
  /* --- Brand Colors --- */
  --color-primary:        #00d4ff;   /* シアン：アクセント */
  --color-primary-dark:   #0099bb;
  --color-secondary:      #7c5cfc;   /* パープル：サブアクセント */
  --color-accent:         #ff6b6b;   /* レッド：強調 */

  /* --- Background --- */
  --color-bg:             #080c18;   /* メイン背景 */
  --color-bg-secondary:   #0d1226;   /* カード・セクション背景 */
  --color-bg-tertiary:    #121832;   /* サイドバー・フッター */
  --color-border:         #1e2a4a;   /* ボーダー */

  /* --- Text --- */
  --color-text:           #e8eaf0;   /* 本文テキスト */
  --color-text-muted:     #8899bb;   /* サブテキスト */
  --color-text-heading:   #ffffff;   /* 見出し */
  --color-text-link:      #00d4ff;   /* リンク */

  /* --- Header --- */
  --color-header-bg:      rgba(8, 12, 24, 0.95);
  --color-header-text:    #e8eaf0;
  --color-header-border:  #1e2a4a;

  /* --- Button --- */
  --color-btn-primary-bg:   #00d4ff;
  --color-btn-primary-text: #080c18;
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: #00d4ff;
  --color-btn-secondary-text:   #00d4ff;

  /* --- Category Badge Colors --- */
  --cat-ai-technology:     #00d4ff;
  --cat-tool-reviews:      #7c5cfc;
  --cat-trend-analysis:    #ff6b6b;
  --cat-prompt-engineering:#f59e0b;
  --cat-writing-skills:    #10b981;
  --cat-use-cases:         #ec4899;
  --cat-default:           #6b7280;

  /* --- Cards --- */
  --card-bg:               #0d1226;
  --card-border:           #1e2a4a;
  --card-border-hover:     #00d4ff;
  --card-shadow:           0 4px 24px rgba(0,0,0,0.4);
  --card-shadow-hover:     0 8px 40px rgba(0, 212, 255, 0.15);
  --card-radius:           12px;

  /* --- Typography --- */
  --font-body:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-heading: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
  --font-size-base: 16px;
  --line-height-base: 1.8;

  /* --- Layout --- */
  --container-width: 1200px;
  --content-width:   800px;
  --sidebar-width:   320px;
  --gap:             24px;
  --section-gap:     64px;

  /* --- Hero --- */
  --hero-overlay-from: rgba(8, 12, 24, 0.3);
  --hero-overlay-to:   rgba(8, 12, 24, 0.85);

  /* --- Transitions --- */
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}