/* ==========================================================================
   Kinetic Sanctuary app — Kinetic Sanctuary design tokens
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/kinetic/Inter-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/kinetic/Inter-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/kinetic/Inter-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/kinetic/Inter-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/kinetic/PlusJakartaSans-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/kinetic/PlusJakartaSans-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/kinetic/PlusJakartaSans-800.ttf') format('truetype');
}
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('/fonts/kinetic/MaterialSymbolsOutlined-400.ttf') format('truetype');
}

:root {
  /* Colors (Kinetic Sanctuary) */
  --ks-primary: #16182c;
  --ks-primary-container: #2b2d42;
  --ks-on-primary: #ffffff;
  --ks-on-primary-container: #9394ae;
  --ks-secondary: #0061a5;
  --ks-secondary-fixed: #d2e4ff;
  --ks-on-secondary-fixed: #001c37;
  --ks-tertiary: #001f01;
  --ks-tertiary-fixed: #a4f696;
  --ks-on-tertiary-fixed: #002202;
  --ks-on-tertiary-container: #59a751;
  --ks-surface: #f8f9fd;
  --ks-surface-container-low: #f2f3f7;
  --ks-surface-container: #edeef2;
  --ks-surface-container-high: #e7e8ec;
  --ks-surface-container-highest: #e1e2e6;
  --ks-surface-container-lowest: #ffffff;
  --ks-on-surface: #191c1f;
  --ks-on-surface-variant: #46464d;
  --ks-outline: #77767d;
  --ks-outline-variant: #c7c5cd;
  --ks-error: #ba1a1a;

  /* Font stacks */
  --ks-font-headline: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ks-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Base reset + body for kinetic-styled pages */
.kinetic-app {
  font-family: var(--ks-font-body);
  color: var(--ks-on-surface);
  background: var(--ks-surface);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.kinetic-app * { box-sizing: border-box; }
.kinetic-app h1, .kinetic-app h2, .kinetic-app h3 {
  font-family: var(--ks-font-headline);
  letter-spacing: -0.02em;
}

/* Editorial shadow used on "primary" cards */
.ks-editorial-shadow {
  box-shadow: 0 24px 40px -4px rgba(25, 28, 31, 0.04), 0 0 1px rgba(25, 28, 31, 0.05);
}

/* Anthracite gradient for signature CTAs */
.ks-anthracite-gradient {
  background: linear-gradient(135deg, #16182c 0%, #2b2d42 100%);
}

/* Material Symbols baseline */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Desktop container (mobile-first: single column, centered on desktop) */
.kinetic-container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 900px) {
  .kinetic-container { max-width: 960px; padding: 0 32px; }
}

/* ==========================================================================
   Toasts — stack of auto-dismissing notifications, driven by
   assets/controllers/toast_controller.js
   ========================================================================== */

.toast-stack {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0) + 16px);
  right: 16px;
  left: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
@media (min-width: 640px) {
  .toast-stack {
    left: auto;
    max-width: 420px;
  }
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 12px 14px 16px;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(22, 24, 44, 0.16);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;

  /* Default (success) — tertiary tonal pair */
  background: #a4f696; /* tertiary-fixed */
  color: #005309;      /* on-tertiary-fixed-variant */

  transform: translateY(-10px);
  opacity: 0;
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1),
              opacity 200ms ease;
}
.toast--in {
  transform: translateY(0);
  opacity: 1;
}
.toast--out {
  transform: translateY(-10px);
  opacity: 0;
}

.toast__icon {
  flex-shrink: 0;
  font-size: 20px;
  font-variation-settings: 'FILL' 1;
  margin-top: 1px;
}
.toast__body {
  flex: 1;
  min-width: 0;
  padding-top: 1px;
  word-break: break-word;
}
.toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 150ms ease, background 150ms ease;
}
.toast__close:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }
.toast__close .material-symbols-outlined { font-size: 18px; }

/* ---- Variants ---- */
.toast--success {
  background: #a4f696; /* tertiary-fixed */
  color: #005309;      /* on-tertiary-fixed-variant */
}
.toast--info {
  background: #d2e4ff; /* secondary-fixed */
  color: #00497e;      /* on-secondary-fixed-variant */
}
.toast--error {
  background: #ffdad6; /* error-container */
  color: #93000a;      /* on-error-container */
}
.toast--neutral {
  background: #e7e8ec; /* surface-container-high */
  color: #16182c;      /* primary */
}

/* ── Choice card form theme — radio / checkbox card form theme ────────────────────────── */
/* Used by templates/_form/app_form_theme.html.twig — wraps each
   expanded ChoiceType option in a clickable card. The native input is
   .peer.sr-only; the visible card sits as the next sibling so we can
   drive its checked state via Tailwind's peer-checked variant. The dot
   animation comes from the .choice-card__dot scale transition. */

.choice-card .peer:checked + .choice-card__body {
  background: #ffffff; /* surface-container-lowest — lifts on selection */
}
.choice-card .peer:checked + .choice-card__body .choice-card__indicator {
  border-color: #16182c; /* primary */
}
.choice-card .peer:checked + .choice-card__body .choice-card__dot {
  transform: scale(1);
}
.choice-card:hover .choice-card__body {
  background: #ffffff;
}
.choice-card .peer:focus-visible + .choice-card__body {
  outline: 2px solid #0061a5; /* secondary */
  outline-offset: 2px;
}
.choice-card .peer:disabled + .choice-card__body {
  opacity: 0.5;
  cursor: not-allowed;
}