/*
 * Nocturne Amber design tokens, ported from the Sleep marketing site
 * (apps/marketing/src/styles/tokens.css, which in turn mirrors the
 * PWA's theme block). The brand palette is dark first with a warm
 * amber accent. Declarations are byte-identical to the source.
 */

:root {
  color-scheme: dark;

  /* Surface stack. bg-0 is deepest, bg-2 is shallowest. */
  --color-bg-0: #0a0a0a;
  --color-bg-1: #1a1410;
  --color-bg-2: #221a14;

  /* Text. text-1 is the muted secondary used for body and captions.
   * On 2026-06-21 the value was lifted from #a39d97 to #cfc8c0
   * (luminance about 0.36 to about 0.61). The dimmer value passed
   * accessibility math but read as dishwater grey on desktop
   * screenshots. Body copy, FAQ answers, citation takeaways and
   * category taglines were all too soft. text-2 is the genuinely
   * muted slot for fine print. */
  --color-text-0: #f5f1ec;
  --color-text-1: #cfc8c0;
  --color-text-2: #9c958f;

  /* Brand accent plus a slightly desaturated companion for hovers. */
  --color-accent: #d4923a;
  --color-accent-2: #c98d5b;

  /* Type families. Forum, the classical high contrast serif, carries
   * display and headlines. It is self hosted; see the @font-face rules
   * below. Inter carries all body and UI text. */
  --font-serif: "Forum", "Times New Roman", Georgia, serif;
  /* "Inter Fallback" and "Inter Fallback Android" are the metrics
   * matched local faces declared below. They paint instantly while the
   * Inter slices stream in, and the swap causes no layout shift. */
  --font-sans:
    "InterVariable", "Inter Fallback", "Inter Fallback Android",
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Focus ring colour. Slightly brighter amber so it survives on the
   * darkest surface. Used as outline-color on every focusable. */
  --color-focus: #ffb86c;

  /* Type scale, clamp based, mobile to desktop. */
  --type-display: clamp(2.25rem, 1.4rem + 4.2vw, 4.5rem);
  --type-h1: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
  --type-h2: clamp(1.4rem, 1.05rem + 1.6vw, 2.125rem);
  --type-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --type-small: 0.875rem;

  /* Spacing. 4 px base, fluid container. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --container: min(72rem, 100% - 2rem);

  /* Radii and shadows. */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --shadow-card:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-glow:
    0 0 32px rgba(212, 146, 58, 0.25),
    0 0 80px rgba(212, 146, 58, 0.12);

  /* Category accent palette. Mirrors apps/web/src/index.css. */
  --cat-sleep: #5b7da6;
  --cat-nature: #7bc975;
  --cat-frequencies: #d4923a;
  --cat-neurodivergent: #5fb89a;
  --cat-affirmations: #e0a3a7;

  /* Gradient mesh stops for hero and section dressing. */
  --mesh-amber: rgba(212, 146, 58, 0.18);
  --mesh-violet: rgba(91, 125, 166, 0.16);
  --mesh-pink: rgba(224, 163, 167, 0.12);

  /* ===== Motion, the nocturne system =====
   * One calm vocabulary of eases and durations. Every animation pulls
   * from these. No ad hoc cubic beziers scattered across components.
   * Sleep app doctrine: slow, soft, low amplitude.
   *
   * Curves:
   *   --ease-quart  the signature settle (Apple "ease-out quart"), a
   *                 long, gentle deceleration. Entrance reveals and
   *                 hero rise.
   *   --ease-soft   symmetric ease-in-out for two way transitions
   *                 (hovers, accordion, hairlines).
   *   --ease-breath a very soft in-out for ambient loops that should
   *                 feel like inhale and exhale, never a hard sine
   *                 crest.
   */
  --ease-quart: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-breath: cubic-bezier(0.37, 0, 0.63, 1);

  /* Interaction durations (hovers, taps, small state flips). */
  --dur-fast: 200ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;

  /* Reveal durations, deliberately longer than interaction. Reveals
   * should feel like something surfacing, not snapping in. */
  --dur-reveal: 900ms;
  --dur-reveal-lead: 640ms; /* per child step head start for stagger */

  /* Stagger step between children in a grid or list reveal. */
  --stagger-step: 90ms;

  /* Ambient loop periods. Ultra slow, GPU cheap, and they repeat with
   * no visible seam. All of these must be fully STOPPED under
   * prefers-reduced-motion. */
  --loop-stars: 140s; /* star field drift */
  --loop-marquee: 52s; /* feature pill marquee */
  --loop-mesh: 32s; /* gradient mesh breath */
  --loop-cta: 5.4s; /* primary CTA glow breath */
  --loop-breath: 9s; /* the one restful breathing cadence */
}

/*
 * Glue layer. base.css consumes a generic set of token names. This
 * block maps the Nocturne Amber names onto them and adds the few
 * tokens base.css needs that the source palette does not carry.
 */
:root {
  --font-display: var(--font-serif);
  --font-body: var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --color-line: rgba(245, 241, 236, 0.08);
  --prose: 46rem;
  --type-eyebrow: 0.8125rem;
  /* Forum ships a single weight. Synthetic bold smears the strokes, so
   * headings on this site stay at 400 and hierarchy comes from size
   * and colour. */
  --display-weight: 400;
}

/*
 * Self hosted Inter Variable, sliced by unicode-range exactly like
 * Forum below. The old single 344 KB file anchored the LCP chain under
 * ad traffic throttling. A Latin visitor downloads about 70 KB. The
 * tr and pl pages pull the latin-ext slice, ru and uk the cyrillic
 * one. Greek was dropped (no Greek locale). The ja, ko, zh, th, hi, ar
 * and he ranges were never covered by Inter and keep their system font
 * fallbacks. Slices keep both variable axes (opsz 14-32, wght 100-900)
 * and the layout features the site uses (ss01, ss02, cv11, tnum plus
 * defaults). Filenames carry a content hash. Regenerate via fonttools
 * pyftsubset and rename on any change so the immutable /fonts/ cache
 * rolls.
 */
@font-face {
  font-family: "InterVariable";
  src: url("/fonts/Inter-latin.98a6bbd4.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "InterVariable";
  src: url("/fonts/Inter-latin-ext.4874654b.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "InterVariable";
  src: url("/fonts/Inter-cyrillic.2de997b1.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/*
 * Metrics matched local fallbacks so text paints IMMEDIATELY in a
 * system face and the swap to Inter causes zero layout shift. The
 * override numbers derive from Inter's real vertical metrics
 * (ascent 1984, descent 494, upm 2048, giving 96.875% and 24.121%)
 * divided by the size-adjust that equalises average glyph width
 * against each fallback (Arial 107.40%, Roboto 107.28%, the same
 * pairing next/font ships for Inter). Arial covers iOS, macOS and
 * Windows. Roboto covers Android. Referenced by --font-sans above.
 */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.46%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback Android";
  src: local("Roboto");
  size-adjust: 107.28%;
  ascent-override: 90.3%;
  descent-override: 22.49%;
  line-gap-override: 0%;
}

/*
 * Forum, the self hosted classical serif for display and headlines.
 * Single weight (400). Hierarchy comes from size and colour, never
 * synthetic bold. Split into unicode-range subsets so a Latin visitor
 * downloads about 24 KB, not the whole face. No Google Fonts CDN,
 * first party only, matching the site's no third party ethos.
 */
@font-face {
  font-family: "Forum";
  src: url("/fonts/Forum-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Forum";
  src: url("/fonts/Forum-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Forum";
  src: url("/fonts/Forum-cyrillic.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/*
 * Aviana dressing. The two site specific pieces base.css does not
 * carry: the hero gradient mesh and the category dot.
 */

.hero-mesh {
  position: relative;
  background-image:
    radial-gradient(60rem 34rem at 12% 8%, var(--mesh-amber), transparent 62%),
    radial-gradient(52rem 30rem at 88% 0%, var(--mesh-violet), transparent 60%),
    radial-gradient(44rem 26rem at 50% 96%, var(--mesh-pink), transparent 66%);
  background-repeat: no-repeat;
}

/* The dot colour arrives from an inline style on the element, for
   example style="--cat: var(--cat-nature)". It falls back to the
   brand accent when no category is set. */
.cat-dot {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--cat, var(--color-accent));
  flex: none;
}