/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #fbfaf9;
  --surface: #ffffff;
  --surface-2: #f3f0ec;
  --border: #e3ddd3;
  --border-strong: #cbc2b2;
  --ink: #1c1912;
  --muted: #6b6255;
  --accent: #5b21b6;
  --accent-hover: #4c1d95;
  --accent-ink: #ffffff;
  --accent-text: #5b21b6;
  --accent-strong: #4c1d95;
  --accent-soft: #efe7fc;
  --accent-border: #c9b6ef;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfebe2;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e6dc;
  --warning-strong: #a64c08;
  --danger: #be123c;
  --danger-ink: #ffffff;
  --danger-soft: #f4dee2;
  --danger-strong: #be123c;
  --chart-1: #5b21b6;
  --chart-2: #d97706;
  --chart-3: #0f766e;
  --chart-4: #be123c;
  --chart-5: #1d4ed8;
  --chart-6: #7c3aed;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 600;
  --display-tracking: -0.03em;
  --eyebrow-tracking: 0.14em;
  --radius-card: 18px;
  --radius-btn: 999px;
  --radius-input: 12px;
  --x-band: #1c1428;
  --x-band-ink: #f6f1ff;
  --x-band-muted: #bcaee0;
  --x-band-surface: #291c3c;
  --x-band-border: #40315c;
}

html[data-theme="dark"] {
  --canvas: #090312;
  --surface: #221c2a;
  --surface-2: #15101e;
  --border: #2b2633;
  --border-strong: #534f59;
  --ink: #fbfaf9;
  --muted: #9a979d;
  --accent: #5b21b6;
  --accent-hover: #7442c1;
  --accent-ink: #ffffff;
  --accent-text: #9b79d3;
  --accent-strong: #926dcf;
  --accent-soft: #1b0a36;
  --accent-border: #2e115c;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #0c1f1b;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2f1510;
  --warning-strong: #c57a40;
  --danger: #be123c;
  --danger-ink: #ffffff;
  --danger-soft: #31061b;
  --danger-strong: #d4637e;
  --chart-1: #7b4ddf;
  --chart-2: #e54498;
  --chart-3: #c36107;
  --chart-4: #898e00;
  --chart-5: #1f957a;
  --chart-6: #0e96ca;
}

/* app.css — Fernmail landing page */

.fm-noise {
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--x-band-ink) 8%, transparent) 1px, transparent 0);
  background-size: 22px 22px;
}

.fm-glow {
  background: radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%);
}

[data-inview] {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-inview="up"] { transform: translateY(28px); opacity: 0.001; }
[data-inview="up"].fm-in { transform: translateY(0); opacity: 1; }

html.reduced-motion [data-inview] {
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.fm-marquee-track {
  animation: fm-marquee 28s linear infinite;
}
html.reduced-motion .fm-marquee-track {
  animation: none;
}
@keyframes fm-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}