/* Optiglass Design System Token Specifications (OKLCH Color Space & Light/Dark Theme Switching) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css');

/* Default Light Theme (OKLCH) */
:root, [data-theme="light"] {
  /* Brand Palette */
  --og-color-primary: oklch(0.35 0.15 260);
  --og-color-primary-hover: oklch(0.42 0.18 260);
  --og-color-accent: oklch(0.65 0.18 230);
  --og-color-accent-light: oklch(0.95 0.04 230);
  
  /* Status Colors */
  --og-color-success: oklch(0.58 0.18 150);
  --og-color-success-bg: oklch(0.96 0.04 150);
  --og-color-warning: oklch(0.65 0.18 75);
  --og-color-warning-bg: oklch(0.97 0.04 75);
  --og-color-danger: oklch(0.55 0.22 25);
  --og-color-danger-bg: oklch(0.96 0.04 25);
  --og-color-info: oklch(0.60 0.16 230);
  --og-color-info-bg: oklch(0.96 0.04 230);

  /* Surfaces & Backgrounds */
  --og-bg-main: oklch(0.98 0.005 250);
  --og-bg-surface: oklch(1.00 0 0);
  --og-bg-sidebar: oklch(0.18 0.04 260);
  --og-bg-hover: oklch(0.95 0.01 250);

  /* Text & Typography */
  --og-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --og-text-primary: oklch(0.18 0.03 260);
  --og-text-secondary: oklch(0.40 0.02 260);
  --og-text-muted: oklch(0.62 0.02 260);
  --og-text-on-primary: oklch(1.00 0 0);

  /* Borders, Shadows & Shimmer */
  --og-border-color: oklch(0.90 0.01 250);
  --og-border-radius-sm: 6px;
  --og-border-radius: 10px;
  --og-border-radius-lg: 16px;
  --og-shadow-card: 0 4px 6px -1px oklch(0 0 0 / 0.05), 0 2px 4px -2px oklch(0 0 0 / 0.05);
  --og-shadow-elevated: 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1);
  --og-shimmer-base: oklch(0.94 0.005 250);
  --og-shimmer-highlight: oklch(0.88 0.01 250);
}

/* Dark Theme Tokens (OKLCH) */
[data-theme="dark"] {
  /* Brand Palette */
  --og-color-primary: oklch(0.55 0.18 260);
  --og-color-primary-hover: oklch(0.62 0.20 260);
  --og-color-accent: oklch(0.72 0.18 230);
  --og-color-accent-light: oklch(0.28 0.08 230);
  
  /* Status Colors */
  --og-color-success: oklch(0.68 0.18 150);
  --og-color-success-bg: oklch(0.24 0.06 150);
  --og-color-warning: oklch(0.75 0.18 75);
  --og-color-warning-bg: oklch(0.26 0.06 75);
  --og-color-danger: oklch(0.68 0.22 25);
  --og-color-danger-bg: oklch(0.25 0.06 25);
  --og-color-info: oklch(0.70 0.16 230);
  --og-color-info-bg: oklch(0.24 0.06 230);

  /* Surfaces & Backgrounds */
  --og-bg-main: oklch(0.14 0.02 260);
  --og-bg-surface: oklch(0.20 0.03 260);
  --og-bg-sidebar: oklch(0.12 0.03 260);
  --og-bg-hover: oklch(0.26 0.03 260);

  /* Text & Typography */
  --og-text-primary: oklch(0.96 0.01 250);
  --og-text-secondary: oklch(0.78 0.02 250);
  --og-text-muted: oklch(0.55 0.02 250);
  --og-text-on-primary: oklch(1.00 0 0);

  /* Borders, Shadows & Shimmer */
  --og-border-color: oklch(0.28 0.03 260);
  --og-shadow-card: 0 4px 12px -1px oklch(0 0 0 / 0.35);
  --og-shadow-elevated: 0 10px 20px -3px oklch(0 0 0 / 0.5);
  --og-shimmer-base: oklch(0.22 0.02 260);
  --og-shimmer-highlight: oklch(0.30 0.03 260);
}

body {
  font-family: var(--og-font-family);
  background-color: var(--og-bg-main);
  color: var(--og-text-primary);
  margin: 0;
  padding: 0;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Shimmer Skeleton Screen Animations */
.shimmer-box {
  background: linear-gradient(90deg, var(--og-shimmer-base) 25%, var(--og-shimmer-highlight) 50%, var(--og-shimmer-base) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--og-border-radius-sm);
  display: inline-block;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Card & Surface Styling */
.og-card {
  background-color: var(--og-bg-surface);
  border: 1px solid var(--og-border-color);
  border-radius: var(--og-border-radius);
  box-shadow: var(--og-shadow-card);
  padding: 1.25rem;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Status Badges */
.og-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.og-badge-success { background: var(--og-color-success-bg); color: var(--og-color-success); }
.og-badge-warning { background: var(--og-color-warning-bg); color: var(--og-color-warning); }
.og-badge-danger { background: var(--og-color-danger-bg); color: var(--og-color-danger); }
.og-badge-info { background: var(--og-color-info-bg); color: var(--og-color-info); }