/**
 * Kollektiv COLOR SYSTEM
 *
 * This file defines the color system for the Query MCP UI.
 *
 * === COLOR SYSTEM RULES ===
 *
 * 1. VISUAL HIERARCHY
 *    - Background (--gray-1): Main app canvas, darkest layer
 *    - Surface (--gray-2): Cards, panels, containers on top of background
 *    - Surface-light (--gray-4): Hover states, active items, lightest layer
 *
 * 2. HOVER STATE RULES
 *    - Hover uses --surface-hover (same as surface-light)
 *    - Primary buttons: Hover uses --primary-hover (darker than primary)
 *    - Alpha/ghost elements: Hover uses more opaque version
 *
 * 3. BUTTON VARIANT USAGE
 *    - On Background:
 *      * Primary: Main actions
 *      * Secondary: Less important actions
 *      * Outline/Ghost: Tertiary actions
 *    - On Surface (cards, panels):
 *      * Primary: Main actions
 *      * Outline: Secondary actions (avoid secondary variant)
 *      * Ghost: Tertiary actions
 *
 * 4. COLOR RELATIONSHIPS
 *    - Primary colors have 3 states: default, hover (darker), active (darkest)
 *    - Alpha variants follow same pattern with increasing opacity
 *    - Border colors are typically 2-3 steps lighter than fill colors
 *
 * === COLOR DEFINITIONS ===
 */

@import "./colors/gray.css";
@import "./colors/accent.css";
@import "./colors/blue.css";
@import "./colors/green.css";
@import "./colors/red.css";
@import "./colors/orange.css";
@import "./colors/purple.css";
@import "./colors/pink.css";
@import "./colors/teal.css";
@import "@radix-ui/colors/black-alpha.css";

:root {
	/**
	 * CORE SEMANTIC COLORS
	 * These are the foundational colors that define our dark theme
	 * In Radix UI's dark theme, gray-1 is the darkest and gray-12 is the lightest
	 *
	 * Understanding the Radix Color Scale:
	 * - Steps 1-2: App and subtle backgrounds
	 * - Steps 3-5: Component backgrounds (normal, hover, active)
	 * - Steps 6-8: Borders (subtle, interactive, focus)
	 * - Steps 9-10: Solid backgrounds (normal, hover)
	 * - Steps 11-12: Text (low-contrast, high-contrast)
	 */

	/* === BASE COLORS === */

	/**
	 * STRUCTURAL COLORS
	 * These define the visual hierarchy of the application
	 * Follow the pattern: background → surface → surface-light
	 */
	--color-background: var(--gray-1); /* Darkest background (main canvas) */
	--color-foreground: var(--gray-12); /* Lightest text color */
	--color-overlay: var(--black-a8); /* Overlay for modals, dialogs */
	--color-surface: var(--gray-2); /* Cards, secondary buttons, panels */
	--color-surface-translucent: var(--gray-a2); /* Semi-transparent panels */
	--color-surface-light: var(--gray-4); /* Active state for items on surfaces */
	--color-surface-hover: var(--gray-4); /* Hover states, same as surface light */
	--color-surface-old: rgba(0, 0, 0, 0.25); /* DEPRECATED: Form inputs, interactive elements */
	--color-interactive: var(--color-surface-old); /* DEPRECATED: Interactive element backgrounds */
	--color-surface-hover-old: rgba(0, 0, 0, 0.15); /* DEPRECATED: Hovered UI element backgrounds */
	--color-border-hover: var(--gray-8); /* Hovered UI element borders (step 8) */

	/* === Shadcn/UI Mapping === */

	/**
	 * SHADCN BACKGROUND COLORS
	 * These map our structural colors to Shadcn's naming convention
	 */
	--background: var(--color-background); /* Main app background */
	--foreground: var(--color-foreground); /* Main text color */

	/* Card - Background color for card components */
	--card: var(--color-surface); /* Surface color for cards */
	--card-foreground: var(--foreground); /* Same as main text for consistency */

	/* Popover - Background color for popover components */
	--popover: var(--card); /* Same as card for consistency */
	--popover-foreground: var(--card-foreground); /* Same as card foreground */

	/**
	 * INTERACTIVE COLORS
	 * These colors are used for interactive elements like buttons and links
	 * Each has default, hover, and active states where appropriate
	 *
	 * Usage Examples:
	 * - Primary: Main action buttons, active navigation items
	 * - Secondary: Less prominent actions, alternative buttons
	 * - Muted: Background of form controls, subtle UI elements
	 * - Accent: Highlights, focus indicators, selected states
	 */

	/* Primary - Main action color (accent color) */
	--primary: var(--accent-9); /* Bright accent color for primary actions */
	--primary-hover: var(--accent-10); /* Darker accent color for hover states */
	--primary-active: var(--accent-11); /* Darkest accent color for active states */
	--primary-foreground: var(--gray-1); /* Dark background color for contrast */
	--primary-alpha: var(--accent-a2); /* Alpha transparent color for primary actions */
	--primary-alpha-hover: var(--accent-a3); /* Alpha transparent color for hover states */
	--primary-alpha-foreground: var(--accent-a11); /* Light accent text for contrast */
	--primary-border: var(--accent-6); /* Border color for primary actions */

	/* Secondary - Used for secondary actions */
	--secondary: var(--color-surface); /* Uses surface color for secondary buttons */
	--secondary-foreground: var(--gray-12); /* Light text for contrast */

	/* Muted - Used for less prominent UI elements */
	--muted: var(--gray-3); /* Slightly darker than secondary */
	--muted-foreground: var(--gray-10); /* Slightly dimmer than main text */

	/* Accent - Used for highlighting elements */
	--accent: var(--primary-alpha); /* Same as primary-alpha for consistency */
	--accent-border: var(--accent-6); /* Used for border colors */
	--accent-foreground: var(--primary-alpha-foreground); /* Light text for contrast */

	/**
	 * SEMANTIC COLORS
	 * These colors convey specific meanings
	 *
	 * Usage Examples:
	 * - Destructive: Delete buttons, error messages, critical alerts
	 * - Warning: Caution messages, pending states, attention-required notifications
	 * - Success: Confirmation messages, completed actions, positive feedback
	 * - Info: Informational messages, help text, neutral notifications
	 */

	/* Destructive - Used for destructive actions (Radix equivalent: red-9) */
	--destructive: var(--red-9); /* Red color for destructive actions */
	--destructive-accent: var(--red-a2); /* Alpha transparent color for destructive actions */
	--destructive-foreground: var(--gray-12); /* Standard white text */

	/* Warning - Used for warning messages and alerts */
	--warning: var(--orange-9);
	--warning-accent: var(--orange-a2);
	--warning-foreground: var(--gray-12);

	/* Success - Used for success messages and confirmations */
	--success: var(--green-9);
	--success-accent: var(--green-a2);
	--success-foreground: var(--gray-12);

	/* Info - Used for informational messages and UI elements */
	--info: var(--blue-9);
	--info-accent: var(--blue-a2);
	--info-foreground: var(--gray-12);

	/**
	 * UI ELEMENT COLORS
	 * These colors are used for specific UI elements
	 *
	 * Usage Examples:
	 * - Border: Table cells, input fields, cards, dividers
	 * - Input: Form control backgrounds, text inputs, textareas
	 * - Ring: Focus indicators, selection highlights
	 */

	/* Border - Used for borders (Radix equivalent: gray-6) */
	--border: var(--gray-6); /* Dark gray for borders */
	--accent-border: var(--accent-6); /* Primary color border to additional accent) */

	/* Input - Used for form input backgrounds (Radix equivalent: gray-3) */
	--input: var(--color-interactive); /* Remapped to interactive surface */

	/* Ring - Used for focus rings (Radix equivalent: accent-7) */
	--ring-primary: var(--accent-6);
	--ring: var(--accent-6); /* Medium gray for focus rings */

	/**
	 * CHART COLORS
	 * These colors are used for data visualizations
	 *
	 * Usage Examples:
	 * - Line charts, bar charts, pie charts
	 * - Data points, series colors, legends
	 * - Dashboard visualizations
	 */
	--chart-1: var(--purple-9); /* Purple */
	--chart-2: var(--teal-9); /* Teal */
	--chart-3: var(--green-9); /* Green */
	--chart-4: var(--pink-9); /* Pink */
	--chart-5: var(--orange-9); /* Orange */

	/**
	 * SIDEBAR COLORS
	 * These colors are specific to the sidebar component
	 *
	 * Usage Examples:
	 * - Navigation sidebar backgrounds
	 * - Sidebar item hover and active states
	 * - Sidebar section dividers
	 */
	--sidebar: var(--color-surface); /* Slightly darker than main background */
	--sidebar-foreground: var(--color-foreground); /* Same as main foreground */
	--sidebar-primary: var(--primary); /* Primary color for sidebar */
	--sidebar-primary-foreground: var(--primary-foreground); /* Dark text on sidebar primary */
	--sidebar-accent: var(--color-accent); /* Same as main accent */
	--sidebar-accent-foreground: var(--color-accent-foreground); /* Same as main accent foreground */
	--sidebar-border: var(--gray-6); /* Same as main border */
	--sidebar-ring: var(--gray-8); /* Slightly lighter than main ring */

	/**
	 * CUSTOM COLORS
	 * These colors are specifically exported
	 */
}

/**
 * TAILWIND MAPPING
 * This maps our shadcn variables to Tailwind CSS variables for use in components
 * The shadcn components use these color variables in their styling
 */
@theme inline {
	/* Custom colors */
	--color-overlay: var(--color-overlay);
	--color-accent: var(--color-accent);
	--color-accent-border: var(--primary-border);
	--color-accent-foreground: var(--color-accent-foreground);

	/* For interactive surfaces such inputs, buttons */
	--color-surface: var(--color-surface);
	--color-surface-hover: var(--color-surface-hover);
	--color-surface-hover-light: var(--color-surface-hover-light);
	--color-surface-old: var(--color-surface-old);
	--color-surface-hover-old: var(--color-surface-hover-old);
	--color-border-hover: var(--color-border-hover);

	/* Custom colors */
	/* Semantic colors */
	--color-success: var(--success);
	--color-success-foreground: var(--success-foreground);
	--color-success-accent: var(--success-accent);

	--color-info: var(--info);
	--color-info-foreground: var(--info-foreground);
	--color-info-accent: var(--info-accent);

	--color-warning: var(--warning);
	--color-warning-foreground: var(--warning-foreground);
	--color-warning-accent: var(--warning-accent);

	--color-destructive: var(--destructive);
	--color-destructive-foreground: var(--destructive-foreground);
	--color-destructive-accent: var(--destructive-accent);

	/* Shadcn to Tailwind mapping */
	--color-background: var(--background);
	--color-foreground: var(--foreground);
	--color-card: var(--card);
	--color-card-foreground: var(--card-foreground);
	--color-popover: var(--popover);
	--color-popover-foreground: var(--popover-foreground);
	--color-primary: var(--primary);
	--color-primary-foreground: var(--primary-foreground);
	--color-primary-hover: var(--primary-hover);
	--color-primary-active: var(--primary-active);
	--color-primary-border: var(--primary-border);
	--color-secondary: var(--secondary);
	--color-secondary-foreground: var(--secondary-foreground);
	--color-muted: var(--muted);
	--color-muted-foreground: var(--muted-foreground);

	--color-border: var(--border);
	--color-input: var(--input);
	--color-ring: var(--ring);

	/* Chart colors */
	--color-chart-1: var(--chart-1);
	--color-chart-2: var(--chart-2);
	--color-chart-3: var(--chart-3);
	--color-chart-4: var(--chart-4);
	--color-chart-5: var(--chart-5);

	/* Sidebar colors */
	--color-sidebar: var(--sidebar);
	--color-sidebar-foreground: var(--sidebar-foreground);
	--color-sidebar-primary: var(--sidebar-primary);
	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
	--color-sidebar-accent: var(--sidebar-accent);
	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
	--color-sidebar-border: var(--sidebar-border);
	--color-sidebar-ring: var(--sidebar-ring);
}
