/**
 * Foundation Implants — Design Tokens (CSS Custom Properties)
 *
 * Three palette definitions (switchable via data-theme attribute):
 *   :root                  → Sapphire (default)
 *   [data-theme="arctic"]  → Arctic
 *   [data-theme="slate"]   → Slate
 *
 * Variable naming matches parts/header.html and all templates.
 * Utility variables (--fi-radius, --fi-transition, etc.) are kept
 * separate from palette colors.
 *
 * @package foundation-implants
 */

/* --------------------------------------------------------
   Sapphire (default) — palette aliases for external CSS
   -------------------------------------------------------- */
:root {
  /* These map to the same names used in header.html :root */
  --sapphire-rgb: 90, 159, 212;

  /* Utility tokens (no palette equivalent in header.html) */
  --fi-card-bg: rgba(255, 255, 255, 0.02);
  --fi-card-border: rgba(90, 159, 212, 0.06);
  --fi-gradient: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 40%, var(--navy-light) 100%);
  --fi-radius: 12px;
  --fi-radius-sm: 8px;
  --fi-radius-lg: 16px;
  --fi-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --------------------------------------------------------
   Arctic
   -------------------------------------------------------- */
[data-theme="arctic"] {
  --navy-deep: #0f1729;
  --navy: #1a1a2e;
  --navy-light: #2B3A67;
  --sapphire: #7EB8D8;
  --sapphire-rgb: 126, 184, 216;
  --sky: #a8d4ec;
  --fi-card-border: rgba(126, 184, 216, 0.06);
}

/* --------------------------------------------------------
   Slate
   -------------------------------------------------------- */
[data-theme="slate"] {
  --navy-deep: #101018;
  --navy: #181824;
  --navy-light: #222236;
  --sapphire: #8896aa;
  --sapphire-rgb: 136, 150, 170;
  --sky: #b0c4de;
  --white: #e0e8f0;
  --fi-card-border: rgba(136, 150, 170, 0.06);
}