/* Akis foundation for every static web page.
 *
 * Values mirror lib/core/theme/tokens/akis_tokens.dart; the Dart test
 * test/core/web_akis_tokens_test.dart compares them, so a token changed in one
 * place and not the other fails the build. Akis is dark only, like the app.
 */

@font-face {
  font-family: "Syne";
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Syne-700.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Figtree-400.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Figtree-600.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Figtree-700.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/Figtree-800.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/GeistMono-500.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  --ak-bg: #140f18;
  --ak-tile: #1e1823;
  --ak-tile2: #28202e;
  --ak-tile3: #322839;
  --ak-sheet: #1c1621;
  --ak-line: rgba(255, 247, 240, 0.12);
  --ak-line2: rgba(255, 247, 240, 0.22);
  --ak-text: #fff7f0;
  --ak-muted: #b9acbb;
  --ak-dim: #968a9c;
  --ak-plan: #ff7a45;
  --ak-plan-text: #ffb08a;
  --ak-coach: #4c9bff;
  --ak-coach-text: #9cc6ff;
  --ak-me: #a99bb5;
  --ak-warn: #ffb547;
  --ak-warn-ink: #ffe1b3;
  --ak-ok: #5ee0a8;
  --ak-ink: #140f18;
  --ak-ink-on-coach: #0a0816;
  --ak-coach-hero-text: #ede5ef;
  --ak-coach-hero-muted: #c9d2f0;
  --ak-coach-hero-dim: #afc0ec;
  --ak-coach-link: #d6e6ff;

  --ak-plan-v: linear-gradient(0deg, #ff6a3d, #f2386e 60%, #b12fc9);
  --ak-coach-v: linear-gradient(0deg, #1fc7b6, #3a7bff 60%, #7446e8);
  --ak-me-v: linear-gradient(0deg, #6e6378, #a597b1);
  --ak-plan-h: linear-gradient(90deg, #ff6a3d, #f2386e, #b12fc9);
  --ak-coach-hero: linear-gradient(165deg, #1b2b5e 0%, #261c48 60%, #1e1823 100%);
  --ak-plan-glow: rgba(242, 56, 110, 0.4);
  --ak-coach-glow: rgba(58, 123, 255, 0.42);

  --ak-r-pill: 999px;
  --ak-r-button: 14px;
  --ak-r-field: 12px;
  --ak-r-card: 20px;
  --ak-r-list: 18px;
  --ak-r-sheet: 24px;

  --ak-min-tap: 48px;
  --ak-gutter: 16px;

  --ak-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ak-ease-capsule: cubic-bezier(0.3, 1.35, 0.5, 1);
  --ak-t-page: 260ms;
  --ak-t-meter: 450ms;
  --ak-t-capsule: 500ms;

  --ak-display: "Syne", "Figtree", system-ui, sans-serif;
  --ak-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ak-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: ak-page-out 180ms var(--ak-ease) both;
}
::view-transition-new(root) {
  animation: ak-page-in var(--ak-t-page) var(--ak-ease) both;
}

@keyframes ak-page-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}
@keyframes ak-page-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

html {
  background: var(--ak-bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body.ak {
  margin: 0;
  background: var(--ak-bg);
  color: var(--ak-text);
  font-family: var(--ak-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.ak a {
  color: var(--ak-coach-text);
}
.ak a:hover {
  color: var(--ak-coach-link);
}
.ak :focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.ak-skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: var(--ak-r-button);
  background: var(--ak-text);
  color: var(--ak-ink);
  font-weight: 700;
}
.ak-skip:focus {
  top: 8px;
}

.ak-eyebrow {
  font-family: var(--ak-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ak-muted);
}

.ak-display {
  font-family: var(--ak-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.ak-num {
  font-variant-numeric: tabular-nums;
}

.ak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--ak-min-tap);
  padding: 0 22px;
  border-radius: var(--ak-r-button);
  border: 1px solid transparent;
  font-family: var(--ak-body);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 120ms var(--ak-ease),
    background-color 200ms var(--ak-ease);
}
.ak-btn:active {
  transform: scale(0.96);
}
.ak .ak-btn--primary,
.ak .ak-btn--primary:hover {
  background: var(--ak-text);
  color: var(--ak-ink);
}
.ak .ak-btn--ghost,
.ak .ak-btn--ghost:hover {
  background: transparent;
  color: var(--ak-text);
  border-color: var(--ak-line2);
}

.ak-capsule {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 44px;
  border-radius: var(--ak-r-pill);
  border: 1.5px solid rgba(255, 247, 240, 0.3);
  background: var(--ak-tile);
  overflow: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
}
.ak-capsule > i {
  position: absolute;
  inset: auto 0 0 0;
  height: var(--fill, 0%);
  background: var(--ak-plan-v);
  transition: height var(--ak-t-capsule) var(--ak-ease-capsule);
}
.ak-capsule--coach > i {
  background: var(--ak-coach-v);
}
.ak-capsule--me > i {
  background: var(--ak-me-v);
}

/* Reveal on scroll: content is visible without script; ak.js adds the class
 * that hides it only after it has an observer to bring it back. */
.ak-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 600ms var(--ak-ease),
    transform 600ms var(--ak-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.ak-reveal-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
  .ak-reveal-ready [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ak-capsule > i,
  .ak-btn {
    transition: none;
  }
}