/* Ephemeral design system v1 — verbatim from brand/source/ephemeral-branding-and-css.md §7.
   Plus Jakarta Sans is bundled locally (SIL OFL 1.1, see fonts/OFL.txt); never loaded from a CDN. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/PlusJakartaSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/PlusJakartaSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/PlusJakartaSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/PlusJakartaSans-Bold.woff2") format("woff2");
}

/* Ephemeral design system v1 */
:root {
  color-scheme: dark;

  --ep-midnight: #071811;
  --ep-forest: #0F3D28;
  --ep-green: #16C784;
  --ep-mint: #34E6A1;
  --ep-light-mint: #A7F3D0;
  --ep-sage: #D9FBE9;
  --ep-slate: #1F2D27;
  --ep-mist: #6B7D76;
  --ep-white: #FFFFFF;
  --ep-near-black: #030906;
  --ep-border: #294238;
  --ep-danger: #FF5D68;
  --ep-warning: #FFC857;
  --ep-info: #7DB7FF;

  --color-bg: var(--ep-midnight);
  --color-surface: var(--ep-slate);
  --color-surface-raised: #26382F;
  --color-text: var(--ep-white);
  --color-text-muted: #B3C2BA;
  --color-text-subtle: #8FA198;
  --color-border: var(--ep-border);
  --color-primary: var(--ep-green);
  --color-primary-hover: var(--ep-mint);
  --color-on-primary: #032014;

  --gradient-brand: linear-gradient(
    135deg, #A7F3D0 0%, #34E6A1 38%,
    #16C784 68%, #0F3D28 100%
  );
  --gradient-primary: linear-gradient(135deg, #34E6A1, #16C784);
  --gradient-surface: linear-gradient(180deg, #10251B, #071811);

  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-display: clamp(2rem, 5vw, 2.5rem);

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-pill: 999px;

  --shadow-card: 0 12px 32px rgb(0 0 0 / 18%);
  --shadow-focus: 0 0 0 3px rgb(52 230 161 / 28%);
  --motion-fast: 120ms;
  --motion-normal: 200ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
}

* { box-sizing: border-box; }

html {
  color-scheme: dark;
  background: var(--color-bg);
  font-family: var(--font-sans);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.5;
  font-weight: 400;
}

button, input, textarea, select { font: inherit; }

button {
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ep-mint);
  outline-offset: 3px;
  box-shadow: var(--shadow-focus);
}

a { color: var(--ep-light-mint); text-underline-offset: .2em; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.25;
  letter-spacing: -.025em;
}
h1 { font-size: var(--text-display); font-weight: 700; }
h2 { font-size: var(--text-2xl); font-weight: 700; }
h3 { font-size: var(--text-lg); font-weight: 600; }
p { margin: 0; }

.ep-app {
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
}

.ep-container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.ep-surface {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.ep-card {
  padding: var(--space-6);
  background: linear-gradient(180deg, #14281E, #1F2D27);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.ep-brand-mark {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  vertical-align: middle;
}

.ep-wordmark {
  color: var(--color-text);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.04em;
}

.ep-tagline {
  color: var(--ep-light-mint);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.ep-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: .75rem 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
}

.ep-button--primary {
  color: var(--color-on-primary);
  background: var(--gradient-primary);
}
.ep-button--primary:hover { filter: brightness(1.04); }
.ep-button--primary:active { transform: scale(.985); }

.ep-button--secondary {
  color: var(--color-text);
  background: var(--color-surface);
  border-color: var(--color-border);
}

.ep-button--ghost {
  color: var(--ep-light-mint);
  background: transparent;
}

.ep-button--danger {
  color: #24070A;
  background: var(--ep-danger);
}

.ep-input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: .75rem .875rem;
  color: var(--color-text);
  background: #102019;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.ep-input::placeholder { color: var(--color-text-subtle); }
.ep-input:focus { border-color: var(--ep-mint); }

.ep-muted { color: var(--color-text-muted); }

.ep-divider {
  height: 1px;
  border: 0;
  background: var(--color-border);
}

.ep-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: .25rem .5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}
.ep-badge--verified {
  color: var(--ep-light-mint);
  border-color: #216B4B;
  background: #0D2A1D;
}
.ep-badge--warning {
  color: var(--ep-warning);
  border-color: #6A5425;
  background: #2C2412;
}
.ep-badge--danger {
  color: var(--ep-danger);
  border-color: #6D3036;
  background: #2D1518;
}

.ep-chat-bubble {
  max-width: min(82%, 36rem);
  padding: .75rem .875rem;
  border-radius: 1.125rem;
  overflow-wrap: anywhere;
}
.ep-chat-bubble--incoming {
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: .375rem;
}
.ep-chat-bubble--outgoing {
  color: #031B10;
  background: var(--gradient-primary);
  border-bottom-right-radius: .375rem;
}

.ep-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: currentColor;
  flex: 0 0 auto;
}
.ep-icon--active { color: var(--ep-mint); }
.ep-icon--danger { color: var(--ep-danger); }

.ep-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--space-2);
  padding: var(--space-2);
  background: #0B1D14;
  border-top: 1px solid var(--color-border);
}
.ep-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  min-width: 48px;
  min-height: 48px;
  padding: .375rem;
  color: var(--color-text-muted);
  background: transparent;
  font-size: var(--text-xs);
}
.ep-nav__item[aria-current="page"] { color: var(--ep-mint); }

.ep-security-warning {
  padding: var(--space-4);
  color: var(--ep-warning);
  background: #2C2412;
  border: 1px solid #6A5425;
  border-radius: var(--radius-lg);
}

.ep-danger-zone {
  padding: var(--space-4);
  border: 1px solid #6D3036;
  border-radius: var(--radius-lg);
  background: #211216;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (min-width: 768px) {
  .ep-container { width: min(100% - 3rem, 72rem); }
}

@media (forced-colors: active) {
  .ep-button, .ep-input, .ep-surface, .ep-card {
    border: 1px solid CanvasText;
  }
}