/* ==========================================================================
   Text Multi Search - Base Styles & Theme Variables
   ========================================================================== */

/* Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   CSS Variables - Light Theme (Default)
   ========================================================================== */
:root {
    /* Colors */
    --bg-app: #f5f5f5;
    --bg-panel: #ffffff;
    --border-color: #e5e5e5;
    --text-main: #333333;
    --text-muted: #666666;
    --primary: #166534;
    --primary-hover: #14532d;

    /* Diff Colors */
    --diff-add-bg: #dcfce7;
    --diff-add-text: #166534;
    --diff-replace-bg: #ffedd5;
    --diff-replace-text: #c2410c;
    --diff-user-text: #2563eb;
    --diff-del-bg: #fee2e2;
    --diff-del-text: #991b1b;

    /* Overlay */
    --drop-overlay-bg: rgba(255, 255, 255, 0.9);

    /* Syntax Highlighting */
    --syntax-comment: #16a34a;

    /* Layout & Settings */
    --toolbar-height: 80px;
    --font-size-base: 16px;

    /* Font Families */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'Consolas', 'Monaco', 'Courier New', 'Noto Sans JP', monospace;

    /* Transitions */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-ease: ease;

    /* Z-Index Hierarchy */
    --z-drop-overlay: 20;
    --z-scroll-btn: 100;
    --z-toast: 1000;
    --z-loading: 9999;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 0.5rem;
    --radius-full: 50%;
    --radius-pill: 999px;

    /* Box Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    --shadow-btn-scroll: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   CSS Variables - Dark Theme
   ========================================================================== */
[data-theme="dark"] {
    --bg-app: #171717;
    --bg-panel: #262626;
    --border-color: #404040;
    --text-main: #e5e5e5;
    --text-muted: #a3a3a3;
    --primary: #FCA5A5;
    --primary-hover: #fecaca;

    --diff-add-bg: #052e16;
    --diff-add-text: #86efac;
    --diff-replace-bg: #431407;
    --diff-replace-text: #fdba74;
    --diff-user-text: #60a5fa;
    --diff-del-bg: #450a0a;
    --diff-del-text: #fca5a5;

    --drop-overlay-bg: rgba(15, 17, 21, 0.9);

    --syntax-comment: #22c55e;
}

/* ==========================================================================
   Base Element Styles
   ========================================================================== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-app);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.text-highlight {
    color: var(--primary) !important;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}