/* Satina IT Paris — tokens V3 (noir architectural + lime) */
:root,
[data-theme="dark"] {
  --bg: #08090b;
  --bg-elevated: #101214;
  --bg-glass: rgba(16, 18, 20, 0.9);
  --surface: #16191d;
  --surface-hover: #1e2329;
  --text: #f5f5f4;
  --text-muted: #a1a1aa;
  --text-faint: #71717a;
  --accent: #a3e635;
  --accent-2: #84cc16;
  --accent-3: #bef264;
  --accent-rgb: 163, 230, 53;
  --accent-2-rgb: 132, 204, 22;
  --accent-3-rgb: 190, 242, 100;
  --accent-glow: rgba(163, 230, 53, 0.28);
  --gradient: linear-gradient(135deg, #a3e635 0%, #84cc16 55%, #65a30d 100%);
  --gradient-soft: linear-gradient(180deg, rgba(163, 230, 53, 0.1) 0%, transparent 70%);
  --gradient-mesh: radial-gradient(ellipse 70% 45% at 0% 0%, rgba(163, 230, 53, 0.09), transparent 50%),
    radial-gradient(ellipse 50% 40% at 100% 30%, rgba(132, 204, 22, 0.05), transparent 45%);
  --border: rgba(245, 245, 244, 0.08);
  --border-strong: rgba(163, 230, 53, 0.45);
  --shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  --hero-overlay: linear-gradient(100deg, rgba(8, 9, 11, 0.97) 0%, rgba(8, 9, 11, 0.78) 38%, rgba(8, 9, 11, 0.2) 100%);
  --canvas-opacity: 0.22;
  --nav-height: 4.5rem;
  --nav-offset: 0;
  --crystal-bg: rgba(255, 255, 255, 0.028);
  --crystal-border: rgba(255, 255, 255, 0.08);
  --crystal-highlight: rgba(255, 255, 255, 0.1);
  --crystal-blur: blur(20px) saturate(120%);
  --crystal-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --font-display: "Syne", "Segoe UI", sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f4f5f7;
  --bg-elevated: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.92);
  --surface: #ffffff;
  --surface-hover: #eef0f3;
  --text: #12141a;
  --text-muted: #52525b;
  --text-faint: #71717a;
  --accent: #4d7c0f;
  --accent-2: #65a30d;
  --accent-3: #84cc16;
  --accent-rgb: 77, 124, 15;
  --accent-2-rgb: 101, 163, 13;
  --accent-3-rgb: 132, 204, 22;
  --accent-glow: rgba(77, 124, 15, 0.18);
  --gradient: linear-gradient(135deg, #4d7c0f 0%, #65a30d 50%, #84cc16 100%);
  --gradient-soft: linear-gradient(180deg, rgba(77, 124, 15, 0.07) 0%, transparent 70%);
  --gradient-mesh: radial-gradient(ellipse 70% 45% at 0% 0%, rgba(77, 124, 15, 0.06), transparent 50%);
  --border: rgba(18, 20, 26, 0.08);
  --border-strong: rgba(77, 124, 15, 0.4);
  --shadow: 0 20px 48px rgba(18, 20, 26, 0.08);
  --hero-overlay: linear-gradient(100deg, rgba(244, 245, 247, 0.97) 0%, rgba(244, 245, 247, 0.75) 40%, rgba(244, 245, 247, 0.2) 100%);
  --canvas-opacity: 0.12;
  --crystal-bg: rgba(255, 255, 255, 0.85);
  --crystal-border: rgba(18, 20, 26, 0.08);
  --crystal-highlight: #fff;
  --crystal-shadow: 0 6px 24px rgba(18, 20, 26, 0.06);
  color-scheme: light;
}

[data-theme="light"] .reference-card img {
  filter: grayscale(0.1) contrast(1.05);
}