/* ==========================================================
   themes.css — colour themes. Switch with <html data-theme="...">
   (the floating palette button does this and remembers the choice).
   Every component reads these variables, so adding a theme
   means adding one block here and one entry in assets/js/theme.js.
   ========================================================== */

/* 1. SterLab Blue — default, taken from the logo */
:root,
[data-theme="sterlab"] {
  --primary: #3768AD;
  --primary-dark: #244C88;
  --accent: #07BFFF;
  --accent-soft: #BDEBFF;
  --on-accent: #0B2447;
  --deep: #0B2447;
  --deep-2: #14366A;
  --warm: #FFB547;
  --tint: #F1F6FC;
  --tint-2: #E4EEF9;
}

/* 2. Ocean Teal */
[data-theme="teal"] {
  --primary: #0E7C86;
  --primary-dark: #0A5C64;
  --accent: #2EE6C5;
  --accent-soft: #B8F5EA;
  --on-accent: #062B30;
  --deep: #062B30;
  --deep-2: #0B4148;
  --warm: #FFB547;
  --tint: #EEF8F8;
  --tint-2: #DDF1F1;
}

/* 3. Emerald Lab */
[data-theme="emerald"] {
  --primary: #1E7F4F;
  --primary-dark: #145E3A;
  --accent: #7BE38F;
  --accent-soft: #D3F7DA;
  --on-accent: #0A2A1A;
  --deep: #0A2A1A;
  --deep-2: #12402A;
  --warm: #F4C84A;
  --tint: #F0F8F2;
  --tint-2: #E0F0E5;
}

/* 4. Royal Indigo */
[data-theme="indigo"] {
  --primary: #4B3FC9;
  --primary-dark: #372D9E;
  --accent: #A99BFF;
  --accent-soft: #E3DEFF;
  --on-accent: #17124A;
  --deep: #17124A;
  --deep-2: #251D6B;
  --warm: #FF9FC6;
  --tint: #F4F3FD;
  --tint-2: #E8E5FB;
}

/* 5. Crimson Pro */
[data-theme="crimson"] {
  --primary: #B3243A;
  --primary-dark: #8A1A2C;
  --accent: #FF8A7A;
  --accent-soft: #FFDAD4;
  --on-accent: #2B0A10;
  --deep: #2B0A10;
  --deep-2: #43121B;
  --warm: #FFC857;
  --tint: #FCF3F3;
  --tint-2: #F8E4E6;
}

/* 6. Graphite & Amber */
[data-theme="graphite"] {
  --primary: #2F3A4A;
  --primary-dark: #1F2733;
  --accent: #FFB020;
  --accent-soft: #FFE7B8;
  --on-accent: #1A1300;
  --deep: #141A22;
  --deep-2: #222B37;
  --warm: #FFB020;
  --tint: #F4F5F7;
  --tint-2: #E7EAEE;
}

/* Shared, theme-independent tokens */
:root {
  --ink: #16233A;
  --muted: #5B6A82;
  --line: #DCE4EF;
  --white: #FFFFFF;
  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --container: 1280px;
  --shadow-sm: 0 4px 14px -6px rgba(10, 25, 50, .18);
  --shadow: 0 24px 48px -24px rgba(10, 25, 50, .35);
  --ease: cubic-bezier(.2, .7, .2, 1);
}