/**
 * Hotel ERP - Tokyo Night Theme
 *
 * Visual Studio Code의 Tokyo Night 테마에서 영감을 받은
 * 보라/파랑 계열의 어두운 테마입니다.
 *
 * Colors inspired by: https://github.com/enkia/tokyo-night-vscode-theme
 *
 * @see design_guide.md
 */

[data-theme="tokyo-night"] {
    /* ==========================================
     * Tokyo Night Color Palette
     * ========================================== */
    --tokyo-bg: #1a1b26;
    --tokyo-bg-dark: #16161e;
    --tokyo-bg-highlight: #292e42;
    --tokyo-terminal-black: #414868;
    --tokyo-fg: #a9b1d6;
    --tokyo-fg-dark: #787c99;
    --tokyo-fg-gutter: #3b4261;
    --tokyo-dark3: #545c7e;
    --tokyo-dark5: #737aa2;
    --tokyo-comment: #565f89;
    --tokyo-blue: #7aa2f7;
    --tokyo-cyan: #7dcfff;
    --tokyo-magenta: #bb9af7;
    --tokyo-purple: #9d7cd8;
    --tokyo-orange: #ff9e64;
    --tokyo-yellow: #e0af68;
    --tokyo-green: #9ece6a;
    --tokyo-teal: #73daca;
    --tokyo-red: #f7768e;
    --tokyo-red1: #db4b4b;

    /* ==========================================
     * Primary Colors (Tokyo Blue)
     * ========================================== */
    --primary: #7aa2f7;
    --primary-hover: #5d87f5;
    --primary-light: rgba(122, 162, 247, 0.2);
    --primary-dark: #3d59a1;

    /* ==========================================
     * Background Colors
     * ========================================== */
    --bg-body: var(--tokyo-bg-dark);
    --bg-sidebar: var(--tokyo-bg);
    --bg-sidebar-hover: var(--tokyo-bg-highlight);
    --bg-sidebar-active: var(--tokyo-blue);
    --bg-card: var(--tokyo-bg);
    --bg-card-hover: var(--tokyo-bg-highlight);
    --bg-card-active: var(--tokyo-terminal-black);
    --bg-input: var(--tokyo-bg-dark);
    --bg-input-disabled: var(--tokyo-bg);
    --bg-table-header: var(--tokyo-bg-highlight);
    --bg-table-row-hover: var(--tokyo-bg-highlight);
    --bg-table-row-striped: rgba(41, 46, 66, 0.5);
    --bg-dropdown: var(--tokyo-bg);
    --bg-modal: var(--tokyo-bg);
    --bg-modal-overlay: rgba(22, 22, 30, 0.8);
    --bg-tooltip: var(--tokyo-terminal-black);
    --bg-badge: var(--tokyo-bg-highlight);
    --bg-code: var(--tokyo-bg-dark);

    /* Surface Colors (PrimeVue compatibility) */
    --surface-ground: var(--tokyo-bg);
    --surface-section: var(--tokyo-bg-dark);
    --surface-card: var(--tokyo-bg);
    --surface-hover: var(--tokyo-bg-highlight);
    --surface-border: var(--tokyo-terminal-black);
    --surface-200: var(--tokyo-bg-highlight);

    /* ==========================================
     * Text Colors
     * ========================================== */
    --text-main: var(--tokyo-fg);
    --text-sub: var(--tokyo-fg-dark);
    --text-muted: var(--tokyo-comment);
    --text-disabled: var(--tokyo-fg-gutter);
    --text-inverse: var(--tokyo-bg-dark);
    --text-link: var(--tokyo-cyan);
    --text-link-hover: var(--tokyo-blue);
    --text-sidebar: var(--tokyo-fg);
    --text-sidebar-muted: var(--tokyo-dark5);
    --text-tooltip: var(--tokyo-fg);
    --text-placeholder: var(--tokyo-comment);

    /* ==========================================
     * Border Colors
     * ========================================== */
    --border-color: var(--tokyo-bg-highlight);
    --border-light: var(--tokyo-bg);
    --border-dark: var(--tokyo-terminal-black);
    --border-focus: var(--tokyo-blue);
    --border-error: var(--tokyo-red);

    /* ==========================================
     * Semantic Colors Override
     * ========================================== */
    --success: var(--tokyo-green);
    --success-light: rgba(158, 206, 106, 0.2);
    --success-dark: #76a94f;

    --danger: var(--tokyo-red);
    --danger-light: rgba(247, 118, 142, 0.2);
    --danger-dark: var(--tokyo-red1);

    --warning: var(--tokyo-orange);
    --warning-light: rgba(255, 158, 100, 0.2);
    --warning-dark: #d98c4e;

    --info: var(--tokyo-cyan);
    --info-light: rgba(125, 207, 255, 0.2);
    --info-dark: #5ab8e6;

    --primary-light: rgba(122, 162, 247, 0.2);
    --secondary-light: rgba(157, 124, 216, 0.2);

    /* ==========================================
     * Grayscale (Tokyo Night palette)
     * ========================================== */
    --gray-50: var(--tokyo-bg-dark);
    --gray-100: var(--tokyo-bg);
    --gray-200: var(--tokyo-bg-highlight);
    --gray-300: var(--tokyo-terminal-black);
    --gray-400: var(--tokyo-comment);
    --gray-500: var(--tokyo-dark3);
    --gray-600: var(--tokyo-dark5);
    --gray-700: var(--tokyo-fg-dark);
    --gray-800: var(--tokyo-fg);
    --gray-900: #c0caf5;

    /* ==========================================
     * Shadows (purple tint)
     * ========================================== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.32);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.36);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.36);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.40);

    /* ==========================================
     * Component-Specific Colors
     * ========================================== */

    /* Buttons */
    --btn-primary-bg: var(--tokyo-blue);
    --btn-primary-text: var(--tokyo-bg-dark);
    --btn-primary-hover-bg: #5d87f5;
    --btn-secondary-bg: var(--tokyo-bg-highlight);
    --btn-secondary-text: var(--tokyo-fg);
    --btn-secondary-border: var(--tokyo-terminal-black);
    --btn-secondary-hover-bg: var(--tokyo-terminal-black);

    /* Inputs */
    --input-bg: var(--bg-input);
    --input-text: var(--text-main);
    --input-border: var(--border-color);
    --input-focus-border: var(--tokyo-blue);
    --input-focus-ring: transparent;

    /* Tables */
    --table-header-bg: var(--bg-table-header);
    --table-header-text: var(--tokyo-fg);
    --table-border: var(--border-color);
    --table-row-hover: var(--bg-table-row-hover);

    /* Cards */
    --card-bg: var(--bg-card);
    --card-border: var(--border-color);
    --card-shadow: var(--shadow-md);

    /* Modals */
    --modal-bg: var(--bg-modal);
    --modal-border: var(--tokyo-terminal-black);
    --modal-shadow: var(--shadow-xl);

    /* Tabs */
    --tab-bg: transparent;
    --tab-active-bg: var(--tokyo-bg-highlight);
    --tab-active-border: var(--tokyo-blue);
    --tab-text: var(--tokyo-dark5);
    --tab-active-text: var(--tokyo-fg);

    /* Badges - colorful Tokyo Night style */
    --badge-default-bg: var(--tokyo-bg-highlight);
    --badge-default-text: var(--tokyo-fg-dark);
    --badge-primary-bg: rgba(122, 162, 247, 0.2);
    --badge-primary-text: var(--tokyo-blue);
    --badge-success-bg: rgba(158, 206, 106, 0.2);
    --badge-success-text: var(--tokyo-green);
    --badge-danger-bg: rgba(247, 118, 142, 0.2);
    --badge-danger-text: var(--tokyo-red);
    --badge-warning-bg: rgba(255, 158, 100, 0.2);
    --badge-warning-text: var(--tokyo-orange);
    --badge-info-bg: rgba(125, 207, 255, 0.2);
    --badge-info-text: var(--tokyo-cyan);
    --badge-secondary-bg: rgba(187, 154, 247, 0.2);
    --badge-secondary-text: var(--tokyo-magenta);
    --badge-orange-bg: rgba(255, 158, 100, 0.2);
    --badge-orange-text: var(--tokyo-orange);

    /* Secondary Colors (Tokyo Magenta/Purple) */
    --secondary: var(--tokyo-magenta);
    --secondary-hover: var(--tokyo-purple);
    --secondary-light: rgba(187, 154, 247, 0.2);
    --secondary-dark: #c9a8ff;

    /* Accent Gold (Tokyo Yellow) */
    --accent-gold: var(--tokyo-yellow);
    --accent-gold-hover: #d9a557;
    --accent-gold-light: rgba(224, 175, 104, 0.2);
    --accent-gold-dark: #f0c77f;

    /* Scrollbar */
    --scrollbar-track: var(--tokyo-bg);
    --scrollbar-thumb: var(--tokyo-terminal-black);
    --scrollbar-thumb-hover: var(--tokyo-dark3);

    /* Focus Ring */
    --focus-ring-color: var(--tokyo-fg);
    --focus-ring-offset: 2px;

    /* Selection */
    --selection-bg: rgba(122, 162, 247, 0.3);
    --selection-text: inherit;
}

/* ==========================================
 * Scrollbar Styling
 * ========================================== */
[data-theme="tokyo-night"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="tokyo-night"] ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

[data-theme="tokyo-night"] ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

[data-theme="tokyo-night"] ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* ==========================================
 * Selection Styling
 * ========================================== */
[data-theme="tokyo-night"] ::selection {
    background: var(--selection-bg);
    color: var(--selection-text);
}

/* ==========================================
 * Special Tokyo Night Accents
 * ========================================== */
[data-theme="tokyo-night"] a:not(.btn) {
    color: var(--tokyo-cyan);
}

[data-theme="tokyo-night"] a:not(.btn):hover {
    color: var(--tokyo-blue);
}

[data-theme="tokyo-night"] code {
    color: var(--tokyo-magenta);
    background-color: var(--tokyo-bg-dark);
}

[data-theme="tokyo-night"] .text-primary {
    color: var(--tokyo-blue) !important;
}

[data-theme="tokyo-night"] .text-success {
    color: var(--tokyo-green) !important;
}

[data-theme="tokyo-night"] .text-danger {
    color: var(--tokyo-red) !important;
}

[data-theme="tokyo-night"] .text-warning {
    color: var(--tokyo-orange) !important;
}

[data-theme="tokyo-night"] .text-info {
    color: var(--tokyo-cyan) !important;
}