/**
 * Plugin CSS Variables - SINGLE SOURCE OF TRUTH
 * 
 * Based on: calendar-events-visual, upcoming-events, opening-hours, shift-management
 * These are the four core system plugins that define the visual standard.
 * 
 * All plugins should use these variables for consistent theming.
 * New plugins inherit these styles automatically via the SDK base class.
 * 
 * @example
 * .my-plugin {
 *   background: var(--plugin-bg);
 *   color: var(--plugin-text);
 *   padding: var(--plugin-padding);
 * }
 */

:root {
    /* ========================================
       COLORS - Live Client Theme (Default)
       Based on: Live production InfoMonitor client
       ======================================== */
    
    /* Primary Backgrounds */
    --plugin-bg: #2a2a2a;              /* Main plugin background (solid dark gray) */
    --plugin-bg-secondary: #333333;    /* Secondary/header backgrounds */
    --plugin-bg-header: #333333;       /* Header background */
    --plugin-bg-hover: #3a3a3a;        /* Hover state */
    --plugin-bg-active: #404040;       /* Active state */
    --plugin-bg-overlay: rgba(255, 255, 255, 0.03);  /* Subtle overlay */
    --plugin-bg-card: rgba(255, 255, 255, 0.08);     /* Card backgrounds */
    
    /* Text Colors */
    --plugin-text: #ffffff;            /* Primary text */
    --plugin-text-primary: #f8f9fa;    /* Primary text (alternate) */
    --plugin-text-secondary: #e0e0e0;  /* Secondary text */
    --plugin-text-muted: #adb5bd;      /* Muted/subtle text */
    --plugin-text-muted-alt: #78909c;  /* Muted text (alternate) */
    --plugin-heading: #ffffff;         /* Headings */
    
    /* Accent Colors (from core plugins) */
    --plugin-accent: #4CAF50;          /* Primary accent (green - shift-management) */
    --plugin-accent-light: #81c784;
    --plugin-accent-dark: #388e3c;
    --plugin-accent-blue: #4fc3f7;     /* Blue accent (calendar-events-visual) */
    --plugin-accent-blue-alt: #2196f3;
    
    /* Borders */
    --plugin-border: #444444;          /* Primary border */
    --plugin-border-light: #555555;
    --plugin-border-subtle: rgba(255, 255, 255, 0.1);  /* Subtle/transparent borders */
    --plugin-border-focus: #4fc3f7;
    
    /* Status Colors */
    --plugin-success: #4CAF50;
    --plugin-success-light: rgba(76, 175, 80, 0.2);
    --plugin-warning: #ffc107;
    --plugin-warning-light: rgba(255, 193, 7, 0.2);
    --plugin-error: #f44336;
    --plugin-error-light: rgba(244, 67, 54, 0.2);
    --plugin-info: #4fc3f7;
    --plugin-info-light: rgba(79, 195, 247, 0.2);
    
    /* Event Card Colors - upcoming-events/calendar-events-visual palette */
    --plugin-event-bg-default: #E3ECF7;    /* Default event card background */
    --plugin-event-text-default: #1D3D91;  /* Default event card text */
    
    
    /* ========================================
       TYPOGRAPHY
       Based on: All core plugins
       
       RESOLUTION SCALING: Font sizes use calc() with --plugin-font-scale
       which is set by resolution-scaling.js based on detected screen resolution.
       This allows fonts to scale appropriately for 720p, 1080p, 4K, and 8K displays.
       ======================================== */
    
    --plugin-font-family: 'KBH', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    /* Font Scale (set by resolution-scaling.js based on screen resolution) */
    /* Default: 1, 4K: 2.5, 8K: 3.5, 720p: 0.9 */
    --plugin-font-scale: 1;
    
    /* Base font sizes (before scaling) - used as multiplier base */
    --plugin-font-size-xs-base: 0.65rem;
    --plugin-font-size-sm-base: 0.75rem;
    --plugin-font-size-base-base: 0.875rem;
    --plugin-font-size-md-base: 1rem;
    --plugin-font-size-lg-base: 1.2rem;
    --plugin-font-size-xl-base: 1.25rem;
    --plugin-font-size-2xl-base: 1.5rem;
    --plugin-font-size-3xl-base: 2rem;
    --plugin-font-size-4xl-base: 3rem;
    
    /* Font Sizes - SCALED based on resolution */
    /* These are the variables plugins should use */
    --plugin-font-size-xs: calc(var(--plugin-font-size-xs-base) * var(--plugin-font-scale, 1));
    --plugin-font-size-sm: calc(var(--plugin-font-size-sm-base) * var(--plugin-font-scale, 1));
    --plugin-font-size-base: calc(var(--plugin-font-size-base-base) * var(--plugin-font-scale, 1));
    --plugin-font-size-md: calc(var(--plugin-font-size-md-base) * var(--plugin-font-scale, 1));
    --plugin-font-size-lg: calc(var(--plugin-font-size-lg-base) * var(--plugin-font-scale, 1));
    --plugin-font-size-xl: calc(var(--plugin-font-size-xl-base) * var(--plugin-font-scale, 1));
    --plugin-font-size-2xl: calc(var(--plugin-font-size-2xl-base) * var(--plugin-font-scale, 1));
    --plugin-font-size-3xl: calc(var(--plugin-font-size-3xl-base) * var(--plugin-font-scale, 1));
    --plugin-font-size-4xl: calc(var(--plugin-font-size-4xl-base) * var(--plugin-font-scale, 1));
    
    /* Font Weights */
    --plugin-font-weight-normal: 400;
    --plugin-font-weight-medium: 500;
    --plugin-font-weight-semibold: 600;
    --plugin-font-weight-bold: 700;
    
    /* Line Heights */
    --plugin-line-height: 1.5;
    --plugin-line-height-tight: 1.1;
    --plugin-line-height-normal: 1.3;
    --plugin-line-height-loose: 1.75;
    
    
    /* ========================================
       SPACING
       Based on: Core plugins container/content padding
       
       RESOLUTION SCALING: Spacing uses calc() with --plugin-spacing-scale
       which is set by resolution-scaling.js based on detected screen resolution.
       ======================================== */
    
    /* Spacing Scale (set by resolution-scaling.js based on screen resolution) */
    /* Default: 1, 4K: 2.0, 8K: 2.5, 720p: 0.85 */
    --plugin-spacing-scale: 1;
    
    /* Base padding values (before scaling) */
    --plugin-padding-xs-base: 4px;
    --plugin-padding-sm-base: 10px;
    --plugin-padding-base: 15px;
    --plugin-padding-md-base: 16px;
    --plugin-padding-lg-base: 24px;
    --plugin-padding-xl-base: 32px;
    
    /* Padding - SCALED based on resolution */
    --plugin-padding-xs: calc(var(--plugin-padding-xs-base) * var(--plugin-spacing-scale, 1));
    --plugin-padding-sm: calc(var(--plugin-padding-sm-base) * var(--plugin-spacing-scale, 1));
    --plugin-padding: calc(var(--plugin-padding-base) * var(--plugin-spacing-scale, 1));
    --plugin-padding-md: calc(var(--plugin-padding-md-base) * var(--plugin-spacing-scale, 1));
    --plugin-padding-lg: calc(var(--plugin-padding-lg-base) * var(--plugin-spacing-scale, 1));
    --plugin-padding-xl: calc(var(--plugin-padding-xl-base) * var(--plugin-spacing-scale, 1));
    
    /* Base gap values (before scaling) */
    --plugin-gap-xs-base: 2px;
    --plugin-gap-sm-base: 6px;
    --plugin-gap-base: 8px;
    --plugin-gap-md-base: 10px;
    --plugin-gap-lg-base: 16px;
    --plugin-gap-xl-base: 24px;
    
    /* Gap - SCALED based on resolution */
    --plugin-gap-xs: calc(var(--plugin-gap-xs-base) * var(--plugin-spacing-scale, 1));
    --plugin-gap-sm: calc(var(--plugin-gap-sm-base) * var(--plugin-spacing-scale, 1));
    --plugin-gap: calc(var(--plugin-gap-base) * var(--plugin-spacing-scale, 1));
    --plugin-gap-md: calc(var(--plugin-gap-md-base) * var(--plugin-spacing-scale, 1));
    --plugin-gap-lg: calc(var(--plugin-gap-lg-base) * var(--plugin-spacing-scale, 1));
    --plugin-gap-xl: calc(var(--plugin-gap-xl-base) * var(--plugin-spacing-scale, 1));
    
    /* Base margin values (before scaling) */
    --plugin-margin-xs-base: 2px;
    --plugin-margin-sm-base: 4px;
    --plugin-margin-base: 8px;
    --plugin-margin-md-base: 12px;
    --plugin-margin-lg-base: 16px;
    --plugin-margin-xl-base: 24px;
    
    /* Margin - SCALED based on resolution */
    --plugin-margin-xs: calc(var(--plugin-margin-xs-base) * var(--plugin-spacing-scale, 1));
    --plugin-margin-sm: calc(var(--plugin-margin-sm-base) * var(--plugin-spacing-scale, 1));
    --plugin-margin: calc(var(--plugin-margin-base) * var(--plugin-spacing-scale, 1));
    --plugin-margin-md: calc(var(--plugin-margin-md-base) * var(--plugin-spacing-scale, 1));
    --plugin-margin-lg: calc(var(--plugin-margin-lg-base) * var(--plugin-spacing-scale, 1));
    --plugin-margin-xl: calc(var(--plugin-margin-xl-base) * var(--plugin-spacing-scale, 1));
    
    
    /* ========================================
       BORDER RADIUS
       Based on: Core plugins (mostly 0 for sharp corners)
       ======================================== */
    
    --plugin-radius: 0;           /* Default: no radius (sharp corners) */
    --plugin-radius-sm: 4px;      /* Small radius (when needed) */
    --plugin-radius-md: 8px;      /* Medium radius */
    --plugin-radius-lg: 12px;
    --plugin-radius-xl: 16px;
    --plugin-radius-full: 9999px; /* Circular (avatars) */
    
    
    /* ========================================
       SHADOWS
       Based on: Core plugins
       ======================================== */
    
    --plugin-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --plugin-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    --plugin-shadow-md: 0 3px 6px rgba(0, 0, 0, 0.15);
    --plugin-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
    --plugin-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    
    
    /* ========================================
       TRANSITIONS
       Based on: Core plugins
       ======================================== */
    
    --plugin-transition-fast: 150ms ease;
    --plugin-transition: 200ms ease;
    --plugin-transition-slow: 300ms ease;
    
    
    /* ========================================
       Z-INDEX
       ======================================== */
    
    --plugin-z-base: 1;
    --plugin-z-content: 2;
    --plugin-z-overlay: 10;
    --plugin-z-dropdown: 100;
    --plugin-z-modal: 1000;
    --plugin-z-tooltip: 2000;
    
    
    /* ========================================
       COMPONENT-SPECIFIC VARIABLES
       These match what the SDK plugins actually use
       All sizes are SCALED based on resolution
       ======================================== */
    
    /* Border Scale (set by resolution-scaling.js) */
    /* Default: 1, 4K: 1.5, 8K: 2.0, 720p: 0.8 */
    --plugin-border-scale: 1;
    
    /* Headers - SCALED */
    --plugin-header-padding: calc(8px * var(--plugin-spacing-scale, 1));
    --plugin-header-bg: var(--plugin-bg-secondary);
    
    /* Cards - SCALED */
    --plugin-card-padding: calc(10px * var(--plugin-spacing-scale, 1));
    --plugin-card-gap: calc(10px * var(--plugin-spacing-scale, 1));
    --plugin-card-bg: var(--plugin-bg-card);
    
    /* List Items - SCALED */
    --plugin-item-padding: calc(4px * var(--plugin-spacing-scale, 1)) calc(8px * var(--plugin-spacing-scale, 1));
    --plugin-item-margin: calc(2px * var(--plugin-spacing-scale, 1));
    
    /* Clock (upcoming-events) - SCALED */
    --plugin-clock-size: calc(3rem * var(--plugin-font-scale, 1));
    --plugin-clock-date-size: calc(1.2rem * var(--plugin-font-scale, 1));
    
    /* Avatars (shift-management) - SCALED */
    --plugin-avatar-size: calc(4rem * var(--plugin-font-scale, 1));
    --plugin-avatar-font-size: calc(1.5rem * var(--plugin-font-scale, 1));
    
    /* Border widths - SCALED */
    --plugin-border-width: calc(1px * var(--plugin-border-scale, 1));
    --plugin-border-width-lg: calc(2px * var(--plugin-border-scale, 1));
}


/* ========================================
   THEME VARIATIONS
   ======================================== */

/* Light Theme */
[data-theme="light"] {
    --plugin-bg: #ffffff;
    --plugin-bg-secondary: #f5f5f5;
    --plugin-bg-header: #e9ecef;
    --plugin-bg-hover: #eeeeee;
    --plugin-bg-active: #e0e0e0;
    
    --plugin-text: #1a1a1a;
    --plugin-text-primary: #212529;
    --plugin-text-secondary: #424242;
    --plugin-text-muted: #666666;
    --plugin-heading: #000000;
    
    --plugin-accent: #1976d2;
    --plugin-accent-light: #42a5f5;
    --plugin-accent-dark: #1565c0;
    
    --plugin-border: #e0e0e0;
    --plugin-border-light: #f0f0f0;
    --plugin-border-subtle: rgba(0, 0, 0, 0.1);
    --plugin-border-focus: #1976d2;
    
    --plugin-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --plugin-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    --plugin-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --plugin-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* Blue Theme */
[data-theme="blue"] {
    --plugin-bg: #1a253a;
    --plugin-bg-secondary: #243b55;
    --plugin-bg-hover: #2a4a6a;
    --plugin-accent: #2196f3;
    --plugin-accent-light: #64b5f6;
    --plugin-border: #3a5a8a;
}

/* Green Theme */
[data-theme="green"] {
    --plugin-bg: #1a2e1a;
    --plugin-bg-secondary: #2a4a2a;
    --plugin-bg-hover: #3a5a3a;
    --plugin-accent: #4caf50;
    --plugin-accent-light: #81c784;
    --plugin-border: #4a6a4a;
}

/* Purple Theme */
[data-theme="purple"] {
    --plugin-bg: #2a1a3a;
    --plugin-bg-secondary: #3a2a5a;
    --plugin-bg-hover: #4a3a6a;
    --plugin-accent: #9c27b0;
    --plugin-accent-light: #ba68c8;
    --plugin-border: #5a4a7a;
}

/* Orange Theme */
[data-theme="orange"] {
    --plugin-bg: #2c1e14;
    --plugin-bg-secondary: #3c2e24;
    --plugin-bg-hover: #4c3e34;
    --plugin-accent: #ff9800;
    --plugin-accent-light: #ffb74d;
    --plugin-border: #5d4e44;
}

/* Teal Theme */
[data-theme="teal"] {
    --plugin-bg: #1a2c28;
    --plugin-bg-secondary: #2a3c38;
    --plugin-bg-hover: #3a4c48;
    --plugin-accent: #00bcd4;
    --plugin-accent-light: #4dd0e1;
    --plugin-border: #4d6c68;
}


/* ========================================
   RESPONSIVE SCALING
   For Raspberry Pi displays
   ======================================== */

@media (max-width: 800px) {
    :root {
        --plugin-font-scale: 0.9;
        --plugin-padding: 12px;
        --plugin-gap: 6px;
    }
}

@media (max-width: 600px) {
    :root {
        --plugin-font-scale: 0.8;
        --plugin-padding: 8px;
        --plugin-gap: 4px;
    }
}


/* ========================================
   ACCESSIBILITY
   ======================================== */

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --plugin-text: #ffffff;
        --plugin-text-muted: #cccccc;
        --plugin-border: #ffffff;
        --plugin-border-light: #cccccc;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --plugin-transition-fast: 0ms;
        --plugin-transition: 0ms;
        --plugin-transition-slow: 0ms;
    }
}