/**
 * NOCODEWORKS Color Palette System
 *
 * 5 Color Palettes:
 * 1. Aizome (藍染) - Default indigo blue theme
 * 2. Washi (和紙) - Traditional Japanese: paper white, sumi black, gold, vermilion
 * 3. Sakura (桜) - Cherry blossom pink theme
 * 4. Matcha (抹茶) - Green tea theme
 * 5. Tsuki (月) - Moon/night purple theme
 */

/* ============================================
   Palette: Aizome (藍染) - Default
   Indigo blue inspired by traditional Japanese indigo dyeing
   ============================================ */
[data-palette="aizome"],
:root {
  /* Light mode */
  --nw-palette-bg: #f5f5f0;
  --nw-palette-text: #1c1c1c;
  --nw-palette-text-muted: #6b7280;
  --nw-palette-primary: #1e3a5f;
  --nw-palette-secondary: #0f1c3f;
  --nw-palette-accent: #d4a574;
  --nw-palette-surface: #ffffff;
  --nw-palette-border: rgba(30, 58, 95, 0.1);
  --nw-palette-shadow: 0 1px 3px rgba(30, 58, 95, 0.1), 0 1px 2px rgba(30, 58, 95, 0.06);
  --nw-palette-shadow-hover: 0 10px 15px rgba(30, 58, 95, 0.1), 0 4px 6px rgba(30, 58, 95, 0.05);
  --nw-palette-gradient: linear-gradient(135deg, #1e3a5f 0%, #0f1c3f 100%);

  /* Background gradient - subtle deep sea with faint light */
  --nw-palette-bg-gradient: radial-gradient(ellipse at top, rgba(30, 58, 95, 0.08) 0%, rgba(15, 28, 63, 0.03) 50%, transparent 100%);

  /* Font settings */
  --nw-palette-font-heading: 'Noto Sans JP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --nw-palette-font-body: 'Noto Sans JP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --nw-palette-font-accent: 'Noto Serif JP', Georgia, serif;
}

[data-theme="dark"][data-palette="aizome"],
[data-theme="dark"]:root {
  --nw-palette-bg: #0f1c3f;
  --nw-palette-text: #f5f5f0;
  --nw-palette-text-muted: #9ca3af;
  --nw-palette-primary: #6b9ac4;
  --nw-palette-secondary: #9dbad5;
  --nw-palette-accent: #d4a574;
  --nw-palette-surface: #1e3a5f;
  --nw-palette-border: rgba(107, 154, 196, 0.2);
  --nw-palette-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --nw-palette-shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.4);
  --nw-palette-gradient: linear-gradient(135deg, #1e3a5f 0%, #0f1c3f 100%);

  /* Background gradient - deep sea with faint blue light */
  --nw-palette-bg-gradient: radial-gradient(ellipse at top, rgba(107, 154, 196, 0.12) 0%, rgba(30, 58, 95, 0.05) 50%, transparent 100%);
}

/* ============================================
   Palette: Washi (和紙)
   Traditional Japanese: pure white paper, sumi ink black, gold, vermilion
   純然たる和の美 - Pure Japanese aesthetic
   白と墨黒の上品なコントラスト
   朱色と金色はポイントカラーとして使用
   ============================================ */
[data-palette="washi"] {
  /* Light mode - 純白の和紙に墨黒 */
  --nw-palette-bg: #ffffff;            /* 純白 - pure white paper */
  --nw-palette-text: #1a1612;          /* 墨黒 - rich sumi ink black */
  --nw-palette-text-muted: #4a4540;    /* 濃鼠 - dark gray with warmth */
  --nw-palette-primary: #1a1612;       /* 墨黒 - sumi black for headings */
  --nw-palette-secondary: #b8292f;     /* 朱色 - vermilion as point color */
  --nw-palette-accent: #a67c00;        /* 金色 - antique gold as accent */
  --nw-palette-surface: #fefefe;       /* 白磁 - porcelain white */
  --nw-palette-border: rgba(26, 22, 18, 0.1);
  --nw-palette-shadow: 0 1px 3px rgba(26, 22, 18, 0.06), 0 1px 2px rgba(26, 22, 18, 0.03);
  --nw-palette-shadow-hover: 0 8px 16px rgba(26, 22, 18, 0.08), 0 3px 6px rgba(26, 22, 18, 0.04);
  --nw-palette-gradient: linear-gradient(135deg, #1a1612 0%, #2a2420 100%);

  /* Background gradient - subtle warmth like morning light on washi paper */
  --nw-palette-bg-gradient: radial-gradient(ellipse at top, rgba(166, 124, 0, 0.04) 0%, rgba(26, 22, 18, 0.02) 50%, transparent 100%);

  /* Washi uses elegant traditional serif font */
  --nw-palette-font-heading: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --nw-palette-font-body: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --nw-palette-font-accent: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
}

[data-theme="dark"][data-palette="washi"] {
  /* Dark mode - 墨黒に純白の文字 */
  --nw-palette-bg: #1a1612;            /* 墨黒 - deep sumi ink black */
  --nw-palette-text: #f8f6f3;          /* 白磁色 - pure porcelain white */
  --nw-palette-text-muted: #b8b4ae;    /* 銀鼠 - silver gray */
  --nw-palette-primary: #f8f6f3;       /* 白磁色 - white for headings */
  --nw-palette-secondary: #d4464b;     /* 明朱 - bright vermilion as point color */
  --nw-palette-accent: #c9a227;        /* 金色 - gold as accent */
  --nw-palette-surface: #2a2420;       /* 濃墨 - dark ink surface */
  --nw-palette-border: rgba(200, 195, 188, 0.15);
  --nw-palette-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  --nw-palette-shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.6);
  --nw-palette-gradient: linear-gradient(135deg, #2a2420 0%, #1a1612 100%);

  /* Background gradient - gold glow in darkness */
  --nw-palette-bg-gradient: radial-gradient(ellipse at top, rgba(201, 162, 39, 0.08) 0%, rgba(42, 36, 32, 0.04) 50%, transparent 100%);
}

/* ============================================
   Palette: Sakura (桜)
   Cherry blossom pink with natural greens
   春の息吹 - Breath of spring
   ============================================ */
[data-palette="sakura"] {
  /* Light mode */
  --nw-palette-bg: #fdf6f8;            /* 桜色 - pale sakura */
  --nw-palette-text: #2d2d2d;
  --nw-palette-text-muted: #6b6b6b;
  --nw-palette-primary: #d4729c;       /* 桃色 - peach pink */
  --nw-palette-secondary: #b8557d;     /* 深桃 - deep pink */
  --nw-palette-accent: #7fb069;        /* 若草色 - young grass green */
  --nw-palette-surface: #ffffff;
  --nw-palette-border: rgba(212, 114, 156, 0.15);
  --nw-palette-shadow: 0 1px 3px rgba(212, 114, 156, 0.1), 0 1px 2px rgba(212, 114, 156, 0.06);
  --nw-palette-shadow-hover: 0 10px 15px rgba(212, 114, 156, 0.12), 0 4px 6px rgba(212, 114, 156, 0.06);
  --nw-palette-gradient: linear-gradient(135deg, #d4729c 0%, #b8557d 100%);

  /* Background gradient - spring breeze with cherry blossom */
  --nw-palette-bg-gradient: radial-gradient(ellipse at top, rgba(212, 114, 156, 0.06) 0%, rgba(127, 176, 105, 0.03) 50%, transparent 100%);

  --nw-palette-font-heading: 'Noto Sans JP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --nw-palette-font-body: 'Noto Sans JP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --nw-palette-font-accent: 'Noto Serif JP', Georgia, serif;
}

[data-theme="dark"][data-palette="sakura"] {
  --nw-palette-bg: #1f1a1c;            /* 暗い桜色 */
  --nw-palette-text: #f8f4f5;
  --nw-palette-text-muted: #a89a9e;
  --nw-palette-primary: #e8a4be;       /* 明るい桃色 */
  --nw-palette-secondary: #f0c4d4;
  --nw-palette-accent: #98c98a;        /* 明るい若草 */
  --nw-palette-surface: #2d2528;
  --nw-palette-border: rgba(232, 164, 190, 0.2);
  --nw-palette-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --nw-palette-shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.4);
  --nw-palette-gradient: linear-gradient(135deg, #2d2528 0%, #1f1a1c 100%);

  /* Background gradient - night cherry blossom glow */
  --nw-palette-bg-gradient: radial-gradient(ellipse at top, rgba(232, 164, 190, 0.10) 0%, rgba(152, 201, 138, 0.04) 50%, transparent 100%);
}

/* ============================================
   Palette: Matcha (抹茶)
   Green tea inspired - calm and sophisticated
   茶の湯の心 - Spirit of tea ceremony
   ============================================ */
[data-palette="matcha"] {
  /* Light mode */
  --nw-palette-bg: #f5f7f4;            /* 薄緑 - pale green */
  --nw-palette-text: #1e2a1e;          /* 深緑 - deep green */
  --nw-palette-text-muted: #5a6b5a;
  --nw-palette-primary: #4a7c4e;       /* 抹茶色 - matcha green */
  --nw-palette-secondary: #2d5a30;     /* 深緑 - forest green */
  --nw-palette-accent: #c9a45c;        /* 茶色系金 - tea gold */
  --nw-palette-surface: #ffffff;
  --nw-palette-border: rgba(74, 124, 78, 0.12);
  --nw-palette-shadow: 0 1px 3px rgba(74, 124, 78, 0.1), 0 1px 2px rgba(74, 124, 78, 0.06);
  --nw-palette-shadow-hover: 0 10px 15px rgba(74, 124, 78, 0.1), 0 4px 6px rgba(74, 124, 78, 0.05);
  --nw-palette-gradient: linear-gradient(135deg, #4a7c4e 0%, #2d5a30 100%);

  /* Background gradient - tea ceremony tranquility */
  --nw-palette-bg-gradient: radial-gradient(ellipse at top, rgba(74, 124, 78, 0.06) 0%, rgba(201, 164, 92, 0.03) 50%, transparent 100%);

  --nw-palette-font-heading: 'Noto Sans JP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --nw-palette-font-body: 'Noto Sans JP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --nw-palette-font-accent: 'Noto Serif JP', Georgia, serif;
}

[data-theme="dark"][data-palette="matcha"] {
  --nw-palette-bg: #141a14;            /* 深い緑黒 */
  --nw-palette-text: #e8ede6;
  --nw-palette-text-muted: #9bab9a;
  --nw-palette-primary: #7db57f;       /* 明るい抹茶 */
  --nw-palette-secondary: #9fd4a1;
  --nw-palette-accent: #d4b86a;
  --nw-palette-surface: #1e2a1e;
  --nw-palette-border: rgba(125, 181, 127, 0.2);
  --nw-palette-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --nw-palette-shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.4);
  --nw-palette-gradient: linear-gradient(135deg, #1e2a1e 0%, #141a14 100%);

  /* Background gradient - forest at night with gentle light */
  --nw-palette-bg-gradient: radial-gradient(ellipse at top, rgba(125, 181, 127, 0.10) 0%, rgba(212, 184, 106, 0.04) 50%, transparent 100%);
}

/* ============================================
   Palette: Tsuki (月)
   Moon/night theme with purple and silver
   月夜の幻想 - Moonlit fantasy
   ============================================ */
[data-palette="tsuki"] {
  /* Light mode */
  --nw-palette-bg: #f7f5fa;            /* 淡い藤色 - pale wisteria */
  --nw-palette-text: #2a2438;          /* 濃紫 - deep purple */
  --nw-palette-text-muted: #6b6080;
  --nw-palette-primary: #7c5cbf;       /* 藤紫 - wisteria purple */
  --nw-palette-secondary: #5a3d96;     /* 深紫 - deep violet */
  --nw-palette-accent: #b8a9c9;        /* 銀藤 - silver wisteria */
  --nw-palette-surface: #ffffff;
  --nw-palette-border: rgba(124, 92, 191, 0.12);
  --nw-palette-shadow: 0 1px 3px rgba(124, 92, 191, 0.1), 0 1px 2px rgba(124, 92, 191, 0.06);
  --nw-palette-shadow-hover: 0 10px 15px rgba(124, 92, 191, 0.12), 0 4px 6px rgba(124, 92, 191, 0.06);
  --nw-palette-gradient: linear-gradient(135deg, #7c5cbf 0%, #5a3d96 100%);

  /* Background gradient - moonlit fantasy */
  --nw-palette-bg-gradient: radial-gradient(ellipse at top, rgba(124, 92, 191, 0.06) 0%, rgba(184, 169, 201, 0.03) 50%, transparent 100%);

  --nw-palette-font-heading: 'Noto Sans JP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --nw-palette-font-body: 'Noto Sans JP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --nw-palette-font-accent: 'Noto Serif JP', Georgia, serif;
}

[data-theme="dark"][data-palette="tsuki"] {
  --nw-palette-bg: #15121e;            /* 夜空 - night sky */
  --nw-palette-text: #e8e4f0;
  --nw-palette-text-muted: #a098b8;
  --nw-palette-primary: #a38fd4;       /* 月光紫 - moonlight purple */
  --nw-palette-secondary: #c4b5e0;
  --nw-palette-accent: #d4cce0;        /* 銀白 - silver white */
  --nw-palette-surface: #221d30;
  --nw-palette-border: rgba(163, 143, 212, 0.2);
  --nw-palette-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --nw-palette-shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.5);
  --nw-palette-gradient: linear-gradient(135deg, #221d30 0%, #15121e 100%);

  /* Background gradient - moonlight on night sky */
  --nw-palette-bg-gradient: radial-gradient(ellipse at top, rgba(163, 143, 212, 0.12) 0%, rgba(212, 204, 224, 0.05) 50%, transparent 100%);
}

/* ============================================
   Code Block Variables
   パレットごとに適切な色を設定
   ============================================ */

/* Aizome (藍染) - Default */
:root,
[data-palette="aizome"] {
  --nw-code-bg: #1e2a3a;
  --nw-code-text: #e0e6ed;
  --nw-code-header-bg: rgba(30, 58, 95, 0.15);
  --nw-code-header-text: #1e3a5f;
  --nw-code-header-border: rgba(30, 58, 95, 0.2);
  --nw-code-label-bg: rgba(30, 58, 95, 0.1);
  --nw-code-label-text: #4a6a8a;
  --nw-code-accent: #d4a574;
}

[data-theme="dark"][data-palette="aizome"],
[data-theme="dark"]:root {
  --nw-code-bg: #0d1520;
  --nw-code-text: #e6edf3;
  --nw-code-header-bg: rgba(107, 154, 196, 0.12);
  --nw-code-header-text: #9dbad5;
  --nw-code-header-border: rgba(107, 154, 196, 0.2);
  --nw-code-label-bg: rgba(107, 154, 196, 0.08);
  --nw-code-label-text: #6b9ac4;
  --nw-code-accent: #d4a574;
}

/* Washi (和紙) - 墨黒と金色 (朱色は避ける) */
[data-palette="washi"] {
  --nw-code-bg: #2a2420;
  --nw-code-text: #e8e4de;
  --nw-code-header-bg: rgba(26, 22, 18, 0.08);
  --nw-code-header-text: #1a1612;
  --nw-code-header-border: rgba(26, 22, 18, 0.15);
  --nw-code-label-bg: rgba(26, 22, 18, 0.06);
  --nw-code-label-text: #5a5550;
  --nw-code-accent: #a67c00;
}

[data-theme="dark"][data-palette="washi"] {
  --nw-code-bg: #121010;
  --nw-code-text: #f0ebe5;
  --nw-code-header-bg: rgba(200, 195, 188, 0.1);
  --nw-code-header-text: #c8c3bc;
  --nw-code-header-border: rgba(200, 195, 188, 0.15);
  --nw-code-label-bg: rgba(200, 195, 188, 0.08);
  --nw-code-label-text: #a8a39c;
  --nw-code-accent: #c9a227;
}

/* Sakura (桜) - 桃色と若草色 */
[data-palette="sakura"] {
  --nw-code-bg: #2d2528;
  --nw-code-text: #f0e8eb;
  --nw-code-header-bg: rgba(212, 114, 156, 0.1);
  --nw-code-header-text: #b8557d;
  --nw-code-header-border: rgba(212, 114, 156, 0.2);
  --nw-code-label-bg: rgba(212, 114, 156, 0.08);
  --nw-code-label-text: #c47a9a;
  --nw-code-accent: #7fb069;
}

[data-theme="dark"][data-palette="sakura"] {
  --nw-code-bg: #1a1618;
  --nw-code-text: #f8f4f5;
  --nw-code-header-bg: rgba(232, 164, 190, 0.12);
  --nw-code-header-text: #e8a4be;
  --nw-code-header-border: rgba(232, 164, 190, 0.2);
  --nw-code-label-bg: rgba(232, 164, 190, 0.08);
  --nw-code-label-text: #d498b0;
  --nw-code-accent: #98c98a;
}

/* Matcha (抹茶) - 緑と茶色系金 */
[data-palette="matcha"] {
  --nw-code-bg: #1e2a1e;
  --nw-code-text: #e5ede5;
  --nw-code-header-bg: rgba(74, 124, 78, 0.1);
  --nw-code-header-text: #2d5a30;
  --nw-code-header-border: rgba(74, 124, 78, 0.18);
  --nw-code-label-bg: rgba(74, 124, 78, 0.08);
  --nw-code-label-text: #5a8a5e;
  --nw-code-accent: #c9a45c;
}

[data-theme="dark"][data-palette="matcha"] {
  --nw-code-bg: #0e140e;
  --nw-code-text: #e8ede6;
  --nw-code-header-bg: rgba(125, 181, 127, 0.12);
  --nw-code-header-text: #9fd4a1;
  --nw-code-header-border: rgba(125, 181, 127, 0.2);
  --nw-code-label-bg: rgba(125, 181, 127, 0.08);
  --nw-code-label-text: #7db57f;
  --nw-code-accent: #d4b86a;
}

/* Tsuki (月) - 紫と銀 */
[data-palette="tsuki"] {
  --nw-code-bg: #221d30;
  --nw-code-text: #e8e4f0;
  --nw-code-header-bg: rgba(124, 92, 191, 0.1);
  --nw-code-header-text: #5a3d96;
  --nw-code-header-border: rgba(124, 92, 191, 0.18);
  --nw-code-label-bg: rgba(124, 92, 191, 0.08);
  --nw-code-label-text: #8a7aaa;
  --nw-code-accent: #b8a9c9;
}

[data-theme="dark"][data-palette="tsuki"] {
  --nw-code-bg: #0e0c14;
  --nw-code-text: #e8e4f0;
  --nw-code-header-bg: rgba(163, 143, 212, 0.12);
  --nw-code-header-text: #c4b5e0;
  --nw-code-header-border: rgba(163, 143, 212, 0.2);
  --nw-code-label-bg: rgba(163, 143, 212, 0.08);
  --nw-code-label-text: #a38fd4;
  --nw-code-accent: #d4cce0;
}

/* ============================================
   Apply Palette Variables to Theme Variables
   ============================================ */
.nw-home-page,
.nw-about-page,
.nw-contact-page,
.nw-blog-page,
.nw-products-page,
.nw-single-page,
.nw-404-page,
[class*="nw-"] {
  --nw-bg: var(--nw-palette-bg);
  --nw-text: var(--nw-palette-text);
  --nw-text-muted: var(--nw-palette-text-muted);
  --nw-primary: var(--nw-palette-primary);
  --nw-secondary: var(--nw-palette-secondary);
  --nw-accent: var(--nw-palette-accent);
  --nw-surface: var(--nw-palette-surface);
  --nw-border: var(--nw-palette-border);
  --nw-shadow: var(--nw-palette-shadow);
  --nw-shadow-hover: var(--nw-palette-shadow-hover);
}

/* Apply fonts from palette */
body[data-palette] {
  font-family: var(--nw-palette-font-body);
}

body[data-palette] h1,
body[data-palette] h2,
body[data-palette] h3,
body[data-palette] h4,
body[data-palette] h5,
body[data-palette] h6 {
  font-family: var(--nw-palette-font-heading);
}

/* Washi palette special styling - more traditional feel */
body[data-palette="washi"] .nw-header__logo-text,
body[data-palette="washi"] .nw-hero__title,
body[data-palette="washi"] .nw-section__title {
  font-family: var(--nw-palette-font-accent);
  letter-spacing: 0.05em;
}

/* Washi dark mode - gold accents */
[data-theme="dark"][data-palette="washi"] .nw-header__logo-accent,
[data-theme="dark"][data-palette="washi"] .nw-section__title svg {
  color: var(--nw-palette-accent);
  fill: var(--nw-palette-accent);
}

/* ============================================
   Logo Accent Colors per Palette
   Each palette has optimized accent color for logo
   ============================================ */

/* Aizome - warm gold accent */
[data-palette="aizome"] .nw-header__logo-accent,
[data-palette="aizome"] .nw-hero__logo-icon .nw-header__logo-accent {
  fill: #d4a574;
}
[data-theme="dark"][data-palette="aizome"] .nw-header__logo-accent,
[data-theme="dark"][data-palette="aizome"] .nw-hero__logo-icon .nw-header__logo-accent {
  fill: #e8b98d;
}

/* Washi - vermilion/gold accent */
[data-palette="washi"] .nw-header__logo-accent,
[data-palette="washi"] .nw-hero__logo-icon .nw-header__logo-accent {
  fill: #b8292f;
}
[data-theme="dark"][data-palette="washi"] .nw-header__logo-accent,
[data-theme="dark"][data-palette="washi"] .nw-hero__logo-icon .nw-header__logo-accent {
  fill: #c9a227;
}

/* Sakura - spring green accent */
[data-palette="sakura"] .nw-header__logo-accent,
[data-palette="sakura"] .nw-hero__logo-icon .nw-header__logo-accent {
  fill: #7fb069;
}
[data-theme="dark"][data-palette="sakura"] .nw-header__logo-accent,
[data-theme="dark"][data-palette="sakura"] .nw-hero__logo-icon .nw-header__logo-accent {
  fill: #98c98a;
}

/* Matcha - tea gold accent */
[data-palette="matcha"] .nw-header__logo-accent,
[data-palette="matcha"] .nw-hero__logo-icon .nw-header__logo-accent {
  fill: #c9a45c;
}
[data-theme="dark"][data-palette="matcha"] .nw-header__logo-accent,
[data-theme="dark"][data-palette="matcha"] .nw-hero__logo-icon .nw-header__logo-accent {
  fill: #d4b86a;
}

/* Tsuki - moonlight silver accent */
[data-palette="tsuki"] .nw-header__logo-accent,
[data-palette="tsuki"] .nw-hero__logo-icon .nw-header__logo-accent {
  fill: #7c5cbf;
}
[data-theme="dark"][data-palette="tsuki"] .nw-header__logo-accent,
[data-theme="dark"][data-palette="tsuki"] .nw-hero__logo-icon .nw-header__logo-accent {
  fill: #c4b5e0;
}

/* ============================================
   Customizer Preview Panel Styles
   ============================================ */
.nw-palette-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.nw-palette-preview__swatch {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.1);
}