/* ============================================
   THEME VARIABLES - CSS Custom Properties
   ใช้สำหรับตั้งค่าธีมสีทั้งหมดในระบบ
   ============================================ */

:root {
    /* Primary Colors */
    --primary: #00ff00;
    --primary-foreground: #0a0a0a;
    
    /* Sidebar Colors */
    --sidebar-primary: #00d966;
    --sidebar-primary-foreground: #ffffff;
    
    /* Chart Colors */
    --chart-1: #00ff00;
    --chart-2: #00d966;
    --chart-3: #00cc00;
    --chart-4: #009900;
    --chart-5: #006600;
    
    /* Border Radius */
    --radius: 0.65rem;
    
    /* Background & Foreground */
    --background: #0a0a0a;
    --foreground: #ffffff;
    
    /* Card Colors */
    --card: #1a1a1a;
    --card-foreground: #ffffff;
    
    /* Popover Colors */
    --popover: #1a1a1a;
    --popover-foreground: #ffffff;
    
    /* Secondary Colors */
    --secondary: #00ffff;
    --secondary-foreground: #0a0a0a;
    
    /* Muted Colors */
    --muted: #333333;
    --muted-foreground: #999999;
    
    /* Accent Colors */
    --accent: #00ff00;
    --accent-foreground: #0a0a0a;
    
    /* Destructive Colors */
    --destructive: #ff4444;
    
    /* Screen Reader Only - for SEO H1 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Lazy Loading Styles */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

iframe[loading="lazy"],
iframe[data-src] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

iframe[loading="lazy"].loaded,
iframe[data-src].loaded {
    opacity: 1;
}

/* Lazy loaded sections - can be styled for loading state */
[data-lazy="section"] {
    /* Optional: Add loading indicator styles */
}

[data-lazy="section"].loaded {
    /* Optional: Add loaded state styles */
}
    --destructive-foreground: #ffffff;
    
    /* Border & Input */
    --border: #333333;
    --input: #1a1a1a;
    --ring: #00ff00;
    
    /* Sidebar Specific */
    --sidebar: #0a0a0a;
    --sidebar-foreground: #ffffff;
    --sidebar-accent: #00ff00;
    --sidebar-accent-foreground: #0a0a0a;
    --sidebar-border: #333333;
    --sidebar-ring: #00ff00;
}

/* ============================================
   Tailwind CSS Color Mapping
   สำหรับใช้กับ Tailwind classes
   ============================================ */

/* Utility Classes สำหรับใช้กับ Theme Variables */
.text-primary {
    color: var(--primary);
}

.text-primary-foreground {
    color: var(--primary-foreground);
}

.bg-primary {
    background-color: var(--primary);
}

.bg-primary-foreground {
    background-color: var(--primary-foreground);
}

.border-primary {
    border-color: var(--primary);
}

.hover\:text-primary:hover {
    color: var(--primary);
}

.hover\:bg-primary:hover {
    background-color: var(--primary);
}

.hover\:border-primary:hover {
    border-color: var(--primary);
}

/* Secondary Colors */
.text-secondary {
    color: var(--secondary);
}

.bg-secondary {
    background-color: var(--secondary);
}

.border-secondary {
    border-color: var(--secondary);
}

/* Accent Colors */
.text-accent {
    color: var(--accent);
}

.bg-accent {
    background-color: var(--accent);
}

.border-accent {
    border-color: var(--accent);
}

/* Background & Foreground */
.bg-background {
    background-color: var(--background);
}

.text-foreground {
    color: var(--foreground);
}

/* Card Colors */
.bg-card {
    background-color: var(--card);
}

.text-card-foreground {
    color: var(--card-foreground);
}

/* Muted Colors */
.bg-muted {
    background-color: var(--muted);
}

.text-muted-foreground {
    color: var(--muted-foreground);
}

/* Destructive Colors */
.bg-destructive {
    background-color: var(--destructive);
}

.text-destructive-foreground {
    color: var(--destructive-foreground);
}

/* Border & Input */
.border-border {
    border-color: var(--border);
}

.bg-input {
    background-color: var(--input);
}

.ring-ring {
    --tw-ring-color: var(--ring);
}

/* Sidebar Colors */
.bg-sidebar {
    background-color: var(--sidebar);
}

.text-sidebar-foreground {
    color: var(--sidebar-foreground);
}

.bg-sidebar-primary {
    background-color: var(--sidebar-primary);
}

.text-sidebar-primary-foreground {
    color: var(--sidebar-primary-foreground);
}

.bg-sidebar-accent {
    background-color: var(--sidebar-accent);
}

.text-sidebar-accent-foreground {
    color: var(--sidebar-accent-foreground);
}

.border-sidebar-border {
    border-color: var(--sidebar-border);
}

/* Gradient Utilities */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--chart-2) 100%);
}

.bg-gradient-primary-reverse {
    background: linear-gradient(135deg, var(--chart-2) 0%, var(--primary) 100%);
}

/* Chart Colors */
.bg-chart-1 {
    background-color: var(--chart-1);
}

.bg-chart-2 {
    background-color: var(--chart-2);
}

.bg-chart-3 {
    background-color: var(--chart-3);
}

.bg-chart-4 {
    background-color: var(--chart-4);
}

.bg-chart-5 {
    background-color: var(--chart-5);
}

/* Legacy Support - red-primary และ red-light */
.text-red-primary {
    color: var(--primary);
}

.bg-red-primary {
    background-color: var(--primary);
}

.border-red-primary {
    border-color: var(--primary);
}

.hover\:text-red-primary:hover {
    color: var(--primary);
}

.hover\:bg-red-primary:hover {
    background-color: var(--primary);
}

.hover\:border-red-primary:hover {
    border-color: var(--primary);
}

.bg-red-light {
    background-color: var(--chart-2);
}

.hover\:bg-red-light:hover {
    background-color: var(--chart-2);
}

/* Gradient Legacy Support */
.from-red-primary {
    --tw-gradient-from: var(--primary);
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-red-light {
    --tw-gradient-to: var(--chart-2);
}

.from-red-light {
    --tw-gradient-from: var(--chart-2);
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-red-primary {
    --tw-gradient-to: var(--primary);
}

/* Hover Scale - ไม่มี shadow */
.hover-scale:hover {
    /* Shadow removed per user request */
}