/* CX Platform — Global Shell Styles
 * Include on every page: <link rel="stylesheet" href="/assets/shell.css">
 */

:root {
  --base-black: 0 0 0;
  --base-white: 255 255 255;
  --base-neutrals-25: 250 250 250;
  --base-neutrals-50: 245 246 246;
  --base-neutrals-100: 229 231 232;
  --base-neutrals-200: 205 210 211;
  --base-neutrals-300: 169 178 181;
  --base-neutrals-500: 100 111 117;
  --base-neutrals-700: 74 79 83;
  --base-neutrals-800: 51 53 56;
  --base-neutrals-900: 32 34 37;
  --base-neutrals-950: 18 20 20;
  --base-neutrals-975: 5 5 5;
}

[data-theme="tipico-light"] {
  color-scheme: light;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-card: 12px;
  --text-highlight: var(--base-neutrals-950);
  --text-standard: var(--base-neutrals-700);
  --text-subtile: var(--base-neutrals-500);
  --text-interaction: 28 126 161;
  --border-strong: 18 20 20 / 0.75;
  --border-standard: 18 20 20 / 0.15;
  --border-subtile: 18 20 20 / 0.05;
  --bg-surface: var(--base-neutrals-50);
  --bg-card: var(--base-white);
  --bg-input: var(--base-neutrals-100);
  --bg-code: var(--base-neutrals-100);
  --bg-cta-primary: var(--base-neutrals-950);
  --global-styling-branding-interaction: 28 126 161;
  --global-styling-branding-brand: 200 16 46;
  --signals-bg-info: 28 126 161;
  --signals-bg-positive: 45 148 90;
  --signals-bg-negative: 200 50 60;
  --signals-bg-warning: 180 130 40;
  --nav-pill: var(--base-neutrals-100);
}

[data-theme="tipico-dark"] {
  color-scheme: dark;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-card: 12px;
  --text-highlight: var(--base-neutrals-25);
  --text-standard: var(--base-neutrals-200);
  --text-subtile: var(--base-neutrals-300);
  --text-interaction: 95 192 227;
  --border-strong: 255 255 255 / 0.75;
  --border-standard: 255 255 255 / 0.15;
  --border-subtile: 255 255 255 / 0.05;
  --bg-surface: var(--base-neutrals-950);
  --bg-card: var(--base-neutrals-900);
  --bg-input: var(--base-neutrals-800);
  --bg-code: var(--base-neutrals-900);
  --bg-cta-primary: var(--base-white);
  --global-styling-branding-interaction: 95 192 227;
  --global-styling-branding-brand: 200 16 46;
  --signals-bg-info: 28 126 161;
  --signals-bg-positive: 45 148 90;
  --signals-bg-negative: 200 50 60;
  --signals-bg-warning: 200 150 50;
  --nav-pill: var(--base-neutrals-800);
}

body {
  background-color: rgb(var(--bg-surface));
  color: rgb(var(--text-standard));
  transition: background-color 0.3s, color 0.3s;
  padding-top: 64px; /* space for fixed header */
}

/* Nav pill sliding indicator */
.nav-links { position: relative; }
.nav-pill {
  position: absolute;
  height: 32px;
  border-radius: 9999px;
  background: rgb(var(--nav-pill));
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.nav-link {
  position: relative;
  z-index: 1;
  padding: 6px 14px;
  border-radius: 9999px;
  transition: color 0.2s;
}
.nav-link.active { color: rgb(var(--text-highlight)); font-weight: 500; }

/* Card hover */
.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgb(0 0 0 / 0.06); }

/* Mobile menu */
.mobile-menu { display: none; }
.mobile-menu.open { display: flex; }

/* Images with white backgrounds — wrap in themed card */
.blend-bg {
  background: rgb(var(--bg-card));
  border-radius: 12px;
  padding: 6px;
  border: 1px solid rgb(var(--border-subtile));
  object-fit: cover;
}