:root {
    /* fallback only; real values come from body.theme-* */
    --fo-font-heading: 'Poppins', 'Noto Sans KR', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fo-font-body: 'Noto Sans KR', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fo-font-mono: 'Fira Code', 'IBM Plex Mono', Consolas, 'Courier New', monospace;

    --fo-font-weight-light: 300;
    --fo-font-weight-regular: 400;
    --fo-font-weight-medium: 500;
    --fo-font-weight-semibold: 600;
    --fo-font-weight-bold: 700;
    --fo-font-weight-black: 900;

    --fo-font-size-display: 3.5rem;
    --fo-font-size-xxl: 2.5rem;
    --fo-font-size-xl: 1.75rem;
    --fo-font-size-lg: 1.375rem;
    --fo-font-size-md: 1.125rem;
    --fo-font-size-base: 1rem;
    --fo-font-size-sm: 0.875rem;
    --fo-font-size-xs: 0.75rem;

    --fo-line-height-tight: 1.3;
    --fo-line-height-base: 1.6;
    --fo-line-height-relaxed: 1.8;

    --fo-spacing-2xs: 0.25rem;
    --fo-spacing-xs: 0.5rem;
    --fo-spacing-sm: 0.75rem;
    --fo-spacing-md: 1rem;
    --fo-spacing-lg: 1.5rem;
    --fo-spacing-xl: 2rem;
    --fo-spacing-2xl: 3rem;
    --fo-spacing-3xl: 4rem;

    --fo-radius-sm: 6px;
    --fo-radius-md: 12px;
    --fo-radius-lg: 20px;

    --fo-shadow-sm: 0 6px 12px rgba(18, 25, 29, 0.06);
    --fo-shadow-md: 0 12px 28px rgba(18, 25, 29, 0.12);
    --fo-shadow-lg: 0 18px 45px rgba(18, 25, 29, 0.16);
    --fo-shadow-xl: 0 28px 65px rgba(18, 25, 29, 0.2);

    --fo-transition-fast: 0.16s ease-in-out;
    --fo-transition-base: 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    --fo-transition-slow: 0.45s ease;

    --fo-container-max: 1280px;

    --fo-color-primary: var(--color-primary, #064133);
    --fo-color-primary-dark: var(--color-primaryDark, #022e25);
    --fo-color-primary-bright: var(--color-primaryBright, #1fa58b);
    --fo-color-secondary: var(--color-secondary, #159a6c);
    --fo-color-accent: var(--color-accent, #1fa58b);
    --fo-color-accent-warm: var(--color-accentWarm, #ff6b35);
    --fo-color-accent-sun: var(--color-accentSun, #f1c40f);
    --fo-color-surface: var(--color-surface, #ffffff);
    --fo-color-surface-emphasis: var(--color-surfaceEmphasis, #f2f9f4);
    --fo-color-surface-muted: var(--color-surfaceMuted, rgba(6, 65, 51, 0.04));
    --fo-color-surface-contrast: var(--color-surfaceContrast, #022e25);
    --fo-color-border-soft: var(--color-border, rgba(7, 60, 46, 0.12));
    --fo-color-border-strong: var(--color-borderStrong, rgba(7, 60, 46, 0.2));
    --fo-color-text: var(--color-text, #1f2a2e);
    --fo-color-text-muted: var(--color-textMuted, #5e6e75);
    --fo-color-on-primary: var(--color-onPrimary, #ffffff);
    --fo-color-info: var(--color-info, #2980b9);
    --fo-color-success: var(--color-success, #1fa58b);
    --fo-color-warning: var(--color-warning, #f1c40f);
    --fo-color-danger: var(--color-danger, #e74c3c);

    --fo-color-neutral-050: var(--color-neutral-050, #f8faf9);
    --fo-color-neutral-100: var(--color-neutral-100, #ecf2f0);
    --fo-color-neutral-200: var(--color-neutral-200, #dde4e1);
    --fo-color-neutral-300: var(--color-neutral-300, #ccd5d2);
    --fo-color-neutral-400: var(--color-neutral-400, #9ba7a3);
    --fo-color-neutral-500: var(--color-neutral-500, #7b8682);
    --fo-color-neutral-600: var(--color-neutral-600, #5c6663);
    --fo-color-neutral-700: var(--color-neutral-700, #424b48);
    --fo-color-neutral-800: var(--color-neutral-800, #2d3432);
    --fo-color-neutral-900: var(--color-neutral-900, #1b201f);

    --scrollbar-width: 10px;
    --scrollbar-track: rgba(125, 138, 151, 0.12);
    --scrollbar-thumb: rgba(125, 138, 151, 0.4);
    --scrollbar-thumb-hover: rgba(125, 138, 151, 0.55);
    --sidebar-scrollbar-width: 6px;
    --sidebar-scrollbar-track: rgba(255, 255, 255, 0.08);
    --sidebar-scrollbar-thumb: rgba(255, 255, 255, 0.3);
    --sidebar-scrollbar-thumb-hover: rgba(255, 255, 255, 0.48);

    /* 브랜드 색상 */
    --primary-dark: #022e25;
    --primary: #064133;
    /* 메인 녹색 */
    --primary-light: #1fa58b;
    /* 밝은 녹색 */
    --secondary: #159a6c;
    /* 보조 녹색 */
    --accent: #ff6b35;
    /* 강조 주황 */
    --accent2: #f1c40f;
    /* 강조 노랑 */
    --light: #ecf9f6;
    /* 매우 밝은 녹색 톤 */
    --dark: #1f2a2e;
    /* 어두운 텍스트/배경 */
    --text: #333333;
    /* 기본 텍스트 */
    --text-muted: #5e6e75;
    /* 흐린 텍스트 */
    --white: #ffffff;
    --gray-light: #f7f9fa;
    /* 밝은 회색 배경 */
    --gray: #dfe6e9;
    /* 회색 테두리/구분선 */
    --gray-dark: #b0bec5;
    /* 어두운 회색 */

    /* 여기서 부터 02.frameon-아이텐티티.html에서 가져온 부분 */
    /* 추가 및 상태 색상 */
    --blue: #2980b9;
    /* 정보, 링크 */
    --red: #e74c3c;
    /* 오류, 위험 */
    --yellow: #f1c40f;
    /* 경고, 주의 */
    --success-green: #28a745;
    /* 성공, 완료 */

    /* 타이포그래피 */
    --font-primary: 'Poppins', 'Noto Sans KR', sans-serif;
    /* 영문 우선 */
    --font-secondary: 'Noto Sans KR', sans-serif;
    /* 한글 기본 */

    --fz-display: 3.5rem;
    /* 56px */
    --fz-h1: 2.5rem;
    /* 40px */
    --fz-h2: 1.75rem;
    /* 28px */
    --fz-h3: 1.375rem;
    /* 22px */
    --fz-h4: 1.125rem;
    /* 18px */
    --fz-body: 1rem;
    /* 16px */
    --fz-small: 0.875rem;
    /* 14px */
    --fz-xs: 0.75rem;
    /* 12px */

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 900;

    --lh-tight: 1.3;
    --lh-normal: 1.6;
    --lh-relaxed: 1.8;

    /* 간격 */
    --spacing-xxs: 0.25rem;
    /* 4px */
    --spacing-xs: 0.5rem;
    /* 8px */
    --spacing-sm: 0.75rem;
    /* 12px */
    --spacing-md: 1rem;
    /* 16px */
    --spacing-lg: 1.5rem;
    /* 24px */
    --spacing-xl: 2rem;
    /* 32px */
    --spacing-xxl: 3rem;
    /* 48px */
    --spacing-xxxl: 4rem;
    /* 64px */

    /* 디자인 요소 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --transition-fast: 0.15s ease-in-out;
    --transition-default: 0.3s ease-in-out;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 15px 45px rgba(0, 0, 0, 0.12);
    /* XL 그림자 */

    /* 컨테이너 너비 */
    --container-max-width: 1200px;

}

/* 
   Fix: Map --fo-color-* variables within the body scope so they pick up 
   theme-specific --color-* values defined on body.theme-*.
   This is necessary because :root variables cannot see variables defined on body.
*/
body {
    --fo-color-primary: var(--color-primary);
    --fo-color-primary-dark: var(--color-primaryDark);
    --fo-color-primary-bright: var(--color-primaryBright);
    --fo-color-secondary: var(--color-secondary);
    --fo-color-accent: var(--color-accent);
    --fo-color-accent-warm: var(--color-accentWarm);
    --fo-color-accent-sun: var(--color-accentSun);
    --fo-color-surface: var(--color-surface);
    --fo-color-surface-emphasis: var(--color-surfaceEmphasis);
    --fo-color-surface-muted: var(--color-surfaceMuted);
    --fo-color-surface-contrast: var(--color-surfaceContrast);
    --fo-color-border-soft: var(--color-border);
    --fo-color-border-strong: var(--color-borderStrong);
    --fo-color-text: var(--color-text);
    --fo-color-text-muted: var(--color-textMuted);
    --fo-color-on-primary: var(--color-onPrimary);
    --fo-color-info: var(--color-info);
    --fo-color-success: var(--color-success);
    --fo-color-warning: var(--color-warning);
    --fo-color-danger: var(--color-danger);

    --fo-color-neutral-050: var(--color-neutral-050);
    --fo-color-neutral-100: var(--color-neutral-100);
    --fo-color-neutral-200: var(--color-neutral-200);
    --fo-color-neutral-300: var(--color-neutral-300);
    --fo-color-neutral-400: var(--color-neutral-400);
    --fo-color-neutral-500: var(--color-neutral-500);
    --fo-color-neutral-600: var(--color-neutral-600);
    --fo-color-neutral-700: var(--color-neutral-700);
    --fo-color-neutral-800: var(--color-neutral-800);
    --fo-color-neutral-900: var(--color-neutral-900);
}


/* DeepGreen - Light */
body.theme-deepgreen {
    /* brand */
    --color-primaryDark: #022e25;
    --color-primary: #064133;
    --color-primaryBright: #0d8c6e;
    --color-accent: #1fa58b;
    --color-accentMuted: rgba(31, 165, 139, 0.18);
    --color-accentLessMuted: rgba(31, 165, 139, 0.42);

    /* surface */
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surfaceEmphasis: #f2f9f4;
    --color-border: rgba(7, 60, 46, 0.12);

    /* typography */
    --color-text: #1f2a2e;
    --color-textMuted: #556068;
    --color-onPrimary: #e8fff8;

    /* layout accents */
    --sidebar-bg-top: #022e25;
    --sidebar-bg-middle: #03382c;
    --sidebar-bg-bottom: #064133;
    --sidebar-border: rgba(236, 249, 246, 0.12);
    --sidebar-shadow: 8px 0 30px rgba(2, 46, 37, 0.25);
    --sidebar-text: rgba(236, 249, 246, 0.92);
    --sidebar-text-muted: rgba(236, 249, 246, 0.68);
    --sidebar-heading: rgba(236, 249, 246, 0.56);
    --sidebar-icon-bg: rgba(31, 165, 139, 0.16);
    --sidebar-icon-color: #1fa58b;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-active-bg: rgba(255, 255, 255, 0.16);
    --sidebar-active-border: #ff6b35;
    --sidebar-separator: rgba(255, 255, 255, 0.08);
    --sidebar-subtle: rgba(255, 255, 255, 0.04);
    --scrollbar-track: rgba(6, 65, 51, 0.08);
    --scrollbar-thumb: rgba(31, 165, 139, 0.45);
    --scrollbar-thumb-hover: rgba(31, 165, 139, 0.65);
    --sidebar-scrollbar-track: rgba(255, 255, 255, 0.04);
    --sidebar-scrollbar-thumb: rgba(255, 255, 255, 0.28);
    --sidebar-scrollbar-thumb-hover: rgba(255, 255, 255, 0.45);

    --header-bg-top: #022e25;
    --header-bg-bottom: #064133;
    --header-border: rgba(8, 78, 60, 0.32);
    --header-shadow: 0 12px 30px rgba(6, 65, 51, 0.18);
    --header-text: #ffffff;

    --color-secondary: #159a6c;
    --color-accentWarm: #ff6b35;
    --color-accentSun: #f1c40f;
    --color-info: #3898bd;
    --color-success: #20a082;
    --color-warning: #f39c12;
    --color-danger: #c0392b;
    --color-borderStrong: rgba(7, 60, 46, 0.24);
    --color-surfaceMuted: rgba(6, 65, 51, 0.06);
    --color-surfaceContrast: #022e25;

    --color-neutral-050: #f4fcf9;
    --color-neutral-100: #ecf9f6;
    --color-neutral-200: #d7ede6;
    --color-neutral-300: #bdd9cf;
    --color-neutral-400: #94b8ac;
    --color-neutral-500: #6d968c;
    --color-neutral-600: #4b746c;
    --color-neutral-700: #31524d;
    --color-neutral-800: #213834;
    --color-neutral-900: #162823;

    --fo-shadow-sm: 0 6px 14px rgba(2, 46, 37, 0.08);
    --fo-shadow-md: 0 14px 32px rgba(2, 46, 37, 0.12);
    --fo-shadow-lg: 0 20px 48px rgba(2, 46, 37, 0.16);
    --fo-shadow-xl: 0 26px 70px rgba(2, 46, 37, 0.2);
}


/* DeepGreen - Dark */
body.theme-deepgreen.theme-dark {
    --color-bg: #0f1d1a;
    --color-surface: #152825;
    --color-surfaceEmphasis: #1d3832;
    --color-text: #e2f3ef;
    --color-textMuted: #9bb7b0;
    --color-border: rgba(232, 255, 248, 0.12);

    --sidebar-bg-top: #051915;
    --sidebar-bg-middle: #06281f;
    --sidebar-bg-bottom: #0d3f31;
    --sidebar-border: rgba(232, 255, 248, 0.14);
    --sidebar-shadow: 8px 0 30px rgba(0, 0, 0, 0.45);
    --sidebar-text: rgba(232, 255, 248, 0.94);
    --sidebar-text-muted: rgba(232, 255, 248, 0.68);
    --sidebar-heading: rgba(232, 255, 248, 0.54);
    --sidebar-icon-bg: rgba(31, 165, 139, 0.2);
    --sidebar-icon-color: #39d3b3;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.12);
    --sidebar-active-bg: rgba(255, 255, 255, 0.18);
    --sidebar-active-border: #2dc19f;
    --sidebar-separator: rgba(232, 255, 248, 0.12);
    --sidebar-subtle: rgba(255, 255, 255, 0.08);
    --scrollbar-track: rgba(232, 255, 248, 0.12);
    --scrollbar-thumb: rgba(57, 211, 179, 0.48);
    --scrollbar-thumb-hover: rgba(57, 211, 179, 0.68);
    --sidebar-scrollbar-track: rgba(232, 255, 248, 0.12);
    --sidebar-scrollbar-thumb: rgba(232, 255, 248, 0.35);
    --sidebar-scrollbar-thumb-hover: rgba(232, 255, 248, 0.55);

    --header-bg-top: #051915;
    --header-bg-bottom: #0c3025;
    --header-border: rgba(232, 255, 248, 0.14);
    --header-shadow: 0 16px 32px rgba(0, 0, 0, 0.55);
    --header-text: #ffffff;

    --color-secondary: #2dc19f;
    --color-accentWarm: #ff814c;
    --color-accentSun: #ffd166;
    --color-info: #4bb6f2;
    --color-success: #39d3b3;
    --color-warning: #f0d878;
    --color-danger: #ff7b6b;
    --color-borderStrong: rgba(232, 255, 248, 0.3);
    --color-surfaceMuted: rgba(232, 255, 248, 0.08);
    --color-surfaceContrast: #e2f3ef;

    --color-neutral-050: #11211c;
    --color-neutral-100: #142922;
    --color-neutral-200: #1c3a31;
    --color-neutral-300: #22493d;
    --color-neutral-400: #2d5d50;
    --color-neutral-500: #3b7163;
    --color-neutral-600: #4b8576;
    --color-neutral-700: #61a191;
    --color-neutral-800: #83c2b1;
    --color-neutral-900: #aee0d3;

    --fo-shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.35);
    --fo-shadow-md: 0 18px 38px rgba(0, 0, 0, 0.45);
    --fo-shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.52);
    --fo-shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.6);
}


/* Purple - Light */
body.theme-purple {
    /* brand */
    --color-primaryDark: #2d1b69;
    --color-primary: #4a2c96;
    --color-primaryBright: #6b46c1;
    --color-accent: #8b5cf6;
    --color-accentMuted: rgba(139, 92, 246, 0.18);
    --color-accentLessMuted: rgba(139, 92, 246, 0.42);

    /* surface */
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surfaceEmphasis: #f1eefc;
    --color-border: rgba(74, 44, 150, 0.12);

    /* typography */
    --color-text: #1e293b;
    --color-textMuted: #64748b;
    --color-onPrimary: #f8fafc;

    /* layout accents */
    --sidebar-bg-top: #2d1b69;
    --sidebar-bg-middle: #3c2691;
    --sidebar-bg-bottom: #6b46c1;
    --sidebar-border: rgba(248, 250, 252, 0.1);
    --sidebar-shadow: 8px 0 30px rgba(45, 27, 105, 0.25);
    --sidebar-text: rgba(248, 250, 252, 0.94);
    --sidebar-text-muted: rgba(248, 250, 252, 0.68);
    --sidebar-heading: rgba(248, 250, 252, 0.54);
    --sidebar-icon-bg: rgba(139, 92, 246, 0.2);
    --sidebar-icon-color: #c084fc;
    --sidebar-hover-bg: rgba(248, 250, 252, 0.12);
    --sidebar-active-bg: rgba(248, 250, 252, 0.18);
    --sidebar-active-border: #c084fc;
    --sidebar-separator: rgba(248, 250, 252, 0.12);
    --sidebar-subtle: rgba(248, 250, 252, 0.08);
    --scrollbar-track: rgba(74, 44, 150, 0.08);
    --scrollbar-thumb: rgba(139, 92, 246, 0.45);
    --scrollbar-thumb-hover: rgba(139, 92, 246, 0.65);
    --sidebar-scrollbar-track: rgba(248, 250, 252, 0.1);
    --sidebar-scrollbar-thumb: rgba(248, 250, 252, 0.32);
    --sidebar-scrollbar-thumb-hover: rgba(248, 250, 252, 0.48);

    --header-bg-top: #2d1b69;
    --header-bg-bottom: #6b46c1;
    --header-border: rgba(107, 70, 193, 0.35);
    --header-shadow: 0 12px 30px rgba(45, 27, 105, 0.25);
    --header-text: #ffffff;

    --color-secondary: #7c3aed;
    --color-accentWarm: #f97316;
    --color-accentSun: #fde047;
    --color-info: #6366f1;
    --color-success: #10b981;
    --color-warning: #facc15;
    --color-danger: #ec4899;
    --color-borderStrong: rgba(74, 44, 150, 0.24);
    --color-surfaceMuted: rgba(74, 44, 150, 0.06);
    --color-surfaceContrast: #2d1b69;

    --color-neutral-050: #f8f7fc;
    --color-neutral-100: #f1eefc;
    --color-neutral-200: #e1dbf8;
    --color-neutral-300: #d0c6f3;
    --color-neutral-400: #b7a6eb;
    --color-neutral-500: #937fd9;
    --color-neutral-600: #725fbd;
    --color-neutral-700: #564595;
    --color-neutral-800: #3a2c6d;
    --color-neutral-900: #281d4c;

    --fo-shadow-sm: 0 6px 14px rgba(45, 27, 105, 0.12);
    --fo-shadow-md: 0 14px 32px rgba(45, 27, 105, 0.18);
    --fo-shadow-lg: 0 22px 52px rgba(45, 27, 105, 0.22);
    --fo-shadow-xl: 0 30px 78px rgba(45, 27, 105, 0.28);
}

/* Purple - Dark */
body.theme-purple.theme-dark {
    --color-bg: #0f0b1f;
    --color-surface: #1a1625;
    --color-surfaceEmphasis: #2d1b69;
    --color-text: #e2e8f0;
    --color-textMuted: #94a3b8;
    --color-border: rgba(248, 250, 252, 0.12);

    --sidebar-bg-top: #190f3d;
    --sidebar-bg-middle: #241457;
    --sidebar-bg-bottom: #3c2191;
    --sidebar-border: rgba(248, 250, 252, 0.16);
    --sidebar-shadow: 8px 0 30px rgba(0, 0, 0, 0.5);
    --sidebar-text: rgba(241, 245, 249, 0.96);
    --sidebar-text-muted: rgba(241, 245, 249, 0.68);
    --sidebar-heading: rgba(241, 245, 249, 0.52);
    --sidebar-icon-bg: rgba(139, 92, 246, 0.24);
    --sidebar-icon-color: #d6bcfa;
    --sidebar-hover-bg: rgba(248, 250, 252, 0.14);
    --sidebar-active-bg: rgba(248, 250, 252, 0.2);
    --sidebar-active-border: #d6bcfa;
    --sidebar-separator: rgba(248, 250, 252, 0.18);
    --sidebar-subtle: rgba(248, 250, 252, 0.1);
    --scrollbar-track: rgba(214, 188, 250, 0.16);
    --scrollbar-thumb: rgba(139, 92, 246, 0.6);
    --scrollbar-thumb-hover: rgba(139, 92, 246, 0.78);
    --sidebar-scrollbar-track: rgba(214, 188, 250, 0.16);
    --sidebar-scrollbar-thumb: rgba(241, 245, 249, 0.38);
    --sidebar-scrollbar-thumb-hover: rgba(241, 245, 249, 0.58);

    --header-bg-top: #190f3d;
    --header-bg-bottom: #3c2191;
    --header-border: rgba(214, 188, 250, 0.28);
    --header-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
    --header-text: #ffffff;

    --color-secondary: #8b5cf6;
    --color-accentWarm: #fb923c;
    --color-accentSun: #fcd34d;
    --color-info: #60a5fa;
    --color-success: #4ade80;
    --color-warning: #fde68a;
    --color-danger: #f87171;
    --color-borderStrong: rgba(214, 188, 250, 0.32);
    --color-surfaceMuted: rgba(214, 188, 250, 0.12);
    --color-surfaceContrast: #f5f3ff;

    --color-neutral-050: #110b24;
    --color-neutral-100: #160f33;
    --color-neutral-200: #1c1443;
    --color-neutral-300: #241955;
    --color-neutral-400: #2f226d;
    --color-neutral-500: #3c2b86;
    --color-neutral-600: #5136a3;
    --color-neutral-700: #6b4ac0;
    --color-neutral-800: #8560da;
    --color-neutral-900: #a782f3;

    --fo-shadow-sm: 0 10px 22px rgba(0, 0, 0, 0.38);
    --fo-shadow-md: 0 20px 40px rgba(0, 0, 0, 0.46);
    --fo-shadow-lg: 0 28px 60px rgba(0, 0, 0, 0.52);
    --fo-shadow-xl: 0 36px 90px rgba(0, 0, 0, 0.58);
}

/* Highlight - Light */
body.theme-woojin {
    /* brand */
    --color-primary: hsl(317, 57%, 37%);
    /* rgb(148, 42, 114) */
    --color-primaryDark: hsl(317, 57%, 27%);
    --color-primaryBright: hsl(317, 57%, 47%);
    /* --color-accent: hsl(317, 15%, 65%); */
    --color-accent: rgb(103, 1, 71);
    --color-accentMuted: hsla(317, 15%, 65%, 0.18);
    --color-accentLessMuted: hsla(317, 15%, 65%, 0.42);

    /* surface */
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    /* --color-surfaceEmphasis: hsl(317, 40%, 96%);
    --color-border: hsla(317, 57%, 37%, 0.12); */
    --color-surfaceEmphasis: #f2f2f2;
    --color-border: #cbcbcb;


    /* typography */
    --color-text: #1e293b;
    --color-textMuted: #64748b;
    --color-onPrimary: hsl(317, 40%, 97%);

    /* layout accents */
    --sidebar-bg-top: hsl(317, 45%, 20%);
    --sidebar-bg-middle: hsl(317, 45%, 25%);
    --sidebar-bg-bottom: hsl(317, 45%, 30%);
    --sidebar-border: hsla(317, 40%, 97%, 0.1);
    --sidebar-shadow: 8px 0 30px hsla(317, 30%, 12%, 0.25);
    --sidebar-text: hsla(317, 40%, 97%, 0.94);
    --sidebar-text-muted: hsla(317, 40%, 97%, 0.68);
    --sidebar-heading: hsla(317, 40%, 97%, 0.54);
    --sidebar-icon-bg: hsla(317, 15%, 65%, 0.2);
    --sidebar-icon-color: hsl(317, 30%, 75%);
    --sidebar-hover-bg: hsla(317, 40%, 97%, 0.12);
    --sidebar-active-bg: hsla(317, 40%, 97%, 0.18);
    --sidebar-active-border: hsl(317, 15%, 65%);
    --sidebar-separator: hsla(317, 40%, 97%, 0.12);
    --sidebar-subtle: hsla(317, 40%, 97%, 0.08);
    --scrollbar-track: hsla(317, 57%, 37%, 0.08);
    --scrollbar-thumb: hsla(317, 15%, 65%, 0.45);
    --scrollbar-thumb-hover: hsla(317, 15%, 65%, 0.65);
    --sidebar-scrollbar-track: hsla(317, 40%, 97%, 0.1);
    --sidebar-scrollbar-thumb: hsla(317, 40%, 97%, 0.32);
    --sidebar-scrollbar-thumb-hover: hsla(317, 40%, 97%, 0.48);

    --header-bg-top: hsl(317, 45%, 20%);
    --header-bg-bottom: hsl(317, 45%, 30%);
    --header-border: hsla(317, 57%, 47%, 0.35);
    --header-shadow: 0 12px 30px hsla(317, 30%, 12%, 0.25);
    --header-text: #ffffff;

    /* --color-secondary: hsl(317, 25%, 50%); */
    --color-secondary: rgb(138, 51, 129);
    --color-accentWarm: #f97316;
    --color-accentSun: #fde047;
    /* --color-info: #38bdf8; */
    --color-info: #6773d2;
    --color-success: #2dd4bf;
    --color-warning: #fbbf24;
    --color-danger: #f43f5e;
    --color-borderStrong: hsla(317, 57%, 37%, 0.24);
    --color-surfaceMuted: hsla(317, 57%, 37%, 0.06);
    --color-surfaceContrast: hsl(317, 45%, 20%);

    --color-neutral-050: hsl(317, 20%, 97%);
    --color-neutral-100: hsl(317, 20%, 94%);
    --color-neutral-200: hsl(317, 18%, 88%);
    --color-neutral-300: hsl(317, 16%, 82%);
    --color-neutral-400: hsl(317, 14%, 70%);
    --color-neutral-500: hsl(317, 12%, 58%);
    --color-neutral-600: hsl(317, 15%, 45%);
    --color-neutral-700: hsl(317, 20%, 30%);
    --color-neutral-800: hsl(317, 25%, 20%);
    --color-neutral-900: hsl(317, 30%, 12%);

    --fo-shadow-sm: 0 6px 14px hsla(317, 30%, 12%, 0.12);
    --fo-shadow-md: 0 14px 32px hsla(317, 30%, 12%, 0.18);
    --fo-shadow-lg: 0 22px 52px hsla(317, 30%, 12%, 0.22);
    --fo-shadow-xl: 0 30px 78px hsla(317, 30%, 12%, 0.28);
}


/* Black - Light */
body.theme-black {
    /* brand */
    --color-primaryDark: #000000;
    --color-primary: #1a1a1a;
    --color-primaryBright: #404040;
    --color-accent: #666666;
    --color-accentMuted: rgba(102, 102, 102, 0.18);
    --color-accentLessMuted: rgba(102, 102, 102, 0.42);

    /* surface */
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surfaceEmphasis: #fafafad5;
    --color-border: rgba(0, 0, 0, 0.12);

    /* typography */
    --color-text: #000000;
    --color-textMuted: #666666;
    --color-onPrimary: #ffffff;

    /* layout accents */
    --sidebar-bg-top: #111111;
    --sidebar-bg-middle: #161616;
    --sidebar-bg-bottom: #1f1f1f;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-shadow: 8px 0 30px rgba(0, 0, 0, 0.4);
    --sidebar-text: rgba(255, 255, 255, 0.92);
    --sidebar-text-muted: rgba(255, 255, 255, 0.6);
    --sidebar-heading: rgba(255, 255, 255, 0.5);
    --sidebar-icon-bg: rgba(255, 255, 255, 0.1);
    --sidebar-icon-color: #f3f4f6;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-active-bg: rgba(255, 255, 255, 0.16);
    --sidebar-active-border: #f3f4f6;
    --sidebar-separator: rgba(255, 255, 255, 0.08);
    --sidebar-subtle: rgba(255, 255, 255, 0.05);
    --scrollbar-track: rgba(26, 26, 26, 0.12);
    --scrollbar-thumb: rgba(102, 102, 102, 0.48);
    --scrollbar-thumb-hover: rgba(102, 102, 102, 0.64);
    --sidebar-scrollbar-track: rgba(255, 255, 255, 0.08);
    --sidebar-scrollbar-thumb: rgba(255, 255, 255, 0.32);
    --sidebar-scrollbar-thumb-hover: rgba(255, 255, 255, 0.5);

    --header-bg-top: #0c0c0c;
    --header-bg-bottom: #1a1a1a;
    --header-border: rgba(255, 255, 255, 0.08);
    --header-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    --header-text: #ffffff;

    --color-secondary: #2f2f2f;
    --color-accentWarm: #f97316;
    --color-accentSun: #facc15;
    --color-info: #3b82f6;
    --color-success: #16a34a;
    --color-warning: #facc15;
    --color-danger: #ef4444;
    --color-borderStrong: rgba(0, 0, 0, 0.24);
    --color-surfaceMuted: rgba(0, 0, 0, 0.08);
    --color-surfaceContrast: #0f0f0f;

    --color-neutral-050: #f7f7f7;
    --color-neutral-100: #ededed;
    --color-neutral-200: #dcdcdc;
    --color-neutral-300: #c8c8c8;
    --color-neutral-400: #a3a3a3;
    --color-neutral-500: #7f7f7f;
    --color-neutral-600: #5f5f5f;
    --color-neutral-700: #424242;
    --color-neutral-800: #2b2b2b;
    --color-neutral-900: #181818;

    --fo-shadow-sm: 0 6px 14px rgba(0, 0, 0, 0.1);
    --fo-shadow-md: 0 16px 32px rgba(0, 0, 0, 0.18);
    --fo-shadow-lg: 0 26px 52px rgba(0, 0, 0, 0.22);
    --fo-shadow-xl: 0 34px 78px rgba(0, 0, 0, 0.28);
}

/* Black - Dark */
body.theme-black.theme-dark {
    --color-bg: #000000;
    --color-surface: #1a1a1a;
    --color-surfaceEmphasis: #2d2d2d;
    --color-text: #ffffff;
    --color-textMuted: #cccccc;
    --color-border: rgba(255, 255, 255, 0.12);

    --sidebar-bg-top: #000000;
    --sidebar-bg-middle: #0f0f0f;
    --sidebar-bg-bottom: #202020;
    --sidebar-border: rgba(255, 255, 255, 0.12);
    --sidebar-shadow: 8px 0 30px rgba(0, 0, 0, 0.65);
    --sidebar-text: rgba(255, 255, 255, 0.95);
    --sidebar-text-muted: rgba(255, 255, 255, 0.7);
    --sidebar-heading: rgba(255, 255, 255, 0.54);
    --sidebar-icon-bg: rgba(255, 255, 255, 0.12);
    --sidebar-icon-color: #f5f5f5;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.14);
    --sidebar-active-bg: rgba(255, 255, 255, 0.22);
    --sidebar-active-border: #f5f5f5;
    --sidebar-separator: rgba(255, 255, 255, 0.16);
    --sidebar-subtle: rgba(255, 255, 255, 0.08);
    --scrollbar-track: rgba(255, 255, 255, 0.12);
    --scrollbar-thumb: rgba(153, 153, 153, 0.6);
    --scrollbar-thumb-hover: rgba(204, 204, 204, 0.82);
    --sidebar-scrollbar-track: rgba(255, 255, 255, 0.16);
    --sidebar-scrollbar-thumb: rgba(255, 255, 255, 0.4);
    --sidebar-scrollbar-thumb-hover: rgba(255, 255, 255, 0.6);

    --header-bg-top: #000000;
    --header-bg-bottom: #1a1a1a;
    --header-border: rgba(255, 255, 255, 0.12);
    --header-shadow: 0 16px 32px rgba(0, 0, 0, 0.65);
    --header-text: #ffffff;

    --color-secondary: #2f2f2f;
    --color-accentWarm: #fb923c;
    --color-accentSun: #fbbf24;
    --color-info: #60a5fa;
    --color-success: #22c55e;
    --color-warning: #facc15;
    --color-danger: #f87171;
    --color-borderStrong: rgba(255, 255, 255, 0.26);
    --color-surfaceMuted: rgba(255, 255, 255, 0.08);
    --color-surfaceContrast: #f5f5f5;

    --color-neutral-050: #050505;
    --color-neutral-100: #0c0c0c;
    --color-neutral-200: #151515;
    --color-neutral-300: #1f1f1f;
    --color-neutral-400: #2c2c2c;
    --color-neutral-500: #3a3a3a;
    --color-neutral-600: #4a4a4a;
    --color-neutral-700: #5d5d5d;
    --color-neutral-800: #767676;
    --color-neutral-900: #9d9d9d;

    --fo-shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.42);
    --fo-shadow-md: 0 18px 40px rgba(0, 0, 0, 0.52);
    --fo-shadow-lg: 0 28px 60px rgba(0, 0, 0, 0.58);
    --fo-shadow-xl: 0 36px 88px rgba(0, 0, 0, 0.65);
}

/* Christmas - Light */
body.theme-christmas {
    /* brand */
    --color-primaryDark: #B71C1C;
    /* Dark Red */
    --color-primary: #D32F2F;
    /* Main Red */
    --color-primaryBright: #E57373;
    /* Light Red */
    --color-accent: #2E7D32;
    /* Green */
    --color-accentMuted: rgba(46, 125, 50, 0.18);
    --color-accentLessMuted: rgba(46, 125, 50, 0.42);

    /* surface */
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surfaceEmphasis: #ecefed;
    --color-border: rgba(46, 125, 50, 0.15);

    /* typography */
    --color-text: #2a1d1d;
    --color-textMuted: #7a6d6d;
    --color-onPrimary: #ffffff;

    /* layout accents */
    --sidebar-bg-top: #B71C1C;
    --sidebar-bg-middle: #c52626;
    --sidebar-bg-bottom: #D32F2F;
    --sidebar-border: rgba(255, 255, 255, 0.12);
    --sidebar-shadow: 8px 0 30px rgba(183, 28, 28, 0.25);
    --sidebar-text: rgba(255, 245, 245, 0.95);
    --sidebar-text-muted: rgba(255, 245, 245, 0.7);
    --sidebar-heading: rgba(255, 245, 245, 0.6);
    --sidebar-icon-bg: rgba(255, 215, 0, 0.2);
    --sidebar-icon-color: #FFD700;
    /* Gold */
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-active-bg: rgba(255, 255, 255, 0.16);
    --sidebar-active-border: #FFD700;
    /* Gold */
    --sidebar-separator: rgba(255, 255, 255, 0.1);
    --sidebar-subtle: rgba(255, 255, 255, 0.05);
    --scrollbar-track: rgba(183, 28, 28, 0.08);
    --scrollbar-thumb: rgba(46, 125, 50, 0.45);
    --scrollbar-thumb-hover: rgba(46, 125, 50, 0.65);
    --sidebar-scrollbar-track: rgba(255, 255, 255, 0.06);
    --sidebar-scrollbar-thumb: rgba(255, 255, 255, 0.3);
    --sidebar-scrollbar-thumb-hover: rgba(255, 255, 255, 0.5);

    --header-bg-top: #B71C1C;
    --header-bg-bottom: #D32F2F;
    --header-border: rgba(255, 255, 255, 0.15);
    --header-shadow: 0 12px 30px rgba(183, 28, 28, 0.2);
    --header-text: #ffffff;

    --color-secondary: #2E7D32;
    /* Green */
    --color-accentWarm: #f57c00;
    /* Orange */
    --color-accentSun: #FFD700;
    /* Gold */
    --color-info: #0ea5e9;
    --color-success: #388E3C;
    --color-warning: #FBC02D;
    --color-danger: #ff1744;
    --color-borderStrong: rgba(183, 28, 28, 0.25);
    --color-surfaceMuted: rgba(183, 28, 28, 0.05);
    --color-surfaceContrast: #B71C1C;

    --color-neutral-050: #fef9f9;
    --color-neutral-100: #fdeaea;
    --color-neutral-200: #fbd4d4;
    --color-neutral-300: #f9bebe;
    --color-neutral-400: #f69797;
    --color-neutral-500: #f47171;
    --color-neutral-600: #d15656;
    --color-neutral-700: #af3e3e;
    --color-neutral-800: #8d2828;
    --color-neutral-900: #6a1a1a;

    --fo-shadow-sm: 0 6px 14px rgba(110, 20, 20, 0.1);
    --fo-shadow-md: 0 14px 32px rgba(110, 20, 20, 0.15);
    --fo-shadow-lg: 0 20px 48px rgba(110, 20, 20, 0.2);
    --fo-shadow-xl: 0 26px 70px rgba(110, 20, 20, 0.25);
}

/* Christmas - Dark */
body.theme-christmas.theme-dark {
    --color-primaryDark: #B71C1C;
    --color-primary: #C62828;
    --color-primaryBright: #E53935;
    --color-accent: #66BB6A;
    /* Light Green */
    --color-accentMuted: rgba(102, 187, 106, 0.2);
    --color-accentLessMuted: rgba(102, 187, 106, 0.42);

    --color-bg: #1B2F1B;
    /* Dark Green */
    --color-surface: #243c24;
    --color-surfaceEmphasis: #2d4a2d;
    --color-text: #f5e8e8;
    --color-textMuted: #b0a0a0;
    --color-border: rgba(255, 240, 240, 0.15);

    --sidebar-bg-top: #0f1a0f;
    --sidebar-bg-middle: #142514;
    --sidebar-bg-bottom: #1B2F1B;
    --sidebar-border: rgba(255, 240, 240, 0.15);
    --sidebar-shadow: 8px 0 30px rgba(0, 0, 0, 0.5);
    --sidebar-text: rgba(245, 232, 232, 0.95);
    --sidebar-text-muted: rgba(245, 232, 232, 0.7);
    --sidebar-heading: rgba(245, 232, 232, 0.55);
    --sidebar-icon-bg: rgba(255, 236, 179, 0.2);
    --sidebar-icon-color: #FFECB3;
    /* Light Gold */
    --sidebar-hover-bg: rgba(255, 255, 255, 0.1);
    --sidebar-active-bg: rgba(255, 255, 255, 0.18);
    --sidebar-active-border: #FFECB3;
    /* Light Gold */
    --sidebar-separator: rgba(255, 240, 240, 0.12);
    --sidebar-subtle: rgba(255, 240, 240, 0.08);
    --scrollbar-track: rgba(245, 232, 232, 0.1);
    --scrollbar-thumb: rgba(200, 50, 50, 0.6);
    --scrollbar-thumb-hover: rgba(220, 70, 70, 0.8);
    --sidebar-scrollbar-track: rgba(245, 232, 232, 0.1);
    --sidebar-scrollbar-thumb: rgba(245, 232, 232, 0.35);
    --sidebar-scrollbar-thumb-hover: rgba(245, 232, 232, 0.55);

    --header-bg-top: #0f1a0f;
    --header-bg-bottom: #1B2F1B;
    --header-border: rgba(255, 240, 240, 0.15);
    --header-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
    --header-text: #ffffff;

    --color-secondary: #E53935;
    /* Bright Red */
    --color-accentWarm: #FFA726;
    /* Orange */
    --color-accentSun: #FFEE58;
    /* Yellow Gold */
    --color-info: #4FC3F7;
    --color-success: #81C784;
    --color-warning: #FFEE58;
    --color-danger: #EF5350;
    --color-borderStrong: rgba(255, 240, 240, 0.3);
    --color-surfaceMuted: rgba(255, 240, 240, 0.08);
    --color-surfaceContrast: #f5e8e8;

    --color-neutral-050: #213621;
    --color-neutral-100: #284228;
    --color-neutral-200: #345834;
    --color-neutral-300: #416e41;
    --color-neutral-400: #578a57;
    --color-neutral-500: #73a873;
    --color-neutral-600: #8cc48c;
    --color-neutral-700: #a8dca8;
    --color-neutral-800: #c5f2c5;
    --color-neutral-900: #e2ffe2;

    --fo-shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.4);
    --fo-shadow-md: 0 18px 40px rgba(0, 0, 0, 0.5);
    --fo-shadow-lg: 0 28px 60px rgba(0, 0, 0, 0.55);
    --fo-shadow-xl: 0 36px 88px rgba(0, 0, 0, 0.6);
}

:root {
    /* Emphasis surface for headers/search panels */
    --fo-surface-alt: var(--fo-color-surface-emphasis, #f8fafc);
    /* Base surface and border tokens consumed by layout.css (with fallbacks) */
    --fo-surface: var(--fo-color-surface, #ffffff);
    --fo-border: var(--fo-color-border-soft, rgba(7, 60, 46, 0.12));
    /* Default corner radius alias used by legacy compatibility blocks */
    --fo-radius: var(--fo-radius-sm, 8px);
}