@import 'tailwindcss';

/* Use data-mode attribute strategy for dark mode (Skeleton v4 recommended) */
@custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *));

@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton-svelte';

/* Fira Code */
@font-face {
  font-family: 'Fira Code';
  src: url('/fonts/fira-code/FiraCode-Regular.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'Fira Code';
  src: url('/fonts/fira-code/FiraCode-Medium.woff2') format('woff2');
  font-weight: 500;
}

/* Source Code Pro */
@font-face {
  font-family: 'Source Code Pro';
  src: url('/fonts/source-code-pro/SourceCodePro-Regular.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'Source Code Pro';
  src: url('/fonts/source-code-pro/SourceCodePro-Medium.woff2') format('woff2');
  font-weight: 500;
}

/* JGS Fonts */
@font-face {
  font-family: 'JGS5';
  src: url('/fonts/jgs/jgs5.woff2') format('woff2');
}
@font-face {
  font-family: 'JGS7';
  src: url('/fonts/jgs/jgs7.woff2') format('woff2');
}
@font-face {
  font-family: 'JGS9';
  src: url('/fonts/jgs/jgs9.woff2') format('woff2');
}
@font-face {
  font-family: 'JGS';
  src: url('/fonts/jgs/jgs_Font.woff2') format('woff2');
}
@import '@skeletonlabs/skeleton/themes/cerberus';
@import '@skeletonlabs/skeleton/themes/catppuccin';
@import '@skeletonlabs/skeleton/themes/concord';
@import '@skeletonlabs/skeleton/themes/crimson';
@import '@skeletonlabs/skeleton/themes/fennec';
@import '@skeletonlabs/skeleton/themes/hamlindigo';
@import '@skeletonlabs/skeleton/themes/legacy';
@import '@skeletonlabs/skeleton/themes/mint';
@import '@skeletonlabs/skeleton/themes/modern';
@import '@skeletonlabs/skeleton/themes/mona';
@import '@skeletonlabs/skeleton/themes/nosh';
@import '@skeletonlabs/skeleton/themes/nouveau';
@import '@skeletonlabs/skeleton/themes/pine';
@import '@skeletonlabs/skeleton/themes/reign';
@import '@skeletonlabs/skeleton/themes/rocket';
@import '@skeletonlabs/skeleton/themes/rose';
@import '@skeletonlabs/skeleton/themes/sahara';
@import '@skeletonlabs/skeleton/themes/seafoam';
@import '@skeletonlabs/skeleton/themes/terminus';
@import '@skeletonlabs/skeleton/themes/vintage';
@import '@skeletonlabs/skeleton/themes/vox';
@import '@skeletonlabs/skeleton/themes/wintry';

/* Custom Glass/Transparent Theme */
[data-theme='glass'] {
  /* Text colors - white for readability on transparent backgrounds */
  --color-text-base: oklch(1 0 0);
  --color-text-on-primary: oklch(1 0 0);
  --color-text-on-surface: oklch(0.95 0 0);

  /* Primary colors - vivid purple with transparency */
  --color-primary-50: oklch(0.95 0.05 280 / 0.3);
  --color-primary-100: oklch(0.90 0.08 280 / 0.4);
  --color-primary-200: oklch(0.85 0.10 280 / 0.5);
  --color-primary-300: oklch(0.80 0.12 280 / 0.6);
  --color-primary-400: oklch(0.75 0.15 280 / 0.7);
  --color-primary-500: oklch(0.65 0.20 280 / 0.8);
  --color-primary-600: oklch(0.60 0.22 280 / 0.85);
  --color-primary-700: oklch(0.55 0.20 280 / 0.9);
  --color-primary-800: oklch(0.50 0.18 280 / 0.9);
  --color-primary-900: oklch(0.45 0.15 280 / 0.95);
  --color-primary-950: oklch(0.40 0.12 280 / 0.95);

  /* Surface colors - very transparent with slight dark tint */
  --color-surface-50: oklch(0.95 0 0 / 0.05);
  --color-surface-100: oklch(0.90 0 0 / 0.1);
  --color-surface-200: oklch(0.80 0 0 / 0.15);
  --color-surface-300: oklch(0.70 0 0 / 0.2);
  --color-surface-400: oklch(0.60 0 0 / 0.25);
  --color-surface-500: oklch(0.50 0 0 / 0.3);
  --color-surface-600: oklch(0.40 0 0 / 0.35);
  --color-surface-700: oklch(0.35 0 0 / 0.4);
  --color-surface-800: oklch(0.30 0 0 / 0.45);
  --color-surface-900: oklch(0.25 0 0 / 0.5);
  --color-surface-950: oklch(0.20 0 0 / 0.55);

  /* Success colors - green with transparency */
  --color-success-50: oklch(0.95 0.05 150 / 0.3);
  --color-success-100: oklch(0.90 0.08 150 / 0.4);
  --color-success-200: oklch(0.85 0.10 150 / 0.5);
  --color-success-300: oklch(0.80 0.12 150 / 0.6);
  --color-success-400: oklch(0.75 0.14 150 / 0.7);
  --color-success-500: oklch(0.65 0.16 150 / 0.8);
  --color-success-600: oklch(0.60 0.16 150 / 0.85);
  --color-success-700: oklch(0.55 0.15 150 / 0.9);
  --color-success-800: oklch(0.50 0.14 150 / 0.9);
  --color-success-900: oklch(0.45 0.12 150 / 0.95);
  --color-success-950: oklch(0.40 0.10 150 / 0.95);

  /* Warning colors - orange with transparency */
  --color-warning-50: oklch(0.95 0.05 60 / 0.3);
  --color-warning-100: oklch(0.90 0.08 60 / 0.4);
  --color-warning-200: oklch(0.85 0.10 60 / 0.5);
  --color-warning-300: oklch(0.80 0.12 60 / 0.6);
  --color-warning-400: oklch(0.75 0.14 60 / 0.7);
  --color-warning-500: oklch(0.70 0.16 60 / 0.8);
  --color-warning-600: oklch(0.65 0.16 60 / 0.85);
  --color-warning-700: oklch(0.60 0.15 60 / 0.9);
  --color-warning-800: oklch(0.55 0.14 60 / 0.9);
  --color-warning-900: oklch(0.50 0.12 60 / 0.95);
  --color-warning-950: oklch(0.45 0.10 60 / 0.95);

  /* Error colors - red with transparency */
  --color-error-50: oklch(0.95 0.05 30 / 0.3);
  --color-error-100: oklch(0.90 0.08 30 / 0.4);
  --color-error-200: oklch(0.85 0.10 30 / 0.5);
  --color-error-300: oklch(0.80 0.12 30 / 0.6);
  --color-error-400: oklch(0.75 0.15 30 / 0.7);
  --color-error-500: oklch(0.65 0.20 30 / 0.8);
  --color-error-600: oklch(0.60 0.22 30 / 0.85);
  --color-error-700: oklch(0.55 0.20 30 / 0.9);
  --color-error-800: oklch(0.50 0.18 30 / 0.9);
  --color-error-900: oklch(0.45 0.15 30 / 0.95);
  --color-error-950: oklch(0.40 0.12 30 / 0.95);
}

/* Add glassmorphism blur effect to cards and surfaces */
[data-theme='glass'] .card,
[data-theme='glass'] [class*='bg-surface'] {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Force text to be fully opaque in glass theme */
[data-theme='glass'] {
  color: oklch(0.95 0 0);
}

/* Text shadow for all interface text - light */
[data-theme='glass'] * {
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Stronger text shadow for code editor - black box behind text */
[data-theme='glass'] .cm-content,
[data-theme='glass'] .cm-content * {
  text-shadow:
    -2px -2px 6px rgba(0, 0, 0, 1),
    2px -2px 6px rgba(0, 0, 0, 1),
    -2px 2px 6px rgba(0, 0, 0, 1),
    2px 2px 6px rgba(0, 0, 0, 1),
    0 0 10px rgba(0, 0, 0, 1),
    0 0 15px rgba(0, 0, 0, 0.9),
    0 2px 8px rgba(0, 0, 0, 1) !important;
}

[data-theme='glass'] .text-surface-900:not(.cm-content *),
[data-theme='glass'] .dark\:text-surface-50:not(.cm-content *) {
  color: oklch(0.95 0 0) !important;
}

[data-theme='glass'] .text-surface-600:not(.cm-content *),
[data-theme='glass'] .dark\:text-surface-400:not(.cm-content *) {
  color: oklch(0.8 0 0) !important;
}

[data-theme='glass'] .text-primary-400:not(.cm-content *) {
  color: oklch(0.75 0.15 280) !important;
}

[data-theme='glass'] .text-success-400:not(.cm-content *) {
  color: oklch(0.75 0.14 150) !important;
}

[data-theme='glass'] .text-error:not(.cm-content *) {
  color: oklch(0.75 0.15 30) !important;
}

/* Background canvas container for Hydra or other visuals */
#background-canvas-container {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

#background-canvas-container canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Make app container transparent to see background */
#app {
  position: relative;
  width: 100%;
  height: 100vh;
  background: transparent !important;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent !important;
}

/* Force all surfaces to be transparent when using glass theme */
[data-theme='glass'] .bg-surface-50,
[data-theme='glass'] .bg-surface-100,
[data-theme='glass'] .bg-surface-200,
[data-theme='glass'] .bg-surface-300,
[data-theme='glass'] .bg-surface-400,
[data-theme='glass'] .bg-surface-500,
[data-theme='glass'] .bg-surface-600,
[data-theme='glass'] .bg-surface-700,
[data-theme='glass'] .bg-surface-800,
[data-theme='glass'] .bg-surface-900,
[data-theme='glass'] .bg-surface-950,
[data-theme='glass'] .dark\:bg-surface-50,
[data-theme='glass'] .dark\:bg-surface-100,
[data-theme='glass'] .dark\:bg-surface-200,
[data-theme='glass'] .dark\:bg-surface-300,
[data-theme='glass'] .dark\:bg-surface-400,
[data-theme='glass'] .dark\:bg-surface-500,
[data-theme='glass'] .dark\:bg-surface-600,
[data-theme='glass'] .dark\:bg-surface-700,
[data-theme='glass'] .dark\:bg-surface-800,
[data-theme='glass'] .dark\:bg-surface-900,
[data-theme='glass'] .dark\:bg-surface-950 {
  background-color: transparent !important;
}

/* Make sure the main layout container is also transparent */
[data-theme='glass'] .h-screen {
  background-color: transparent !important;
}

[data-theme='glass'] * {
  background-color: transparent;
}

/* CodeMirror syntax highlighting preserved in glass theme */
[data-theme='glass'] .cm-editor {
  background-color: transparent !important;
}

[data-theme='glass'] .cm-scroller {
  background-color: transparent !important;
}

[data-theme='glass'] .cm-gutters {
  background-color: transparent !important;
}


/* Keep syntax colors vivid and preserve highlighting */
[data-theme='glass'] .cm-content * {
  background-color: transparent !important;
}