/* Diagraff Color Palette - "Diagraff'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 */
  --link: var(--accent);        /* Hyperlinks - brand cyan, never stock blue */
  --link-hover: #67E8F9;        /* Brighter cyan on 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: #A3B0C2;    /* Muted slate — bumped to clear WCAG AA on dark surfaces */
  --text-tertiary: #8B98AD;     /* Dimmer text — was #64748B (~3:1, failed AA) */
  --text-on-primary: #FFFFFF;

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

  /* Diagram preview backdrop follows the side-aware surface color.
     Export backgrounds are owned by the theme registry (themes.js exportBg),
     not CSS, so per-theme export colors stay in one place. */
  --preview-bg: var(--bg-surface);

  /* Code editor surface — a slate "well" a step darker than --bg-surface so
     code reads as its own layer (was a hardcoded white slab in dark mode). */
  --bg-code: var(--gray-900);
  --text-code: var(--gray-200);
  --bg-code-disabled: var(--gray-950);
  --text-code-disabled: var(--gray-500);

  /* 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;
  --link: var(--accent);        /* Hyperlinks - softened cyan */
  --link-hover: var(--accent-dark);
  --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 */

  /* Code editor surface (light: the original near-white values) */
  --bg-code: #F9FAFB;
  --text-code: #1F2937;
  --bg-code-disabled: #F3F4F6;
  --text-code-disabled: #9CA3AF;

  /* 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);
}