/* TritonChart Color Palette - "Triton's Domain" */
/* Dark theme is primary; light theme available via body.light-mode */

:root {
  /* Primary Colors - Deep Ocean Teal */
  --primary: #0D9488;           /* Deep teal with green undertone */
  --primary-dark: #0F766E;      /* Darker teal - hover states */
  --primary-light: #14B8A6;     /* Brighter teal - accents */
  --primary-glow: #22D3EE;      /* Cyan bioluminescence - highlights */

  /* Accent Colors */
  --accent: #22D3EE;            /* Cyan - links and highlights */
  --accent-dark: #06B6D4;       /* Darker cyan - hover */
  --danger: #F87171;            /* Soft red - danger actions */
  --danger-dark: #EF4444;       /* Darker red - hover */
  --warning: #FBBF24;           /* Amber - warnings */
  --success: #34D399;           /* Emerald - success states */

  /* Dark Theme Neutrals (Primary) */
  --gray-50: #F8FAFC;           /* Lightest - for light mode */
  --gray-100: #F1F5F9;          /* Very light */
  --gray-200: #E2E8F0;          /* Light borders */
  --gray-300: #CBD5E1;          /* Medium-light */
  --gray-400: #94A3B8;          /* Medium - placeholders */
  --gray-500: #64748B;          /* Dark-medium - secondary text */
  --gray-600: #475569;          /* Dark slate */
  --gray-700: #334155;          /* Darker slate */
  --gray-800: #1E293B;          /* Surface color */
  --gray-900: #0F172A;          /* Near black */
  --gray-950: #0A1628;          /* Deepest abyss */

  /* Dark Theme Semantic Colors (Default) */
  --bg-page: #0A1628;           /* Deep ocean abyss */
  --bg-surface: #1E293B;        /* Slate surface */
  --bg-hover: #334155;          /* Hover state */
  --bg-selected: var(--primary);
  --bg-selected-hover: var(--primary-dark);

  --text-primary: #F1F5F9;      /* Soft white */
  --text-secondary: #94A3B8;    /* Muted slate */
  --text-tertiary: #64748B;     /* Dimmer text */
  --text-on-primary: #FFFFFF;

  --border-light: #334155;      /* Subtle borders */
  --border-medium: #475569;     /* Medium borders */
  --border-dark: #64748B;       /* Strong borders */

  /* Diagram Preview Background */
  --preview-bg: #F8FAFC;        /* Soft blue-white for preview */
  --export-bg: #FFFFFF;         /* Pure white for exports */

  /* Mermaid Theme Backgrounds (for export) */
  --mermaid-default-bg: #FFFFFF;
  --mermaid-dark-bg: #1E293B;
  --mermaid-forest-bg: #0F766E;
  --mermaid-neutral-bg: #F1F5F9;

  /* Legacy mappings */
  --seafoam-green: var(--primary);
  --dark-blue: var(--gray-900);
  --black: var(--gray-950);
  --pop-of-color: var(--accent);
  --light-grey: var(--gray-800);
  --white: var(--text-primary);
}

/* Light Mode Theme (opt-in) */
body.light-mode {
  /* Primary Colors - slightly softened for white backgrounds */
  --primary: #1A9088;
  --primary-dark: #167A72;
  --primary-light: #2DB5A4;
  --primary-glow: #4AC8DA;

  /* Accent Colors - muted for light mode comfort */
  --accent: #2891A8;            /* Softer cyan for light bg */
  --accent-dark: #1E7A8D;
  --danger: #D65D5D;            /* Warm soft red */
  --danger-dark: #C04848;
  --warning: #D9962E;           /* Warm amber */
  --success: #2FA878;           /* Soft emerald */

  /* Light Semantic Colors */
  --bg-page: #F8FAFC;           /* Soft blue-white */
  --bg-surface: #FFFFFF;        /* Pure white surfaces */
  --bg-hover: #F1F5F9;          /* Light hover */
  --bg-selected: var(--primary);
  --bg-selected-hover: var(--primary-dark);

  --text-primary: #0F172A;      /* Near black text */
  --text-secondary: #475569;    /* Slate text */
  --text-tertiary: #64748B;     /* Muted text */
  --text-on-primary: #FFFFFF;

  --border-light: #E2E8F0;      /* Light borders */
  --border-medium: #CBD5E1;     /* Medium borders */
  --border-dark: #94A3B8;       /* Strong borders */

  /* Legacy mappings for light mode */
  --light-grey: var(--gray-100);
  --white: #FFFFFF;
}

/* Glow effects for interactive elements */
.glow-primary {
  box-shadow: 0 0 20px rgba(13, 148, 136, 0.3);
}

.glow-accent {
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
}