/*
 * ============================================
 * THEME SYSTEM VARIABLES
 * 3 Presets: Minimal, Balanced, High Contrast
 * User configurable primary/secondary colors
 * ============================================
 */

/* Base Color Definitions (User Configurable via HSL) */
:root {
    /* Primary Base Color (HSL components) - used when custom mode */
    --color-primary-h: 217;
    --color-primary-s: 91%;
    --color-primary-l: 60%;

    /* Secondary Base Color (HSL components) - used when custom mode */
    --color-secondary-h: 280;
    --color-secondary-s: 65%;
    --color-secondary-l: 60%;

    /* Configurable Opacity Values */
    --opacity-subtle: 0.15;
    --opacity-light: 0.25;
    --opacity-medium: 0.40;
    --opacity-heavy: 0.60;

    /* Default: HSL-computed primary shades (custom mode) */
    --color-primary: hsl(var(--color-primary-h) var(--color-primary-s) var(--color-primary-l));
    --color-primary-50: hsl(var(--color-primary-h) var(--color-primary-s) 95%);
    --color-primary-100: hsl(var(--color-primary-h) var(--color-primary-s) 90%);
    --color-primary-200: hsl(var(--color-primary-h) var(--color-primary-s) 80%);
    --color-primary-300: hsl(var(--color-primary-h) var(--color-primary-s) 70%);
    --color-primary-400: hsl(var(--color-primary-h) var(--color-primary-s) 60%);
    --color-primary-500: hsl(var(--color-primary-h) var(--color-primary-s) 50%);
    --color-primary-600: hsl(var(--color-primary-h) var(--color-primary-s) 40%);
    --color-primary-700: hsl(var(--color-primary-h) var(--color-primary-s) 30%);
    --color-primary-800: hsl(var(--color-primary-h) var(--color-primary-s) 20%);
    --color-primary-900: hsl(var(--color-primary-h) var(--color-primary-s) 10%);

    /* Default: HSL-computed secondary shades (custom mode) */
    --color-secondary: hsl(var(--color-secondary-h) var(--color-secondary-s) var(--color-secondary-l));
    --color-secondary-50: hsl(var(--color-secondary-h) var(--color-secondary-s) 95%);
    --color-secondary-100: hsl(var(--color-secondary-h) var(--color-secondary-s) 90%);
    --color-secondary-200: hsl(var(--color-secondary-h) var(--color-secondary-s) 80%);
    --color-secondary-300: hsl(var(--color-secondary-h) var(--color-secondary-s) 70%);
    --color-secondary-400: hsl(var(--color-secondary-h) var(--color-secondary-s) 60%);
    --color-secondary-500: hsl(var(--color-secondary-h) var(--color-secondary-s) 50%);
    --color-secondary-600: hsl(var(--color-secondary-h) var(--color-secondary-s) 40%);
    --color-secondary-700: hsl(var(--color-secondary-h) var(--color-secondary-s) 30%);
    --color-secondary-800: hsl(var(--color-secondary-h) var(--color-secondary-s) 20%);
    --color-secondary-900: hsl(var(--color-secondary-h) var(--color-secondary-s) 10%);
}

/* ============================================
   PRESET 1: MINIMAL (Default)
   Pure grey surfaces, primary used sparingly
   ============================================ */
:root,
[data-theme="minimal"] {
    /* Surfaces - Pure grey, no color tint */
    --color-background: hsl(0 0% 9%);
    --color-surface: hsl(0 0% 13%);
    --color-surface-alt: hsl(0 0% 16%);
    --color-surface-hover: hsl(0 0% 19%);

    /* Text */
    --color-foreground: hsl(0 0% 98%);
    --color-subtle: hsl(0 0% 75%);
    --color-muted: hsl(0 0% 55%);
    --color-accent: var(--color-secondary-400);

    /* Borders & Dividers - Pure grey */
    --color-line: hsl(0 0% 25%);
    --color-line-hover: hsl(0 0% 35%);
    --color-ring: var(--color-primary-500);
    --color-divider: hsl(0 0% 20%);

    /* Actions */
    --color-action-primary: var(--color-primary);
    --color-action-primary-hover: var(--color-primary-400);
    --color-action-secondary: hsl(0 0% 25%);
    --color-action-secondary-hover: hsl(0 0% 35%);
    --color-action-disabled: hsl(0 0% 20%);

    /* Inputs */
    --color-input-bg: hsl(0 0% 9%);
    --color-input-border: hsl(0 0% 25%);
    --color-input-border-hover: hsl(0 0% 35%);
    --color-input-border-focus: var(--color-primary-500);
    --color-input-placeholder: hsl(0 0% 45%);

    /* Table */
    --color-table-header: hsl(0 0% 17%);
    --color-table-row-alt: hsl(0 0% 11%);
    --color-table-row-hover: hsl(0 0% 16%);

    /* Status Colors */
    --color-success: hsl(142 71% 45%);
    --color-warning: hsl(38 92% 50%);
    --color-error: hsl(0 84% 60%);
    --color-info: hsl(199 89% 48%);
}

/* Minimal-only: Force grey secondary colors for monochrome look */
[data-theme="minimal"] {
    --color-secondary: hsl(0 0% 60%);
    --color-secondary-50: hsl(0 0% 95%);
    --color-secondary-100: hsl(0 0% 90%);
    --color-secondary-200: hsl(0 0% 80%);
    --color-secondary-300: hsl(0 0% 70%);
    --color-secondary-400: hsl(0 0% 60%);
    --color-secondary-500: hsl(0 0% 50%);
    --color-secondary-600: hsl(0 0% 40%);
    --color-secondary-700: hsl(0 0% 30%);
    --color-secondary-800: hsl(0 0% 20%);
    --color-secondary-900: hsl(0 0% 10%);
    --color-accent: hsl(0 0% 60%);
    /* Solid title color for minimal */
    --color-title-gradient-start: var(--color-foreground);
    --color-title-gradient-end: var(--color-foreground);
}

/* ============================================
   PRESET 2: BALANCED
   Liberal primary color, secondary for accents
   ============================================ */
[data-theme="balanced"] {
    /* Surfaces - Tinted toward primary */
    --color-background: hsl(var(--color-primary-h) 20% 10%);
    --color-surface: hsl(var(--color-primary-h) 18% 14%);
    --color-surface-alt: hsl(var(--color-primary-h) 16% 10%);
    --color-surface-hover: hsl(var(--color-primary-h) 14% 21%);

    /* Text */
    --color-foreground: hsl(0 0% 98%);
    --color-subtle: hsl(var(--color-primary-h) 15% 75%);
    --color-muted: hsl(var(--color-primary-h) 10% 55%);
    --color-accent: var(--color-secondary-400);

    /* Borders & Dividers - Primary influenced */
    --color-line: hsl(var(--color-primary-h) 20% 25%);
    --color-line-hover: hsl(var(--color-primary-h) 25% 35%);
    --color-ring: var(--color-secondary-400);
    --color-divider: hsl(var(--color-primary-h) 15% 20%);

    /* Actions - Primary and Secondary colors */
    --color-action-primary: var(--color-primary);
    --color-action-primary-hover: var(--color-primary-400);
    --color-action-secondary: var(--color-secondary-700);
    --color-action-secondary-hover: var(--color-secondary-600);
    --color-action-disabled: hsl(var(--color-primary-h) 10% 20%);

    /* Inputs - Secondary focus accent */
    --color-input-bg: hsl(var(--color-primary-h) 20% 10%);
    --color-input-border: hsl(var(--color-primary-h) 20% 25%);
    --color-input-border-hover: hsl(var(--color-primary-h) 25% 32%);
    --color-input-border-focus: var(--color-secondary-400);
    --color-input-placeholder: hsl(var(--color-primary-h) 10% 45%);

    /* Table - Primary header, secondary accents */
    --color-table-header: hsl(var(--color-primary-h) 30% 22%);
    --color-table-row-alt: hsl(var(--color-primary-h) 18% 12%);
    --color-table-row-hover: hsl(var(--color-primary-h) 22% 18%);

    /* Status Colors */
    --color-success: hsl(142 71% 45%);
    --color-warning: hsl(38 92% 50%);
    --color-error: hsl(0 84% 60%);
    --color-info: hsl(199 89% 48%);

    /* Gradient title for balanced */
    --color-title-gradient-start: var(--color-primary);
    --color-title-gradient-end: var(--color-secondary);
}

/* ============================================
   PRESET 3: HIGH CONTRAST
   Bold primary borders, unified surface,
   white text, secondary for emphasis
   ============================================ */
[data-theme="high-contrast"] {
    /* Surfaces - Unified single dark color */
    --color-background: hsl(0 0% 8%);
    --color-surface: hsl(0 0% 8%);
    --color-surface-alt: hsl(0 0% 8%);
    --color-surface-hover: hsl(0 0% 12%);

    /* Text - High contrast white */
    --color-foreground: hsl(0 0% 100%);
    --color-subtle: hsl(0 0% 92%);
    --color-muted: hsl(0 0% 70%);
    --color-accent: var(--color-secondary-300);

    /* Borders & Dividers - Primary colored */
    --color-line: var(--color-primary-500);
    --color-line-hover: var(--color-primary-400);
    --color-ring: var(--color-secondary-400);
    --color-divider: var(--color-primary-600);

    /* Actions - Primary and Secondary colors */
    --color-action-primary: var(--color-primary);
    --color-action-primary-hover: var(--color-primary-400);
    --color-action-secondary: var(--color-secondary);
    --color-action-secondary-hover: var(--color-secondary-400);
    --color-action-disabled: hsl(0 0% 18%);

    /* Inputs - Bold primary borders, secondary focus */
    --color-input-bg: hsl(0 0% 8%);
    --color-input-border: var(--color-primary-500);
    --color-input-border-hover: var(--color-primary-400);
    --color-input-border-focus: var(--color-secondary-400);
    --color-input-placeholder: hsl(0 0% 50%);

    /* Table - Primary headers */
    --color-table-header: var(--color-primary-700);
    --color-table-row-alt: hsl(0 0% 8%);
    --color-table-row-hover: hsl(0 0% 12%);

    /* Status Colors - Brighter for contrast */
    --color-success: hsl(142 76% 50%);
    --color-warning: hsl(38 95% 55%);
    --color-error: hsl(0 90% 65%);
    --color-info: hsl(199 92% 55%);

    /* Solid title color for high contrast */
    --color-title-gradient-start: var(--color-foreground);
    --color-title-gradient-end: var(--color-foreground);
}

/* Gradient Title Text - Default behavior */
/* Gradient Title Text - Uses variables defined per-preset */
.text-gradient-title {
    background: linear-gradient(to right, var(--color-title-gradient-start), var(--color-title-gradient-end));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* ============================================
   TAILWIND v4 THEME INTEGRATION
   Map CSS variables to Tailwind theme
   ============================================ */
@theme {
    /* Opacity values */
    --opacity-subtle: var(--opacity-subtle);
    --opacity-light: var(--opacity-light);
    --opacity-medium: var(--opacity-medium);
    --opacity-heavy: var(--opacity-heavy);

    /* Primary color with shades */
    --color-primary: var(--color-primary);
    --color-primary-50: var(--color-primary-50);
    --color-primary-100: var(--color-primary-100);
    --color-primary-200: var(--color-primary-200);
    --color-primary-300: var(--color-primary-300);
    --color-primary-400: var(--color-primary-400);
    --color-primary-500: var(--color-primary-500);
    --color-primary-600: var(--color-primary-600);
    --color-primary-700: var(--color-primary-700);
    --color-primary-800: var(--color-primary-800);
    --color-primary-900: var(--color-primary-900);

    /* Secondary color with shades */
    --color-secondary: var(--color-secondary);
    --color-secondary-50: var(--color-secondary-50);
    --color-secondary-100: var(--color-secondary-100);
    --color-secondary-200: var(--color-secondary-200);
    --color-secondary-300: var(--color-secondary-300);
    --color-secondary-400: var(--color-secondary-400);
    --color-secondary-500: var(--color-secondary-500);
    --color-secondary-600: var(--color-secondary-600);
    --color-secondary-700: var(--color-secondary-700);
    --color-secondary-800: var(--color-secondary-800);
    --color-secondary-900: var(--color-secondary-900);

    /* Semantic surfaces */
    --color-background: var(--color-background);
    --color-surface: var(--color-surface);
    --color-surface-alt: var(--color-surface-alt);
    --color-surface-hover: var(--color-surface-hover);

    /* Semantic text */
    --color-foreground: var(--color-foreground);
    --color-subtle: var(--color-subtle);
    --color-muted: var(--color-muted);
    --color-accent: var(--color-accent);

    /* Semantic borders */
    --color-line: var(--color-line);
    --color-line-hover: var(--color-line-hover);
    --color-ring: var(--color-ring);
    --color-divider: var(--color-divider);

    /* Action colors */
    --color-action-primary: var(--color-action-primary);
    --color-action-primary-hover: var(--color-action-primary-hover);
    --color-action-secondary: var(--color-action-secondary);
    --color-action-secondary-hover: var(--color-action-secondary-hover);
    --color-action-disabled: var(--color-action-disabled);

    /* Input colors */
    --color-input-bg: var(--color-input-bg);
    --color-input-border: var(--color-input-border);
    --color-input-border-hover: var(--color-input-border-hover);
    --color-input-border-focus: var(--color-input-border-focus);
    --color-input-placeholder: var(--color-input-placeholder);

    /* Table colors */
    --color-table-header: var(--color-table-header);
    --color-table-row-alt: var(--color-table-row-alt);
    --color-table-row-hover: var(--color-table-row-hover);

    /* Status colors */
    --color-success: var(--color-success);
    --color-warning: var(--color-warning);
    --color-error: var(--color-error);
    --color-info: var(--color-info);
}