/* ============================================================
   Stradegi — Theme palettes
   Every colour the site uses is defined here. main.css only ever
   references these variables, so a theme is a single block below.

   Colours are taken from the Stradegi Brand Identity Guidelines:

     PRIMARY    551C  #a3c7d2    7546C  #233746    539C  #141822
     SECONDARY  429C  #a2aaad    5405C  #4f758b    7463C #112136
     ACCENT     652C  #7d9bc1    7417C  #e7472c
                505C  #64242f    130C   #f2a900

   Accent slots
   ------------
   The rest of the CSS refers to four accent slots. The legacy names
   (--cyan, --violet, --lime, --pink) are kept as aliases so existing
   rules keep working, but new code should use --accent-1 … --accent-4.
   Each slot has a text-safe value, a brighter tint for gradients and
   glows, and an "r, g, b" triple for composing rgba() values.
   ============================================================ */

/* Structural tokens - identical in every theme. */
:root {
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 48px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --header-h: 76px;

  --font-display: 'Mulish', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Mulish', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------
   1. Brand Light  (default) — the guidelines' primary palette on
      a near-white ground.
   ------------------------------------------------------------ */
html,
html[data-theme='brand'] {
  color-scheme: light;

  --bg: #f5f8fa;
  --bg-soft: #ffffff;
  --bg-elev: #ffffff;

  --surface: rgba(255, 255, 255, 0.86);
  --surface-solid: #ffffff;
  --surface-raised: rgba(255, 255, 255, 0.88);
  --input-bg: #ffffff;

  --tint: rgba(79, 117, 139, 0.08);
  --tint-strong: rgba(79, 117, 139, 0.16);

  --text: #141822;
  --text-dim: #4a5561;
  --muted: #6f7a86;

  --line: rgba(20, 24, 34, 0.1);
  --line-strong: rgba(20, 24, 34, 0.18);

  --accent-1: #4f758b;  --accent-1-bright: #a3c7d2;  --accent-1-rgb: 79, 117, 139;
  --accent-2: #2f5a75;  --accent-2-bright: #7d9bc1;  --accent-2-rgb: 125, 155, 193;
  --accent-3: #233746;  --accent-3-bright: #8fb3c4;  --accent-3-rgb: 35, 55, 70;
  --accent-4: #64242f;  --accent-4-bright: #e7472c;  --accent-4-rgb: 100, 36, 47;

  --gradient-text: linear-gradient(100deg, #141822 2%, #4f758b 44%, #7d9bc1 78%, #2f5a75 100%);
  --gradient-avatar: linear-gradient(140deg, #7d9bc1, #4f758b 55%, #233746);

  --btn-from: #4f758b;
  --btn-to: #233746;
  --btn-text: #ffffff;
  --btn-glow: rgba(35, 55, 70, 0.55);
  --btn-glow-hover: rgba(35, 55, 70, 0.72);

  --fx-a: 163, 199, 210;
  --fx-b: 125, 155, 193;
  --fx-c: 79, 117, 139;
  --fx-grid: rgba(20, 24, 34, 0.055);
  --spotlight: rgba(79, 117, 139, 0.09);

  --shadow-sm: 0 1px 2px rgba(20, 24, 34, 0.04), 0 6px 16px -10px rgba(20, 24, 34, 0.18);
  --shadow: 0 18px 44px -28px rgba(20, 24, 34, 0.34);
  --shadow-lg: 0 34px 70px -42px rgba(20, 24, 34, 0.45);
}

/* ------------------------------------------------------------
   2. Brand Dark — 539C ground, 551C artwork.
   ------------------------------------------------------------ */
html[data-theme='brand-dark'] {
  color-scheme: dark;

  --bg: #141822;
  --bg-soft: #191e2a;
  --bg-elev: #1b2230;

  --surface: rgba(255, 255, 255, 0.045);
  --surface-solid: #1b2230;
  --surface-raised: rgba(20, 24, 34, 0.82);
  --input-bg: rgba(255, 255, 255, 0.05);

  --tint: rgba(163, 199, 210, 0.1);
  --tint-strong: rgba(163, 199, 210, 0.18);

  --text: #e9eef3;
  --text-dim: #a8b6c0;
  --muted: #8595a1;

  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);

  --accent-1: #a3c7d2;  --accent-1-bright: #cfe4ea;  --accent-1-rgb: 163, 199, 210;
  --accent-2: #7d9bc1;  --accent-2-bright: #a8c2e0;  --accent-2-rgb: 125, 155, 193;
  --accent-3: #a2aaad;  --accent-3-bright: #c6cccf;  --accent-3-rgb: 162, 170, 173;
  --accent-4: #f2a900;  --accent-4-bright: #ffc94d;  --accent-4-rgb: 242, 169, 0;

  --gradient-text: linear-gradient(100deg, #ffffff 4%, #a3c7d2 48%, #7d9bc1 100%);
  --gradient-avatar: linear-gradient(140deg, #a3c7d2, #7d9bc1 60%, #4f758b);

  --btn-from: #a3c7d2;
  --btn-to: #7d9bc1;
  --btn-text: #141822;
  --btn-glow: rgba(163, 199, 210, 0.4);
  --btn-glow-hover: rgba(163, 199, 210, 0.55);

  --fx-a: 163, 199, 210;
  --fx-b: 125, 155, 193;
  --fx-c: 79, 117, 139;
  --fx-grid: rgba(255, 255, 255, 0.05);
  --spotlight: rgba(163, 199, 210, 0.1);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px -10px rgba(0, 0, 0, 0.5);
  --shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 34px 70px -38px rgba(0, 0, 0, 0.75);
}

/* ------------------------------------------------------------
   3. Slate — 7546C ground. Softer than Brand Dark, same artwork.
   ------------------------------------------------------------ */
html[data-theme='slate'] {
  color-scheme: dark;

  --bg: #233746;
  --bg-soft: #294050;
  --bg-elev: #2d4455;

  --surface: rgba(255, 255, 255, 0.06);
  --surface-solid: #2b4252;
  --surface-raised: rgba(35, 55, 70, 0.85);
  --input-bg: rgba(255, 255, 255, 0.07);

  --tint: rgba(163, 199, 210, 0.12);
  --tint-strong: rgba(163, 199, 210, 0.2);

  --text: #eef4f7;
  --text-dim: #b6c8d3;
  --muted: #93a9b6;

  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.2);

  --accent-1: #a3c7d2;  --accent-1-bright: #cfe4ea;  --accent-1-rgb: 163, 199, 210;
  --accent-2: #7d9bc1;  --accent-2-bright: #a8c2e0;  --accent-2-rgb: 125, 155, 193;
  --accent-3: #a2aaad;  --accent-3-bright: #c6cccf;  --accent-3-rgb: 162, 170, 173;
  --accent-4: #f2a900;  --accent-4-bright: #ffc94d;  --accent-4-rgb: 242, 169, 0;

  --gradient-text: linear-gradient(100deg, #ffffff 4%, #a3c7d2 50%, #7d9bc1 100%);
  --gradient-avatar: linear-gradient(140deg, #a3c7d2, #7d9bc1 60%, #233746);

  --btn-from: #a3c7d2;
  --btn-to: #7d9bc1;
  --btn-text: #1b2b36;
  --btn-glow: rgba(0, 0, 0, 0.35);
  --btn-glow-hover: rgba(0, 0, 0, 0.5);

  --fx-a: 163, 199, 210;
  --fx-b: 125, 155, 193;
  --fx-c: 79, 117, 139;
  --fx-grid: rgba(255, 255, 255, 0.06);
  --spotlight: rgba(163, 199, 210, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 18px -10px rgba(0, 0, 0, 0.45);
  --shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 34px 70px -38px rgba(0, 0, 0, 0.7);
}

/* ------------------------------------------------------------
   4. Mist — light ground, 551C / 5405C only. The airiest option.
   ------------------------------------------------------------ */
html[data-theme='mist'] {
  color-scheme: light;

  --bg: #eaf2f5;
  --bg-soft: #ffffff;
  --bg-elev: #ffffff;

  --surface: rgba(255, 255, 255, 0.78);
  --surface-solid: #ffffff;
  --surface-raised: rgba(255, 255, 255, 0.85);
  --input-bg: #ffffff;

  --tint: rgba(79, 117, 139, 0.1);
  --tint-strong: rgba(79, 117, 139, 0.2);

  --text: #1c2b36;
  --text-dim: #475862;
  --muted: #6b7d88;

  --line: rgba(28, 43, 54, 0.11);
  --line-strong: rgba(28, 43, 54, 0.19);

  --accent-1: #4f758b;  --accent-1-bright: #a3c7d2;  --accent-1-rgb: 79, 117, 139;
  --accent-2: #2f5a75;  --accent-2-bright: #7d9bc1;  --accent-2-rgb: 125, 155, 193;
  --accent-3: #233746;  --accent-3-bright: #8fb3c4;  --accent-3-rgb: 35, 55, 70;
  --accent-4: #64242f;  --accent-4-bright: #e7472c;  --accent-4-rgb: 100, 36, 47;

  --gradient-text: linear-gradient(100deg, #1c2b36 2%, #4f758b 46%, #a3c7d2 100%);
  --gradient-avatar: linear-gradient(140deg, #a3c7d2, #4f758b 60%, #233746);

  --btn-from: #4f758b;
  --btn-to: #2f5a75;
  --btn-text: #ffffff;
  --btn-glow: rgba(47, 90, 117, 0.5);
  --btn-glow-hover: rgba(47, 90, 117, 0.68);

  --fx-a: 163, 199, 210;
  --fx-b: 125, 155, 193;
  --fx-c: 207, 228, 234;
  --fx-grid: rgba(28, 43, 54, 0.06);
  --spotlight: rgba(79, 117, 139, 0.1);

  --shadow-sm: 0 1px 2px rgba(28, 43, 54, 0.05), 0 6px 16px -10px rgba(28, 43, 54, 0.2);
  --shadow: 0 18px 44px -28px rgba(28, 43, 54, 0.36);
  --shadow-lg: 0 34px 70px -42px rgba(28, 43, 54, 0.46);
}

/* ------------------------------------------------------------
   5. Graphite — neutral 429C secondary palette, no blue cast.
   ------------------------------------------------------------ */
html[data-theme='graphite'] {
  color-scheme: light;

  --bg: #f4f5f6;
  --bg-soft: #ffffff;
  --bg-elev: #ffffff;

  --surface: rgba(255, 255, 255, 0.86);
  --surface-solid: #ffffff;
  --surface-raised: rgba(255, 255, 255, 0.88);
  --input-bg: #ffffff;

  --tint: rgba(107, 115, 120, 0.08);
  --tint-strong: rgba(107, 115, 120, 0.16);

  --text: #1a1d1f;
  --text-dim: #4e5459;
  --muted: #71787d;

  --line: rgba(26, 29, 31, 0.1);
  --line-strong: rgba(26, 29, 31, 0.18);

  --accent-1: #6b7378;  --accent-1-bright: #a2aaad;  --accent-1-rgb: 107, 115, 120;
  --accent-2: #4f758b;  --accent-2-bright: #7d9bc1;  --accent-2-rgb: 79, 117, 139;
  --accent-3: #233746;  --accent-3-bright: #8fb3c4;  --accent-3-rgb: 35, 55, 70;
  --accent-4: #64242f;  --accent-4-bright: #e7472c;  --accent-4-rgb: 100, 36, 47;

  --gradient-text: linear-gradient(100deg, #1a1d1f 2%, #6b7378 46%, #a2aaad 100%);
  --gradient-avatar: linear-gradient(140deg, #a2aaad, #6b7378 55%, #233746);

  --btn-from: #6b7378;
  --btn-to: #233746;
  --btn-text: #ffffff;
  --btn-glow: rgba(35, 55, 70, 0.5);
  --btn-glow-hover: rgba(35, 55, 70, 0.68);

  --fx-a: 162, 170, 173;
  --fx-b: 163, 199, 210;
  --fx-c: 107, 115, 120;
  --fx-grid: rgba(26, 29, 31, 0.055);
  --spotlight: rgba(107, 115, 120, 0.09);

  --shadow-sm: 0 1px 2px rgba(26, 29, 31, 0.04), 0 6px 16px -10px rgba(26, 29, 31, 0.18);
  --shadow: 0 18px 44px -28px rgba(26, 29, 31, 0.34);
  --shadow-lg: 0 34px 70px -42px rgba(26, 29, 31, 0.45);
}

/* ------------------------------------------------------------
   6. Ember — light ground using the 7417C / 505C accents.
   ------------------------------------------------------------ */
html[data-theme='ember'] {
  color-scheme: light;

  --bg: #fbf6f4;
  --bg-soft: #ffffff;
  --bg-elev: #ffffff;

  --surface: rgba(255, 255, 255, 0.87);
  --surface-solid: #ffffff;
  --surface-raised: rgba(255, 255, 255, 0.89);
  --input-bg: #ffffff;

  --tint: rgba(231, 71, 44, 0.07);
  --tint-strong: rgba(231, 71, 44, 0.15);

  --text: #1d1614;
  --text-dim: #574944;
  --muted: #7d6c66;

  --line: rgba(29, 22, 20, 0.1);
  --line-strong: rgba(29, 22, 20, 0.18);

  --accent-1: #b3341f;  --accent-1-bright: #e7472c;  --accent-1-rgb: 231, 71, 44;
  --accent-2: #64242f;  --accent-2-bright: #a04a56;  --accent-2-rgb: 100, 36, 47;
  --accent-3: #233746;  --accent-3-bright: #8fb3c4;  --accent-3-rgb: 35, 55, 70;
  --accent-4: #a06f00;  --accent-4-bright: #f2a900;  --accent-4-rgb: 242, 169, 0;

  --gradient-text: linear-gradient(100deg, #1d1614 2%, #b3341f 46%, #e7472c 78%, #64242f 100%);
  --gradient-avatar: linear-gradient(140deg, #e7472c, #b3341f 55%, #64242f);

  --btn-from: #d13d24;
  --btn-to: #64242f;
  --btn-text: #ffffff;
  --btn-glow: rgba(100, 36, 47, 0.5);
  --btn-glow-hover: rgba(100, 36, 47, 0.68);

  --fx-a: 231, 71, 44;
  --fx-b: 242, 169, 0;
  --fx-c: 100, 36, 47;
  --fx-grid: rgba(29, 22, 20, 0.055);
  --spotlight: rgba(231, 71, 44, 0.08);

  --shadow-sm: 0 1px 2px rgba(29, 22, 20, 0.04), 0 6px 16px -10px rgba(29, 22, 20, 0.18);
  --shadow: 0 18px 44px -28px rgba(29, 22, 20, 0.34);
  --shadow-lg: 0 34px 70px -42px rgba(29, 22, 20, 0.45);
}

/* ------------------------------------------------------------
   7. Amber — light ground using the 130C accent.
   ------------------------------------------------------------ */
html[data-theme='amber'] {
  color-scheme: light;

  --bg: #fdf9ef;
  --bg-soft: #ffffff;
  --bg-elev: #ffffff;

  --surface: rgba(255, 255, 255, 0.87);
  --surface-solid: #ffffff;
  --surface-raised: rgba(255, 255, 255, 0.89);
  --input-bg: #ffffff;

  --tint: rgba(242, 169, 0, 0.09);
  --tint-strong: rgba(242, 169, 0, 0.18);

  --text: #1f1a10;
  --text-dim: #5a5040;
  --muted: #7f7461;

  --line: rgba(31, 26, 16, 0.1);
  --line-strong: rgba(31, 26, 16, 0.18);

  --accent-1: #8f6400;  --accent-1-bright: #f2a900;  --accent-1-rgb: 242, 169, 0;
  --accent-2: #233746;  --accent-2-bright: #7d9bc1;  --accent-2-rgb: 35, 55, 70;
  --accent-3: #4f758b;  --accent-3-bright: #a3c7d2;  --accent-3-rgb: 79, 117, 139;
  --accent-4: #64242f;  --accent-4-bright: #e7472c;  --accent-4-rgb: 100, 36, 47;

  --gradient-text: linear-gradient(100deg, #1f1a10 2%, #8f6400 44%, #f2a900 76%, #233746 100%);
  --gradient-avatar: linear-gradient(140deg, #f2a900, #8f6400 55%, #233746);

  --btn-from: #b57d00;
  --btn-to: #233746;
  --btn-text: #ffffff;
  --btn-glow: rgba(35, 55, 70, 0.5);
  --btn-glow-hover: rgba(35, 55, 70, 0.68);

  --fx-a: 242, 169, 0;
  --fx-b: 163, 199, 210;
  --fx-c: 125, 155, 193;
  --fx-grid: rgba(31, 26, 16, 0.055);
  --spotlight: rgba(242, 169, 0, 0.1);

  --shadow-sm: 0 1px 2px rgba(31, 26, 16, 0.04), 0 6px 16px -10px rgba(31, 26, 16, 0.18);
  --shadow: 0 18px 44px -28px rgba(31, 26, 16, 0.34);
  --shadow-lg: 0 34px 70px -42px rgba(31, 26, 16, 0.45);
}

/* ------------------------------------------------------------
   8. Cobalt — 7463C ground, 652C artwork.
   ------------------------------------------------------------ */
html[data-theme='cobalt'] {
  color-scheme: dark;

  --bg: #112136;
  --bg-soft: #16293f;
  --bg-elev: #1a2f47;

  --surface: rgba(255, 255, 255, 0.05);
  --surface-solid: #1a2f47;
  --surface-raised: rgba(17, 33, 54, 0.85);
  --input-bg: rgba(255, 255, 255, 0.06);

  --tint: rgba(125, 155, 193, 0.14);
  --tint-strong: rgba(125, 155, 193, 0.24);

  --text: #eaf1f8;
  --text-dim: #adbdd2;
  --muted: #8996ab;

  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.2);

  --accent-1: #7d9bc1;  --accent-1-bright: #a8c2e0;  --accent-1-rgb: 125, 155, 193;
  --accent-2: #a3c7d2;  --accent-2-bright: #cfe4ea;  --accent-2-rgb: 163, 199, 210;
  --accent-3: #a2aaad;  --accent-3-bright: #c6cccf;  --accent-3-rgb: 162, 170, 173;
  --accent-4: #f2a900;  --accent-4-bright: #ffc94d;  --accent-4-rgb: 242, 169, 0;

  --gradient-text: linear-gradient(100deg, #ffffff 4%, #7d9bc1 50%, #a3c7d2 100%);
  --gradient-avatar: linear-gradient(140deg, #a3c7d2, #7d9bc1 60%, #112136);

  --btn-from: #7d9bc1;
  --btn-to: #a3c7d2;
  --btn-text: #112136;
  --btn-glow: rgba(125, 155, 193, 0.4);
  --btn-glow-hover: rgba(125, 155, 193, 0.58);

  --fx-a: 125, 155, 193;
  --fx-b: 163, 199, 210;
  --fx-c: 79, 117, 139;
  --fx-grid: rgba(255, 255, 255, 0.055);
  --spotlight: rgba(125, 155, 193, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28), 0 6px 18px -10px rgba(0, 0, 0, 0.48);
  --shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.58);
  --shadow-lg: 0 34px 70px -38px rgba(0, 0, 0, 0.72);
}

/* Legacy aliases. New code should use --accent-1 … --accent-4. */
:root,
html[data-theme] {
  --cyan: var(--accent-1);
  --violet: var(--accent-2);
  --lime: var(--accent-3);
  --pink: var(--accent-4);

  --cyan-bright: var(--accent-1-bright);
  --violet-bright: var(--accent-2-bright);
  --lime-bright: var(--accent-3-bright);
  --pink-bright: var(--accent-4-bright);

  --glass: rgba(255, 255, 255, 0.7);
  --glass-2: rgba(255, 255, 255, 0.9);
}