/* &Loop™ Experience System — primitive, semantic and compatibility tokens. */
:root {
  color-scheme: light;

  /* Primitive color palette */
  --al-color-neutral-0: #ffffff;
  --al-color-neutral-25: #fbfcfe;
  --al-color-neutral-50: #f4f6f9;
  --al-color-neutral-100: #eef1f5;
  --al-color-neutral-200: #dce2ea;
  --al-color-neutral-500: #696f7a;
  --al-color-neutral-700: #31343a;
  --al-color-neutral-900: #0c0d10;
  --al-color-night-950: #05070b;
  --al-color-night-900: #0b0e15;
  --al-color-blue-700: #0a5ac2;
  --al-color-blue-500: #2f8cff;
  --al-color-cyan-400: #6bc8ff;
  --al-color-violet-400: #8d7bff;
  --al-color-success-600: #18794e;
  --al-color-warning-600: #a15c00;
  --al-color-danger-600: #c73535;

  /* Alpha colors */
  --al-alpha-ink-04: rgba(12, 13, 16, 0.04);
  --al-alpha-ink-08: rgba(12, 13, 16, 0.08);
  --al-alpha-ink-10: rgba(12, 13, 16, 0.10);
  --al-alpha-white-06: rgba(255, 255, 255, 0.06);
  --al-alpha-white-10: rgba(255, 255, 255, 0.10);
  --al-alpha-white-72: rgba(255, 255, 255, 0.72);

  /* Semantic colors */
  --al-canvas: var(--al-color-neutral-0);
  --al-canvas-subtle: var(--al-color-neutral-50);
  --al-surface: var(--al-color-neutral-0);
  --al-surface-elevated: var(--al-color-neutral-0);
  --al-surface-glass: var(--al-alpha-white-72);
  --al-text: var(--al-color-neutral-900);
  --al-text-secondary: var(--al-color-neutral-700);
  --al-text-muted: var(--al-color-neutral-500);
  --al-border: var(--al-alpha-ink-10);
  --al-accent: var(--al-color-blue-700);
  --al-accent-bright: var(--al-color-blue-500);
  --al-focus: var(--al-color-blue-500);
  --al-success: var(--al-color-success-600);
  --al-warning: var(--al-color-warning-600);
  --al-danger: var(--al-color-danger-600);

  /* Typography */
  --al-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --al-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --al-font-size-xs: 0.75rem;
  --al-font-size-sm: 0.875rem;
  --al-font-size-md: 1rem;
  --al-font-size-lg: 1.125rem;
  --al-font-size-xl: 1.375rem;
  --al-font-size-2xl: clamp(1.75rem, 3vw, 3rem);
  --al-font-size-display: clamp(2.75rem, 7vw, 6rem);
  --al-line-tight: 1.05;
  --al-line-body: 1.55;
  --al-weight-regular: 400;
  --al-weight-medium: 600;
  --al-weight-bold: 740;

  /* Spacing */
  --al-space-0: 0;
  --al-space-1: 0.25rem;
  --al-space-2: 0.5rem;
  --al-space-3: 0.75rem;
  --al-space-4: 1rem;
  --al-space-5: 1.5rem;
  --al-space-6: 2rem;
  --al-space-7: 3rem;
  --al-space-8: 4rem;
  --al-space-9: 6rem;
  --al-space-10: 8rem;

  /* Radius, border and elevation */
  --al-radius-xs: 0.5rem;
  --al-radius-sm: 1.125rem;
  --al-radius-md: 1.75rem;
  --al-radius-lg: 2.5rem;
  --al-radius-pill: 999px;
  --al-border-width: 1px;
  --al-shadow-sm: 0 12px 35px rgba(13, 20, 34, 0.08);
  --al-shadow-md: 0 20px 55px rgba(20, 72, 140, 0.10);
  --al-shadow-lg: 0 30px 80px rgba(2, 8, 20, 0.18);
  --al-shadow-focus: 0 0 0 4px rgba(47, 140, 255, 0.22);

  /* Layout */
  --al-reading-width: 45rem;
  --al-content-width: 70rem;
  --al-wide-width: 77.5rem;
  --al-gutter: clamp(1rem, 3vw, 2.5rem);
  --al-section-block: clamp(5.5rem, 10vw, 8rem);
  --al-nav-height: 4.5rem;

  /* Motion */
  --al-motion-instant: 80ms;
  --al-motion-fast: 140ms;
  --al-motion-standard: 240ms;
  --al-motion-emphasis: 420ms;
  --al-ease-standard: cubic-bezier(.2, .8, .2, 1);
  --al-ease-enter: cubic-bezier(.16, 1, .3, 1);
  --al-ease-exit: cubic-bezier(.4, 0, 1, 1);

  /* Z-index */
  --al-z-base: 0;
  --al-z-sticky: 100;
  --al-z-navigation: 900;
  --al-z-dialog: 1200;
  --al-z-toast: 1300;

  /* P1 compatibility aliases — values intentionally preserved exactly. */
  --ink: #0c0d10;
  --ink-soft: #31343a;
  --muted: #696f7a;
  --line: rgba(12,13,16,.10);
  --surface: #ffffff;
  --surface-soft: #f4f6f9;
  --surface-glass: rgba(255,255,255,.72);
  --night: #05070b;
  --night-2: #0b0e15;
  --blue: #0a5ac2;
  --blue-bright: #2f8cff;
  --cyan: #6bc8ff;
  --violet: #8d7bff;
  --shadow-sm: 0 12px 35px rgba(13,20,34,.08);
  --shadow-lg: 0 30px 80px rgba(2,8,20,.18);
  --radius-sm: 18px;
  --radius-md: 28px;
  --radius-lg: 40px;
  --max: 1240px;
  --nav-h: 72px;
  --ease: cubic-bezier(.22,1,.36,1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --al-canvas: var(--al-color-night-950);
  --al-canvas-subtle: var(--al-color-night-900);
  --al-surface: #111620;
  --al-surface-elevated: #171d28;
  --al-surface-glass: rgba(17, 22, 32, 0.78);
  --al-text: #f7f9fc;
  --al-text-secondary: #d0d6df;
  --al-text-muted: #9aa5b4;
  --al-border: rgba(255, 255, 255, 0.12);
}

/* P18: persistent theme control and complete dark-theme compatibility. */
.andloop-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--al-border);
  border-radius: 0.85rem;
  background: var(--al-surface);
  color: var(--al-text);
  box-shadow: var(--al-shadow-sm);
  cursor: pointer;
  font: inherit;
  font-size: var(--al-font-size-sm);
  font-weight: var(--al-weight-medium);
  line-height: 1;
  transition: background var(--al-motion-fast) var(--al-ease-standard),
    border-color var(--al-motion-fast) var(--al-ease-standard),
    color var(--al-motion-fast) var(--al-ease-standard),
    transform var(--al-motion-fast) var(--al-ease-standard);
}
.andloop-theme-toggle:hover {
  border-color: var(--al-accent);
  transform: translateY(-1px);
}
.andloop-theme-toggle:focus-visible {
  outline: 2px solid var(--al-focus);
  outline-offset: 3px;
  box-shadow: var(--al-shadow-focus);
}
.andloop-theme-toggle svg {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.nav-actions .andloop-theme-toggle {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #fff;
  box-shadow: none;
}
.nav-actions .andloop-theme-toggle:hover {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.14);
}
.andloop-theme-toggle--floating {
  position: fixed;
  inset-inline-end: 1rem;
  inset-block-start: 1rem;
  z-index: var(--al-z-toast);
}

[data-theme="dark"] {
  --ink: #f7f9fc;
  --ink-soft: #d0d6df;
  --muted: #9aa5b4;
  --line: rgba(255,255,255,.12);
  --surface: #05070b;
  --surface-soft: #0b0e15;
  --surface-glass: rgba(17,22,32,.78);
  --shadow-sm: 0 12px 35px rgba(0,0,0,.34);
  --shadow-lg: 0 30px 80px rgba(0,0,0,.54);
}
[data-theme="dark"] body { background: var(--al-canvas); color: var(--al-text); }
[data-theme="dark"] .philosophy {
  background: linear-gradient(180deg,#05070b 0%,#0b0e15 100%);
}
[data-theme="dark"] .services,
[data-theme="dark"] .outcomes { background: #0b0e15; }
[data-theme="dark"] .method-tab,
[data-theme="dark"] .service-card {
  border-color: rgba(255,255,255,.12);
  background: rgba(17,22,32,.92);
  color: var(--al-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
[data-theme="dark"] .method-tab.active {
  border-color: rgba(47,140,255,.42);
  background: #171d28;
  box-shadow: 0 20px 55px rgba(0,0,0,.3);
}
[data-theme="dark"] .service-icon {
  border-color: rgba(107,200,255,.24);
  background: linear-gradient(145deg,#171d28,#101722);
  color: var(--al-color-cyan-400);
}
[data-theme="dark"] .focus-list li,
[data-theme="dark"] .principle-index {
  background: #171d28;
  color: #a9d4ff;
}
[data-theme="dark"] .about,
[data-theme="dark"] .contact { background: #05070b; }
[data-theme="dark"] .about-card {
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(145deg,#111620,#171d28);
}
[data-theme="dark"] .about-logo {
  filter: invert(1) brightness(1.15) drop-shadow(0 18px 24px rgba(0,0,0,.3));
}
[data-theme="dark"] .about-chip {
  border-color: rgba(255,255,255,.12);
  background: rgba(17,22,32,.88);
  color: var(--al-text-secondary);
}
[data-theme="dark"] .contact-shell {
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(145deg,#111620,#0b0e15);
  box-shadow: 0 30px 90px rgba(0,0,0,.34);
}
[data-theme="dark"] .contact-form,
[data-theme="dark"] .modal-card {
  border-color: rgba(255,255,255,.12);
  background: rgba(17,22,32,.94);
  color: var(--al-text);
}
[data-theme="dark"] .field label { color: var(--al-text-secondary); }
[data-theme="dark"] .field input,
[data-theme="dark"] .field textarea {
  border-color: rgba(255,255,255,.14);
  background: #0b0e15;
  color: var(--al-text);
}
[data-theme="dark"] .modal-close { background: #252d3a; color: var(--al-text); }
[data-theme="dark"] .route-page {
  background: radial-gradient(circle at 88% 8%,rgba(47,140,255,.12),transparent 28rem),
    var(--al-canvas);
}

@media (max-width: 70rem) {
  .route-header__inner .andloop-theme-toggle { margin-inline-start: auto; }
}
@media (max-width: 48rem) {
  .andloop-theme-toggle span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .andloop-theme-toggle { padding-inline: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .andloop-theme-toggle { transition: none; }
}