/*
  Theme tokens
  새 시안을 만들 때는 이 파일에 theme block만 추가합니다.
  컴포넌트 CSS에는 색상값을 직접 추가하지 않는 것이 핵심입니다.
*/

:root {
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: Inter, Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius-image: 0px;
  --radius-card: 0px;
  --radius-button: 0px;
}

body[data-theme="aurora-pilates"] {
  --color-bg: #fbf7f4;
  --color-bg-alt: #f7f2f7;
  --color-surface: #fffdfb;
  --color-text: #171217;
  --color-text-soft: #867985;
  --color-muted: #6f6870;
  --color-nav: #342c34;
  --color-border: #eadfe9;
  --color-border-strong: #bdb0bd;
  --color-accent: #b364cc;
  --color-accent-2: #f4c382;
  --color-button-text: #fffaf5;
  --color-hero-glow-1: rgba(202, 90, 215, 0.22);
  --color-hero-glow-2: rgba(179, 220, 250, 0.34);
  --color-hero-glow-3: rgba(247, 198, 140, 0.28);
  --color-section-glow: rgba(196, 68, 213, 0.22);
  --color-final-glow-1: rgba(196, 68, 213, 0.18);
  --color-final-glow-2: rgba(245, 195, 130, 0.32);
  --color-program-text: #372c3b;
  --color-program-accent: #9b61bb;
  --gradient-heading: linear-gradient(100deg, #9c63d6 0%, #c77bd0 48%, #f0bf7b 100%);
  --gradient-button: linear-gradient(100deg, #b25ddd 0%, #df87c9 52%, #f6c77c 100%);
  --gradient-programs: linear-gradient(110deg, #eee1f2 0%, #f2e6f4 52%, #f5e9f0 100%);
  --gradient-membership-overlay: linear-gradient(90deg, rgba(251, 247, 244, 0.82), rgba(255, 250, 244, 0.62), rgba(229, 210, 238, 0.72));
  --texture-light: radial-gradient(circle at 14% 30%, rgba(255,255,255,.86), transparent 28%), linear-gradient(125deg, rgba(255,255,255,.62), transparent 58%);
  --shadow-header: 0 10px 30px rgba(39, 31, 42, 0.07);
  --shadow-soft: 0 18px 50px rgba(52, 38, 55, 0.11);
  --shadow-card: 0 22px 60px rgba(52, 38, 55, 0.13);
  --shadow-image: 0 28px 70px rgba(74, 60, 78, 0.12);
  --shadow-image-light: 0 24px 54px rgba(74, 60, 78, 0.10);
  --shadow-logo: 0 10px 26px rgba(176, 88, 216, 0.22);
  --shadow-button: 0 16px 34px rgba(177, 93, 221, 0.22);
}

body[data-theme="hands-on-aurora-light"] {
  --color-bg: #fbf8f6;
  --color-bg-alt: #f5f0f8;
  --color-surface: #fffdfb;
  --color-text: #171217;
  --color-text-soft: #867985;
  --color-muted: #6f6870;
  --color-nav: #342c34;
  --color-border: #eadfe9;
  --color-border-strong: #bdb0bd;
  --color-accent: #b364cc;
  --color-accent-2: #f4c382;
  --color-button-text: #fffaf5;
  --color-hero-glow-1: rgba(202, 90, 215, 0.20);
  --color-hero-glow-2: rgba(179, 220, 250, 0.30);
  --color-hero-glow-3: rgba(247, 198, 140, 0.26);
  --color-section-glow: rgba(196, 68, 213, 0.20);
  --color-final-glow-1: rgba(196, 68, 213, 0.16);
  --color-final-glow-2: rgba(245, 195, 130, 0.28);
  --color-program-text: #372c3b;
  --color-program-accent: #9b61bb;
  --gradient-heading: linear-gradient(100deg, #9c63d6 0%, #c77bd0 48%, #f0bf7b 100%);
  --gradient-button: linear-gradient(100deg, #b25ddd 0%, #df87c9 52%, #f6c77c 100%);
  --gradient-programs: linear-gradient(110deg, #eee1f2 0%, #f2e6f4 52%, #f5e9f0 100%);
  --gradient-membership-overlay: linear-gradient(90deg, rgba(251, 247, 244, 0.82), rgba(255, 250, 244, 0.62), rgba(229, 210, 238, 0.72));
  --texture-light: radial-gradient(circle at 14% 30%, rgba(255,255,255,.86), transparent 28%), linear-gradient(125deg, rgba(255,255,255,.62), transparent 58%);
  --shadow-header: 0 10px 30px rgba(39, 31, 42, 0.07);
  --shadow-soft: 0 18px 50px rgba(52, 38, 55, 0.11);
  --shadow-card: 0 22px 60px rgba(52, 38, 55, 0.13);
  --shadow-image: 0 28px 70px rgba(74, 60, 78, 0.12);
  --shadow-image-light: 0 24px 54px rgba(74, 60, 78, 0.10);
  --shadow-logo: 0 10px 26px rgba(176, 88, 216, 0.22);
  --shadow-button: 0 16px 34px rgba(177, 93, 221, 0.22);
}

body[data-theme="yoga-sage"] {
  --color-bg: #f7f6ef;
  --color-bg-alt: #eef3ea;
  --color-surface: #fffdf8;
  --color-text: #1e241d;
  --color-text-soft: #788171;
  --color-muted: #66705f;
  --color-nav: #2e372a;
  --color-border: #dfe7d8;
  --color-border-strong: #9eac94;
  --color-accent: #7f9a71;
  --color-accent-2: #d6b076;
  --color-button-text: #fffdf7;
  --color-hero-glow-1: rgba(127, 154, 113, 0.20);
  --color-hero-glow-2: rgba(202, 221, 194, 0.34);
  --color-hero-glow-3: rgba(214, 176, 118, 0.22);
  --color-section-glow: rgba(127, 154, 113, 0.20);
  --color-final-glow-1: rgba(127, 154, 113, 0.18);
  --color-final-glow-2: rgba(214, 176, 118, 0.26);
  --color-program-text: #273321;
  --color-program-accent: #6f8c62;
  --gradient-heading: linear-gradient(100deg, #6f8c62 0%, #9faf84 52%, #d8b56f 100%);
  --gradient-button: linear-gradient(100deg, #7f9a71 0%, #aeb982 55%, #d6b076 100%);
  --gradient-programs: linear-gradient(110deg, #dfe8d8 0%, #ecf1e7 52%, #f6f0df 100%);
  --gradient-membership-overlay: linear-gradient(90deg, rgba(247, 246, 239, 0.86), rgba(255, 253, 248, 0.68), rgba(224, 235, 216, 0.72));
  --texture-light: radial-gradient(circle at 16% 28%, rgba(255,255,255,.8), transparent 30%), linear-gradient(125deg, rgba(255,255,255,.52), transparent 60%);
  --shadow-header: 0 10px 30px rgba(40, 50, 34, 0.07);
  --shadow-soft: 0 18px 50px rgba(50, 66, 42, 0.10);
  --shadow-card: 0 22px 60px rgba(50, 66, 42, 0.12);
  --shadow-image: 0 28px 70px rgba(50, 66, 42, 0.11);
  --shadow-image-light: 0 24px 54px rgba(50, 66, 42, 0.09);
  --shadow-logo: 0 10px 26px rgba(127, 154, 113, 0.22);
  --shadow-button: 0 16px 34px rgba(127, 154, 113, 0.22);
}

body[data-theme="massage-sand"] {
  --color-bg: #f8f1e8;
  --color-bg-alt: #f1e5d7;
  --color-surface: #fffaf3;
  --color-text: #271c16;
  --color-text-soft: #8b7a6c;
  --color-muted: #716358;
  --color-nav: #3f3028;
  --color-border: #eadacc;
  --color-border-strong: #b59f8c;
  --color-accent: #b18462;
  --color-accent-2: #d6a38f;
  --color-button-text: #fffaf3;
  --color-hero-glow-1: rgba(177, 132, 98, 0.22);
  --color-hero-glow-2: rgba(229, 205, 184, 0.36);
  --color-hero-glow-3: rgba(214, 163, 143, 0.24);
  --color-section-glow: rgba(177, 132, 98, 0.20);
  --color-final-glow-1: rgba(177, 132, 98, 0.20);
  --color-final-glow-2: rgba(214, 163, 143, 0.28);
  --color-program-text: #3a271d;
  --color-program-accent: #9f6e4e;
  --gradient-heading: linear-gradient(100deg, #9f6e4e 0%, #c58f73 52%, #e1b69a 100%);
  --gradient-button: linear-gradient(100deg, #9f6e4e 0%, #c58f73 55%, #e2b38f 100%);
  --gradient-programs: linear-gradient(110deg, #e9d5c4 0%, #f1e4d8 54%, #f7ebe2 100%);
  --gradient-membership-overlay: linear-gradient(90deg, rgba(248, 241, 232, 0.88), rgba(255, 250, 243, 0.68), rgba(230, 202, 184, 0.72));
  --texture-light: radial-gradient(circle at 18% 30%, rgba(255,255,255,.74), transparent 30%), linear-gradient(125deg, rgba(255,255,255,.48), transparent 58%);
  --shadow-header: 0 10px 30px rgba(64, 44, 31, 0.07);
  --shadow-soft: 0 18px 50px rgba(78, 49, 32, 0.10);
  --shadow-card: 0 22px 60px rgba(78, 49, 32, 0.12);
  --shadow-image: 0 28px 70px rgba(78, 49, 32, 0.11);
  --shadow-image-light: 0 24px 54px rgba(78, 49, 32, 0.09);
  --shadow-logo: 0 10px 26px rgba(177, 132, 98, 0.20);
  --shadow-button: 0 16px 34px rgba(177, 132, 98, 0.22);
}

body[data-theme="mono-lux"] {
  --color-bg: #f6f4f0;
  --color-bg-alt: #ebe8e1;
  --color-surface: #fffdf9;
  --color-text: #151515;
  --color-text-soft: #77736c;
  --color-muted: #66615a;
  --color-nav: #262421;
  --color-border: #e2ded5;
  --color-border-strong: #a7a197;
  --color-accent: #222222;
  --color-accent-2: #b9a27d;
  --color-button-text: #fffaf2;
  --color-hero-glow-1: rgba(30, 30, 30, 0.08);
  --color-hero-glow-2: rgba(218, 211, 197, 0.38);
  --color-hero-glow-3: rgba(185, 162, 125, 0.20);
  --color-section-glow: rgba(30, 30, 30, 0.08);
  --color-final-glow-1: rgba(30, 30, 30, 0.08);
  --color-final-glow-2: rgba(185, 162, 125, 0.24);
  --color-program-text: #171717;
  --color-program-accent: #222222;
  --gradient-heading: linear-gradient(100deg, #111111 0%, #5c5750 52%, #b9a27d 100%);
  --gradient-button: linear-gradient(100deg, #171717 0%, #5a554d 55%, #b9a27d 100%);
  --gradient-programs: linear-gradient(110deg, #dfdbd2 0%, #eeeae1 54%, #f7f3ec 100%);
  --gradient-membership-overlay: linear-gradient(90deg, rgba(246, 244, 240, 0.9), rgba(255, 253, 249, 0.68), rgba(224, 218, 207, 0.72));
  --texture-light: radial-gradient(circle at 18% 30%, rgba(255,255,255,.74), transparent 30%), linear-gradient(125deg, rgba(255,255,255,.48), transparent 58%);
  --shadow-header: 0 10px 30px rgba(18, 18, 18, 0.06);
  --shadow-soft: 0 18px 50px rgba(18, 18, 18, 0.10);
  --shadow-card: 0 22px 60px rgba(18, 18, 18, 0.12);
  --shadow-image: 0 28px 70px rgba(18, 18, 18, 0.10);
  --shadow-image-light: 0 24px 54px rgba(18, 18, 18, 0.08);
  --shadow-logo: 0 10px 26px rgba(18, 18, 18, 0.12);
  --shadow-button: 0 16px 34px rgba(18, 18, 18, 0.20);
}