/*
 * SPM Theme System
 * Comprehensive CSS variable-based theme for Cesivi Server
 * Supports light and dark themes
 * Created: 2026-01-11 (PLAN-130 Phase 3.5.1)
 */

:root {
    /* ==================== BRAND COLORS ==================== */
    --spm-primary: #0072c6;
    --spm-primary-dark: #005a9e;
    --spm-primary-light: #2390e7;
    --spm-secondary: #2b88d8;
    --spm-accent: #50e6ff;
    --spm-success: #107c10;
    --spm-warning: #ffb900;
    --spm-error: #d13438;
    --spm-info: #0072c6;

    /* ==================== NEUTRAL COLORS ==================== */
    --spm-bg: #ffffff;
    --spm-bg-secondary: #faf9f8;
    --spm-surface: #f4f4f4;
    --spm-surface-hover: #e1e1e1;
    --spm-surface-active: #e8e8e8;
    --spm-border: #e1e1e1;
    --spm-border-strong: #c6c6c6;
    --spm-border-subtle: #f4f4f4;

    /* ==================== TEXT COLORS ==================== */
    --spm-text: #333;
    --spm-text-secondary: #666;
    --spm-text-disabled: #a19f9d;
    --spm-text-inverse: #ffffff;
    --spm-text-link: #0072c6;
    --spm-text-link-hover: #005a9e;

    /* ==================== SPACING ==================== */
    --spm-spacing-xs: 4px;
    --spm-spacing-sm: 8px;
    --spm-spacing-md: 16px;
    --spm-spacing-lg: 24px;
    --spm-spacing-xl: 32px;
    --spm-spacing-xxl: 48px;

    /* ==================== TYPOGRAPHY ==================== */
    --spm-font-family: "Segoe UI", "Segoe", Tahoma, Helvetica, Arial, sans-serif;
    --spm-font-family-mono: "Consolas", "Courier New", monospace;
    --spm-font-size-xs: 10px;
    --spm-font-size-sm: 12px;
    --spm-font-size-md: 14px;
    --spm-font-size-lg: 16px;
    --spm-font-size-xl: 20px;
    --spm-font-size-xxl: 24px;
    --spm-font-size-xxxl: 32px;
    --spm-font-weight-normal: 400;
    --spm-font-weight-semibold: 600;
    --spm-font-weight-bold: 700;
    --spm-line-height-normal: 1.5;
    --spm-line-height-tight: 1.2;

    /* ==================== LAYOUT ==================== */
    --spm-ribbon-height: 48px;
    --spm-ribbon-collapsed-height: 32px;
    --spm-topbar-height: 32px;
    --spm-quicklaunch-width: 200px;
    --spm-quicklaunch-collapsed-width: 48px;
    --spm-content-max-width: 1920px;
    --spm-sidebar-width: 300px;

    /* ==================== BORDERS ==================== */
    --spm-border-radius-sm: 2px;
    --spm-border-radius-md: 4px;
    --spm-border-radius-lg: 8px;
    --spm-border-width: 1px;

    /* ==================== SHADOWS ==================== */
    --spm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --spm-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.12);
    --spm-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.16);
    --spm-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.20);

    /* ==================== ANIMATIONS ==================== */
    --spm-transition-fast: 100ms;
    --spm-transition-normal: 200ms;
    --spm-transition-slow: 300ms;
    --spm-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* ==================== SUITE BAR / TOP BAR ==================== */
    --spm-header-bg: var(--spm-primary);
    --spm-topbar-bg: var(--spm-header-bg);
    --spm-topbar-text: var(--spm-text-inverse);
    --spm-topbar-hover: var(--spm-primary-dark);
    --spm-topbar-border: var(--spm-primary-dark);

    /* ==================== RIBBON ==================== */
    --spm-ribbon-bg: var(--spm-surface);
    --spm-ribbon-border: var(--spm-border-strong);
    --spm-ribbon-tab-bg: transparent;
    --spm-ribbon-tab-bg-hover: var(--spm-surface-hover);
    --spm-ribbon-tab-bg-active: var(--spm-bg);
    --spm-ribbon-tab-border-active: var(--spm-border-strong);
    --spm-ribbon-commands-bg: var(--spm-bg);

    /* ==================== QUICK LAUNCH ==================== */
    --spm-quicklaunch-bg: var(--spm-surface);
    --spm-quicklaunch-border: var(--spm-border);
    --spm-quicklaunch-hover: var(--spm-surface-hover);
    --spm-quicklaunch-active-bg: #cde6f7;
    --spm-quicklaunch-active-text: var(--spm-primary);
    --spm-quicklaunch-text: var(--spm-text);

    /* ==================== CONTENT AREA ==================== */
    --spm-content-bg: var(--spm-bg);
    --spm-content-text: var(--spm-text);
    --spm-content-heading: var(--spm-text);

    /* ==================== LIST/GRID ==================== */
    --spm-list-header-bg: var(--spm-surface);
    --spm-list-header-text: var(--spm-text);
    --spm-list-row-bg: var(--spm-bg);
    --spm-list-row-bg-hover: var(--spm-bg-secondary);
    --spm-list-row-bg-selected: #cde6f7;
    --spm-list-row-border: var(--spm-border);
    --spm-list-row-text: var(--spm-text);

    /* ==================== FORMS ==================== */
    --spm-form-bg: var(--spm-bg);
    --spm-form-border: var(--spm-border-strong);
    --spm-form-border-focus: var(--spm-primary);
    --spm-form-text: var(--spm-text);
    --spm-form-placeholder: var(--spm-text-secondary);
    --spm-form-disabled-bg: var(--spm-surface);
    --spm-form-disabled-text: var(--spm-text-disabled);

    /* ==================== BUTTONS ==================== */
    --spm-button-primary-bg: var(--spm-primary);
    --spm-button-primary-bg-hover: var(--spm-primary-dark);
    --spm-button-primary-text: var(--spm-text-inverse);
    --spm-button-secondary-bg: var(--spm-surface);
    --spm-button-secondary-bg-hover: var(--spm-surface-hover);
    --spm-button-secondary-text: var(--spm-text);
    --spm-button-danger-bg: var(--spm-error);
    --spm-button-danger-bg-hover: #a4262c;
    --spm-button-danger-text: var(--spm-text-inverse);

    /* ==================== BREADCRUMB ==================== */
    --spm-breadcrumb-text: var(--spm-text-secondary);
    --spm-breadcrumb-link: var(--spm-text-link);
    --spm-breadcrumb-separator: #999999;

    /* ==================== WEBPARTS ==================== */
    --spm-webpart-bg: var(--spm-bg);
    --spm-webpart-border: var(--spm-border-strong);
    --spm-webpart-title-bg: var(--spm-surface);
    --spm-webpart-title-text: var(--spm-text);

    /* ==================== MODALS/DIALOGS ==================== */
    --spm-modal-bg: var(--spm-bg);
    --spm-modal-overlay: rgba(0, 0, 0, 0.4);
    --spm-modal-border: var(--spm-border-strong);

    /* ==================== TOOLTIPS ==================== */
    --spm-tooltip-bg: #333;
    --spm-tooltip-text: var(--spm-text-inverse);

    /* ==================== FILE ICONS ==================== */
    --spm-icon-file-default: #666;
    --spm-icon-file-word: #2b579a;
    --spm-icon-file-excel: #217346;
    --spm-icon-file-powerpoint: #d24726;
    --spm-icon-file-pdf: #d13438;
    --spm-icon-file-image: #0072c6;
    --spm-icon-file-video: #c239b3;
    --spm-icon-file-audio: #498205;
    --spm-icon-file-archive: #797775;
    --spm-icon-file-code: #f3f2f1;
    --spm-icon-folder: #ffb900;

    /* ==================== Z-INDEX LAYERS ==================== */
    --spm-z-base: 0;
    --spm-z-dropdown: 1000;
    --spm-z-sticky: 1020;
    --spm-z-fixed: 1030;
    --spm-z-modal-backdrop: 1040;
    --spm-z-modal: 1050;
    --spm-z-popover: 1060;
    --spm-z-tooltip: 1070;
}

/* ==================== DARK THEME ==================== */
[data-theme="dark"] {
    /* BRAND COLORS - Adjusted for dark theme */
    --spm-primary: #4cc2ff;
    --spm-primary-dark: #2b88d8;
    --spm-primary-light: #6ccfff;
    --spm-secondary: #4cc2ff;
    --spm-accent: #00d4ff;
    --spm-success: #54b054;
    --spm-warning: #fce100;
    --spm-error: #f1707b;
    --spm-info: #4cc2ff;

    /* NEUTRAL COLORS */
    --spm-bg: #1f1f1f;
    --spm-bg-secondary: #2d2d2d;
    --spm-surface: #2d2d2d;
    --spm-surface-hover: #3f3f3f;
    --spm-surface-active: #424242;
    --spm-border: #3f3f3f;
    --spm-border-strong: #5a5a5a;
    --spm-border-subtle: #2d2d2d;

    /* TEXT COLORS */
    --spm-text: #ffffff;
    --spm-text-secondary: #c8c6c4;
    --spm-text-disabled: #797775;
    --spm-text-inverse: #1f1f1f;
    --spm-text-link: #4cc2ff;
    --spm-text-link-hover: #6ccfff;

    /* SHADOWS - More prominent in dark theme */
    --spm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --spm-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35);
    --spm-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.45);
    --spm-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.55);

    /* SUITE BAR / TOP BAR */
    --spm-topbar-bg: #1a1a1a;
    --spm-topbar-text: var(--spm-text);
    --spm-topbar-hover: #3f3f3f;
    --spm-topbar-border: #2d2d2d;

    /* RIBBON */
    --spm-ribbon-bg: #2d2d2d;
    --spm-ribbon-border: #3f3f3f;
    --spm-ribbon-tab-bg: transparent;
    --spm-ribbon-tab-bg-hover: #3f3f3f;
    --spm-ribbon-tab-bg-active: #1f1f1f;
    --spm-ribbon-tab-border-active: #3f3f3f;
    --spm-ribbon-commands-bg: #1f1f1f;

    /* QUICK LAUNCH */
    --spm-quicklaunch-bg: #2d2d2d;
    --spm-quicklaunch-border: #3f3f3f;
    --spm-quicklaunch-hover: #3f3f3f;
    --spm-quicklaunch-active-bg: #1a3a52;
    --spm-quicklaunch-active-text: #4cc2ff;
    --spm-quicklaunch-text: var(--spm-text);

    /* CONTENT AREA */
    --spm-content-bg: #1f1f1f;
    --spm-content-text: var(--spm-text);
    --spm-content-heading: var(--spm-text);

    /* LIST/GRID */
    --spm-list-header-bg: #2d2d2d;
    --spm-list-header-text: var(--spm-text);
    --spm-list-row-bg: #1f1f1f;
    --spm-list-row-bg-hover: #2d2d2d;
    --spm-list-row-bg-selected: #1a3a52;
    --spm-list-row-border: #3f3f3f;
    --spm-list-row-text: var(--spm-text);

    /* FORMS */
    --spm-form-bg: #2d2d2d;
    --spm-form-border: #5a5a5a;
    --spm-form-border-focus: var(--spm-primary);
    --spm-form-text: var(--spm-text);
    --spm-form-placeholder: var(--spm-text-secondary);
    --spm-form-disabled-bg: #3f3f3f;
    --spm-form-disabled-text: var(--spm-text-disabled);

    /* BUTTONS */
    --spm-button-primary-bg: #4cc2ff;
    --spm-button-primary-bg-hover: #6ccfff;
    --spm-button-primary-text: #1f1f1f;
    --spm-button-secondary-bg: #3f3f3f;
    --spm-button-secondary-bg-hover: #5a5a5a;
    --spm-button-secondary-text: var(--spm-text);
    --spm-button-danger-bg: #f1707b;
    --spm-button-danger-bg-hover: #f48d96;
    --spm-button-danger-text: #1f1f1f;

    /* BREADCRUMB */
    --spm-breadcrumb-text: var(--spm-text-secondary);
    --spm-breadcrumb-link: var(--spm-text-link);
    --spm-breadcrumb-separator: #797775;

    /* WEBPARTS */
    --spm-webpart-bg: #1f1f1f;
    --spm-webpart-border: #5a5a5a;
    --spm-webpart-title-bg: #2d2d2d;
    --spm-webpart-title-text: var(--spm-text);

    /* MODALS/DIALOGS */
    --spm-modal-bg: #2d2d2d;
    --spm-modal-overlay: rgba(0, 0, 0, 0.7);
    --spm-modal-border: #5a5a5a;

    /* TOOLTIPS */
    --spm-tooltip-bg: #ffffff;
    --spm-tooltip-text: #1f1f1f;

    /* FILE ICONS - Brighter versions for dark theme */
    --spm-icon-file-default: #c8c6c4;
    --spm-icon-file-word: #5b9bd5;
    --spm-icon-file-excel: #4caf50;
    --spm-icon-file-powerpoint: #ff7043;
    --spm-icon-file-pdf: #f1707b;
    --spm-icon-file-image: #4cc2ff;
    --spm-icon-file-video: #e879f9;
    --spm-icon-file-audio: #8bc34a;
    --spm-icon-file-archive: #a19f9d;
    --spm-icon-file-code: #fce100;
    --spm-icon-folder: #fce100;
}

/* ==================== COMPOSED LOOKS — COLOR THEMES ==================== */
/* Applied via data-spm-theme attribute on <html>. Each overrides primary colors only.   */
/* Neutral surfaces, text, and spacing remain consistent.                                 */
/* Default (classic-blue) is the :root block above — no override needed.                 */

/* Theme: Forest */
[data-spm-theme="forest"] {
    --spm-primary: #217346;
    --spm-primary-dark: #1a5c38;
    --spm-primary-light: #2d9a5f;
    --spm-text-link: #217346;
    --spm-text-link-hover: #1a5c38;
    --spm-header-bg: #1a5c38;
}

/* Theme: Ocean */
[data-spm-theme="ocean"] {
    --spm-primary: #006b6b;
    --spm-primary-dark: #004b50;
    --spm-primary-light: #007878;
    --spm-text-link: #006b6b;
    --spm-text-link-hover: #004b50;
    --spm-header-bg: #004b50;
}

/* Theme: Berry */
[data-spm-theme="berry"] {
    --spm-primary: #5c2d91;
    --spm-primary-dark: #40217a;
    --spm-primary-light: #7033b4;
    --spm-text-link: #5c2d91;
    --spm-text-link-hover: #40217a;
    --spm-header-bg: #40217a;
}

/* Theme: Sunset */
[data-spm-theme="sunset"] {
    --spm-primary: #d83b01;
    --spm-primary-dark: #a52a00;
    --spm-primary-light: #e85a1b;
    --spm-text-link: #d83b01;
    --spm-text-link-hover: #a52a00;
    --spm-header-bg: #a52a00;
}

/* Theme: Graphite */
[data-spm-theme="graphite"] {
    --spm-primary: #444444;
    --spm-primary-dark: #252423;
    --spm-primary-light: #666666;
    --spm-text-link: #444444;
    --spm-text-link-hover: #252423;
    --spm-header-bg: #252423;
}

/* ==================== THEME TRANSITION ==================== */
/* Smooth transition when switching themes */
:root,
[data-theme="dark"] {
    transition:
        background-color var(--spm-transition-normal) var(--spm-easing),
        color var(--spm-transition-normal) var(--spm-easing),
        border-color var(--spm-transition-normal) var(--spm-easing);
}

/* ==================== UTILITY CLASSES ==================== */
/* Use these classes for quick theming */

/* Background colors */
.spm-bg-primary { background-color: var(--spm-primary); }
.spm-bg-secondary { background-color: var(--spm-secondary); }
.spm-bg-surface { background-color: var(--spm-surface); }
.spm-bg-error { background-color: var(--spm-error); }
.spm-bg-success { background-color: var(--spm-success); }
.spm-bg-warning { background-color: var(--spm-warning); }

/* Text colors */
.spm-text-primary { color: var(--spm-text); }
.spm-text-secondary { color: var(--spm-text-secondary); }
.spm-text-disabled { color: var(--spm-text-disabled); }
.spm-text-link { color: var(--spm-text-link); }
.spm-text-error { color: var(--spm-error); }
.spm-text-success { color: var(--spm-success); }
.spm-text-warning { color: var(--spm-warning); }

/* Border colors */
.spm-border { border: var(--spm-border-width) solid var(--spm-border); }
.spm-border-strong { border: var(--spm-border-width) solid var(--spm-border-strong); }
.spm-border-primary { border: var(--spm-border-width) solid var(--spm-primary); }

/* Spacing utilities */
.spm-p-xs { padding: var(--spm-spacing-xs); }
.spm-p-sm { padding: var(--spm-spacing-sm); }
.spm-p-md { padding: var(--spm-spacing-md); }
.spm-p-lg { padding: var(--spm-spacing-lg); }
.spm-p-xl { padding: var(--spm-spacing-xl); }

.spm-m-xs { margin: var(--spm-spacing-xs); }
.spm-m-sm { margin: var(--spm-spacing-sm); }
.spm-m-md { margin: var(--spm-spacing-md); }
.spm-m-lg { margin: var(--spm-spacing-lg); }
.spm-m-xl { margin: var(--spm-spacing-xl); }

/* Shadow utilities */
.spm-shadow-sm { box-shadow: var(--spm-shadow-sm); }
.spm-shadow-md { box-shadow: var(--spm-shadow-md); }
.spm-shadow-lg { box-shadow: var(--spm-shadow-lg); }
.spm-shadow-xl { box-shadow: var(--spm-shadow-xl); }

/* Border radius utilities */
.spm-rounded-sm { border-radius: var(--spm-border-radius-sm); }
.spm-rounded-md { border-radius: var(--spm-border-radius-md); }
.spm-rounded-lg { border-radius: var(--spm-border-radius-lg); }

/* Typography utilities */
.spm-font-xs { font-size: var(--spm-font-size-xs); }
.spm-font-sm { font-size: var(--spm-font-size-sm); }
.spm-font-md { font-size: var(--spm-font-size-md); }
.spm-font-lg { font-size: var(--spm-font-size-lg); }
.spm-font-xl { font-size: var(--spm-font-size-xl); }
.spm-font-xxl { font-size: var(--spm-font-size-xxl); }
.spm-font-semibold { font-weight: var(--spm-font-weight-semibold); }
.spm-font-bold { font-weight: var(--spm-font-weight-bold); }

/* ==================== RESPONSIVE BREAKPOINTS ==================== */
/* Use these for responsive design */

/* Small devices (phones, less than 768px) */
@media (max-width: 767px) {
    :root {
        --spm-quicklaunch-width: 100%;
        --spm-spacing-md: 12px;
        --spm-spacing-lg: 16px;
        --spm-spacing-xl: 24px;
    }
}

/* Medium devices (tablets, 768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --spm-quicklaunch-width: 200px;
    }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
    :root {
        --spm-quicklaunch-width: 200px;
    }
}

/* Extra large devices (large desktops, 1440px and up) */
@media (min-width: 1440px) {
    :root {
        --spm-quicklaunch-width: 280px;
    }
}

/* ==================== PRINT STYLES ==================== */
@media print {
    :root {
        --spm-bg: #ffffff;
        --spm-text: #000000;
        --spm-border: #cccccc;
    }

    /* Hide UI chrome when printing */
    .ms-suitebar,
    .ms-ribbon,
    .ms-quicklaunch {
        display: none !important;
    }
}

/* ==================== ACCESSIBILITY ==================== */
/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --spm-border-width: 2px;
        --spm-border: #000000;
        --spm-border-strong: #000000;
        --spm-text: #000000;
        --spm-bg: #ffffff;
    }

    [data-theme="dark"] {
        --spm-border: #ffffff;
        --spm-border-strong: #ffffff;
        --spm-text: #ffffff;
        --spm-bg: #000000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    :root,
    [data-theme="dark"] {
        transition: none !important;
    }

    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}