/* Synced from the NuHabits application repo by tool/brand_sync.py.
   Generated there from the Illustrator source. Do not hand-edit:
   change design/brand/ there, regenerate, and run make brand-sync. */
/* NuHabits brand tokens — generated from design/brand/tokens.json.
   Source of truth: nu-habits-logo-final_all.pdf (Illustrator vector).
   Regenerate, don't hand-edit. */

:root {
  /* --- raw palette --- */
  --nu-sky-50: #EEF9FA;
  --nu-sky-100: #DFF4F6;
  --nu-sky-200: #C1E9ED;
  --nu-sky-300: #9CDBE2;
  --nu-sky-400: #6FCBD4;
  --nu-sky-500: #3EBAC6;
  --nu-sky-600: #319AA5;
  --nu-sky-700: #267880;
  --nu-sky-800: #1C585E;
  --nu-sky-900: #133C40;

  --nu-lagoon-50: #EEFAF9;
  --nu-lagoon-100: #DFF5F4;
  --nu-lagoon-200: #C1ECEA;
  --nu-lagoon-300: #9CE1DE;
  --nu-lagoon-400: #6FD3CE;
  --nu-lagoon-500: #3EC4BE;
  --nu-lagoon-600: #32A29D;
  --nu-lagoon-700: #277E7B;
  --nu-lagoon-800: #1C5D5A;
  --nu-lagoon-900: #133F3D;

  --nu-electric-50: #E6FDFF;
  --nu-electric-100: #CFFBFF;
  --nu-electric-200: #A1F7FF;
  --nu-electric-300: #67F2FF;
  --nu-electric-400: #22ECFF;
  --nu-electric-500: #00C4D6;
  --nu-electric-600: #00A1AF;
  --nu-electric-700: #007D89;
  --nu-electric-800: #005C65;
  --nu-electric-900: #003F44;

  --nu-green-50: #F8FCF5;
  --nu-green-100: #F4FAEF;
  --nu-green-200: #ECF7E4;
  --nu-green-300: #E2F3D7;
  --nu-green-400: #D6EEC6;
  --nu-green-500: #C9E8B4;
  --nu-green-600: #A0D77B;
  --nu-green-700: #77C542;
  --nu-green-800: #57942D;
  --nu-green-900: #3B651F;

  --nu-yellow-50: #FFFDF1;
  --nu-yellow-100: #FFFCE8;
  --nu-yellow-200: #FFFAD6;
  --nu-yellow-300: #FFF8C0;
  --nu-yellow-400: #FFF4A6;
  --nu-yellow-500: #FFF189;
  --nu-yellow-600: #FFE942;
  --nu-yellow-700: #FBDD00;
  --nu-yellow-800: #B8A200;
  --nu-yellow-900: #7D6F00;

  --nu-navy-50: #E3F4FA;
  --nu-navy-100: #C7EAF6;
  --nu-navy-200: #8FD4ED;
  --nu-navy-300: #48BAE1;
  --nu-navy-400: #1C86AB;
  --nu-navy-500: #0D3E4F;
  --nu-navy-600: #0B3341;
  --nu-navy-700: #082833;
  --nu-navy-800: #061D25;
  --nu-navy-900: #041419;

  --nu-neutral-0: #FFFFFF;
  --nu-neutral-50: #F8F9FA;
  --nu-neutral-100: #F2F4F5;
  --nu-neutral-200: #E5EAEB;
  --nu-neutral-300: #D0D9DC;
  --nu-neutral-400: #A2B3B9;
  --nu-neutral-500: #768F98;
  --nu-neutral-600: #5C727A;
  --nu-neutral-700: #44545A;
  --nu-neutral-800: #2C363A;
  --nu-neutral-900: #1A2123;
  --nu-neutral-950: #0F1314;

  /* --- semantic: light theme --- */
  --nu-bg:            var(--nu-neutral-0);
  --nu-bg-subtle:     var(--nu-neutral-50);
  --nu-bg-sunken:     var(--nu-neutral-100);
  --nu-surface:       var(--nu-neutral-0);
  --nu-border:        var(--nu-neutral-200);
  --nu-border-strong: var(--nu-neutral-300);

  --nu-text:          var(--nu-navy-500);   /* 11.5:1 on white */
  --nu-text-muted:    var(--nu-neutral-600);
  --nu-text-subtle:   var(--nu-neutral-500);
  --nu-text-on-brand: var(--nu-navy-500);   /* navy on teal = 4.97:1 */

  --nu-primary:        var(--nu-sky-500);
  --nu-primary-hover:  var(--nu-sky-600);
  --nu-primary-text:   var(--nu-sky-700);   /* 5.2:1 — use for links/labels */
  --nu-primary-subtle: var(--nu-sky-50);

  --nu-accent:         var(--nu-yellow-500); /* fill only — 1.15:1 on white */
  --nu-accent-subtle:  var(--nu-yellow-100);
  --nu-success:        var(--nu-green-700);
  --nu-success-subtle: var(--nu-green-100);

  --nu-radius-sm: 8px;  --nu-radius-md: 14px;
  --nu-radius-lg: 20px; --nu-radius-xl: 28px; --nu-radius-full: 999px;
  --nu-space-1: 4px;  --nu-space-2: 8px;  --nu-space-3: 12px;
  --nu-space-4: 16px; --nu-space-5: 24px; --nu-space-6: 32px; --nu-space-7: 48px;
  --nu-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --- semantic: dark theme --- */
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { 
  --nu-bg: var(--nu-navy-900); --nu-bg-subtle: var(--nu-navy-800);
  --nu-bg-sunken: #071F28; --nu-surface: var(--nu-navy-800);
  --nu-border: rgba(255,255,255,.10); --nu-border-strong: rgba(255,255,255,.18);
  --nu-text: var(--nu-neutral-50); --nu-text-muted: var(--nu-neutral-300);
  --nu-text-subtle: var(--nu-neutral-400); --nu-text-on-brand: var(--nu-navy-900);
  --nu-primary: var(--nu-sky-400); --nu-primary-hover: var(--nu-sky-300);
  --nu-primary-text: var(--nu-sky-300); --nu-primary-subtle: rgba(62,186,198,.14);
  --nu-accent-subtle: rgba(255,241,137,.14);
  --nu-success: var(--nu-green-300); --nu-success-subtle: rgba(201,232,180,.14);
} }
[data-theme='dark'] {
  --nu-bg: var(--nu-navy-900); --nu-bg-subtle: var(--nu-navy-800);
  --nu-bg-sunken: #071F28; --nu-surface: var(--nu-navy-800);
  --nu-border: rgba(255,255,255,.10); --nu-border-strong: rgba(255,255,255,.18);
  --nu-text: var(--nu-neutral-50); --nu-text-muted: var(--nu-neutral-300);
  --nu-text-subtle: var(--nu-neutral-400); --nu-text-on-brand: var(--nu-navy-900);
  --nu-primary: var(--nu-sky-400); --nu-primary-hover: var(--nu-sky-300);
  --nu-primary-text: var(--nu-sky-300); --nu-primary-subtle: rgba(62,186,198,.14);
  --nu-accent-subtle: rgba(255,241,137,.14);
  --nu-success: var(--nu-green-300); --nu-success-subtle: rgba(201,232,180,.14);
}
/* The holding page.
 *
 * Colour, radius, spacing and the typeface all come from tokens.css, which
 * is generated in the NuHabits application repo and synced here. Nothing in
 * this file invents a value the brand does not already define.
 *
 * The page is drawn on the brand navy in both colour schemes rather than
 * following the semantic light/dark tokens. One placeholder screen has no
 * second state worth maintaining, and yellow and green only work on dark,
 * which is where the mark is at its best.
 */

:root {
  --ground: var(--nu-navy-900);
  --ground-glow: var(--nu-navy-500);
  --ink: var(--nu-neutral-0);
  --ink-muted: var(--nu-neutral-300);
  --ink-subtle: var(--nu-neutral-400);
  --link: var(--nu-sky-300);
  --link-hover: var(--nu-sky-200);
  --accent: var(--nu-yellow-500);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--nu-font);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* The same soft wash that sits behind the mark on the social card. It is
 * one gradient on the shell rather than an element, so there is nothing to
 * position and nothing to hide from a screen reader. */
.page-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--nu-space-7) var(--nu-space-5);
  background:
    radial-gradient(
      62rem 34rem at 50% 18%,
      color-mix(in srgb, var(--ground-glow) 46%, transparent),
      transparent 70%
    );
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip-link:focus {
  left: var(--nu-space-4);
  top: var(--nu-space-4);
  z-index: 1;
  padding: var(--nu-space-2) var(--nu-space-4);
  border-radius: var(--nu-radius-sm);
  background: var(--accent);
  color: var(--nu-navy-900);
  font-weight: 500;
  text-decoration: none;
}

.holding {
  width: 100%;
  max-width: 40rem;
  text-align: center;
}

.lockup {
  width: 13rem;
  height: auto;
  margin: 0 auto var(--nu-space-6);
  display: block;
}

.headline {
  margin: 0 0 var(--nu-space-5);
  font-size: clamp(2.25rem, 7vw, 3.25rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.lede {
  margin: 0 auto var(--nu-space-6);
  max-width: 34rem;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.holding-footer {
  margin-top: var(--nu-space-7);
  padding-top: var(--nu-space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9375rem;
}

.holding-footer p {
  margin: 0;
}

.colophon {
  margin-top: var(--nu-space-2);
  color: var(--ink-subtle);
  font-size: 0.8125rem;
}

.textlink {
  color: var(--link);
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
  text-underline-offset: 0.2em;
}

.textlink:hover,
.textlink:focus-visible {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: var(--nu-radius-sm);
}

@media (prefers-reduced-motion: no-preference) {
  .holding > * {
    animation: rise 0.5s ease-out both;
  }

  .lockup { animation-delay: 0ms; }
  .headline { animation-delay: 60ms; }
  .lede { animation-delay: 120ms; }
  .standing { animation-delay: 180ms; }
  .holding-footer { animation-delay: 240ms; }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}