/* ==========================================================================
   MovoCompose legal site — movo.css

   Visual values mirror movocompose_flutter/lib/core/design/tokens.dart so the
   legal pages read as the same product as the app: same accent scale, same
   glass recipe, same 4px spacing rhythm and the same radii.

   Dark-first: :root holds the dark tokens (AppColors.dark), the
   prefers-color-scheme: light block overrides them (AppColors.light).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Accent scale — Accent.accent100 … accent900 */
  --accent-100: #f0ebff;
  --accent-300: #c3a9ff;
  --accent-400: #a27bff;
  --accent-600: #5e34eb;
  --accent-700: #4b28c2;
  --accent-800: #3a2099;

  /* Surfaces — AppColors.dark */
  --bg: #000000;
  --surface-1: #0d0a14;
  --surface-2: #151021;
  --surface-3: #1e1730;

  /* Text — AppColors.dark */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-tertiary: rgba(255, 255, 255, 0.5);
  --text-on-accent: #ffffff;
  --text-accent: var(--accent-300);

  /* Status */
  --success: #30d158;
  --error: #ff453a;
  --warning: #ffb020;

  /* Glass — GlassPreset.regular over the dark substrate */
  --glass-fill: rgba(255, 255, 255, 0.08);
  --glass-fill-prominent: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-border-prominent: rgba(255, 255, 255, 0.14);
  --glass-blur: 18px;
  --glass-blur-prominent: 28px;

  /* Spacing — AppSpacing (4px base) */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-xxl: 48px;

  /* Radii — AppRadii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 9999px;

  /* Motion — AppMotion */
  --dur-fast: 150ms;
  --dur-standard: 250ms;
  --ease-out-soft: cubic-bezier(0.215, 0.61, 0.355, 1);

  /* Layout */
  --measure: 760px;
  --gutter: 24px;

  /* CTA gradient — Accent.ctaGradient */
  --cta-gradient: linear-gradient(
    180deg,
    var(--accent-400),
    var(--accent-600),
    var(--accent-800)
  );

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    /* Surfaces — AppColors.light */
    --bg: #ffffff;
    --surface-1: #f7f5fb;
    --surface-2: #f1edf9;
    --surface-3: #e9e4f5;

    /* Text — AppColors.light */
    --text-primary: #0b0b0f;
    --text-secondary: rgba(11, 11, 15, 0.7);
    --text-tertiary: rgba(11, 11, 15, 0.5);
    --text-accent: var(--accent-700);

    --success: #1f9d45;
    --error: #d32f2f;
    --warning: #b26a00;

    /* Frosted glass over a light page. A translucent *white* veil is useless
       here: it composites to pure white on the white --bg, and the accent wash
       behind it has faded out by the time it reaches the 760px content column,
       so blur() has nothing to blur. Tinting the veil with the app's own light
       surfaces (--surface-1/-2, the same ones AppColors.light uses) keeps the
       glass idiom while giving cards a body that separates from the page. */
    --glass-fill: rgba(247, 245, 251, 0.78);
    --glass-fill-prominent: rgba(241, 237, 249, 0.9);
    --glass-border: rgba(11, 11, 15, 0.12);
    --glass-border-prominent: rgba(11, 11, 15, 0.16);

    color-scheme: light;
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* clear the sticky header on anchor jumps */
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  /* A faint accent wash behind the glass, so blur() has something to blur. */
  background-image:
    radial-gradient(
      60rem 40rem at 85% -10%,
      color-mix(in srgb, var(--accent-600) 22%, transparent),
      transparent 70%
    ),
    radial-gradient(
      50rem 35rem at -10% 20%,
      color-mix(in srgb, var(--accent-800) 20%, transparent),
      transparent 70%
    );
  background-attachment: fixed;
  color: var(--text-primary);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--sp-xl) var(--gutter) var(--sp-xxl);
}

h1,
h2,
h3 {
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

h1 {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.6rem);
  margin-bottom: var(--sp-sm);
}

h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: var(--sp-xl) 0 var(--sp-sm);
}

h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: var(--sp-lg) 0 var(--sp-xs);
}

p {
  margin: 0 0 var(--sp-md);
  color: var(--text-secondary);
}

strong {
  color: var(--text-primary);
  font-weight: 600;
}

a {
  color: var(--text-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out-soft);
}

a:hover {
  color: var(--accent-400);
}

ul,
ol {
  margin: 0 0 var(--sp-md);
  padding-left: var(--sp-lg);
  color: var(--text-secondary);
}

li {
  margin-bottom: var(--sp-sm);
}

li::marker {
  color: var(--text-accent);
}

hr {
  border: 0;
  border-top: 1px solid var(--glass-border);
  margin: var(--sp-xl) 0;
}

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.875em;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
}

/* Keyboard/screen-reader focus must be unmistakable on glass. */
:focus-visible {
  outline: 2px solid var(--text-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   3. Skip link
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--sp-md);
  top: -100px;
  z-index: 10;
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--r-pill);
  background: var(--accent-600);
  color: var(--text-on-accent);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease-out-soft);
}

.skip-link:focus {
  top: var(--sp-md);
  color: var(--text-on-accent);
}

/* --------------------------------------------------------------------------
   4. Header + navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--glass-fill-prominent);
  -webkit-backdrop-filter: blur(var(--glass-blur-prominent));
  backdrop-filter: blur(var(--glass-blur-prominent));
  border-bottom: 1px solid var(--glass-border);
}

.site-header__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--sp-md) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-md);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  margin-right: auto;
}

.wordmark:hover {
  color: var(--text-primary);
}

.wordmark svg {
  flex: none;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: inline-block;
  padding: var(--sp-sm) var(--sp-md);
  /* 44px minimum target without inflating the visual pill. */
  min-height: 44px;
  line-height: 28px;
  border-radius: var(--r-pill);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  transition:
    background-color var(--dur-fast) var(--ease-out-soft),
    color var(--dur-fast) var(--ease-out-soft);
}

.site-nav a:hover {
  background: var(--glass-fill);
  color: var(--text-primary);
}

.site-nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--accent-600) 18%, transparent);
  color: var(--text-accent);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Cards, notices, buttons
   -------------------------------------------------------------------------- */
.card {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
  margin-bottom: var(--sp-md);
}

.card--prominent {
  background: var(--glass-fill-prominent);
  -webkit-backdrop-filter: blur(var(--glass-blur-prominent));
  backdrop-filter: blur(var(--glass-blur-prominent));
  border-color: var(--glass-border-prominent);
  border-radius: var(--r-xl);
  padding: var(--sp-xl);
}

.card > :last-child,
.card--prominent > :last-child {
  margin-bottom: 0;
}

/* The draft banner every page carries: nobody should mistake this copy for a
   reviewed legal document. */
.notice {
  display: flex;
  gap: var(--sp-md);
  align-items: flex-start;
  border-radius: var(--r-lg);
  padding: var(--sp-md) var(--sp-lg);
  margin-bottom: var(--sp-xl);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  color: var(--text-primary);
}

.notice svg {
  flex: none;
  margin-top: 3px;
  color: var(--warning);
}

.notice p {
  margin: 0;
  font-size: 0.9375rem;
}

.eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-md);
  padding: var(--sp-xs) var(--sp-md);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent-600) 16%, transparent);
  color: var(--text-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.lede {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  margin-bottom: var(--sp-xl);
}

.button {
  display: inline-block;
  padding: var(--sp-sm) var(--sp-lg);
  min-height: 44px;
  line-height: 28px;
  border-radius: var(--r-pill);
  background-image: var(--cta-gradient);
  color: var(--text-on-accent);
  font-weight: 600;
  text-decoration: none;
  transition:
    filter var(--dur-fast) var(--ease-out-soft),
    transform var(--dur-fast) var(--ease-out-soft);
}

.button:hover {
  filter: brightness(1.08);
  color: var(--text-on-accent);
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

.button--ghost {
  background-image: none;
  background-color: var(--glass-fill);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
}

.button--ghost:hover {
  color: var(--text-primary);
  background-color: var(--glass-fill-prominent);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
}

/* --------------------------------------------------------------------------
   6. Hub tiles (index.html) and definition lists
   -------------------------------------------------------------------------- */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
  margin: var(--sp-lg) 0;
}

@media (min-width: 640px) {
  .tile-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding: var(--sp-lg);
  border-radius: var(--r-lg);
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease-out-soft),
    transform var(--dur-fast) var(--ease-out-soft),
    background-color var(--dur-fast) var(--ease-out-soft);
}

.tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent-600) 55%, transparent);
  background: var(--glass-fill-prominent);
}

.tile h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.tile p {
  margin: 0;
  font-size: 0.9375rem;
}

dl {
  margin: 0 0 var(--sp-md);
}

dt {
  font-weight: 600;
  color: var(--text-primary);
  margin-top: var(--sp-md);
}

dd {
  margin: var(--sp-xs) 0 0;
  color: var(--text-secondary);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--sp-md);
  font-size: 0.9375rem;
}

caption {
  text-align: left;
  color: var(--text-tertiary);
  font-size: 0.875rem;
  padding-bottom: var(--sp-sm);
}

th,
td {
  text-align: left;
  padding: var(--sp-sm) var(--sp-sm);
  border-bottom: 1px solid var(--glass-border);
  color: var(--text-secondary);
  vertical-align: top;
}

th {
  color: var(--text-primary);
  font-weight: 600;
}

.pill {
  display: inline-block;
  padding: 2px var(--sp-sm);
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent-600) 18%, transparent);
  color: var(--text-accent);
}

.pill--planned {
  background: var(--glass-fill);
  color: var(--text-tertiary);
}

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  flex: none;
  border-top: 1px solid var(--glass-border);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

.site-footer__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--sp-lg) var(--gutter) var(--sp-xl);
  font-size: 0.875rem;
  color: var(--text-tertiary);
}

.site-footer p {
  margin: 0 0 var(--sp-sm);
  color: var(--text-tertiary);
  font-size: 0.875rem;
}

.site-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  list-style: none;
  margin: 0 0 var(--sp-md);
  padding: 0;
}

.site-footer nav a {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   8. Narrow screens
   -------------------------------------------------------------------------- */
@media (max-width: 520px) {
  :root {
    --gutter: 16px;
  }

  .site-header__inner {
    padding: var(--sp-sm) var(--gutter);
  }

  .wordmark {
    margin-right: 0;
    width: 100%;
  }

  .site-nav ul {
    gap: 0;
  }

  .site-nav a {
    padding: var(--sp-sm) var(--sp-sm);
  }

  main {
    padding-top: var(--sp-lg);
  }

  .card--prominent {
    padding: var(--sp-lg);
  }

  /* Wide tables (the provider list) scroll instead of breaking the column. */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --------------------------------------------------------------------------
   9. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .tile:hover,
  .button:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   10. Print — legal documents get printed and filed
   -------------------------------------------------------------------------- */
@media print {
  body {
    background: #fff;
    color: #000;
  }

  .site-header,
  .site-footer,
  .skip-link,
  .button-row {
    display: none;
  }

  main {
    max-width: none;
    padding: 0;
  }

  .card,
  .card--prominent,
  .notice {
    background: none;
    border-color: #ccc;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  p,
  li,
  dd {
    color: #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}