/* Veil marketing site: the one type and button scale.
 *
 * This file is the single source for heading sizes, the body reading role,
 * the link color and the two store-button treatments on www.veilsleep.app.
 * Pages link it before their own <style> block, so a page rule of equal
 * specificity still wins when a page deliberately overrides something; the
 * scripts/check-sell-page-seo.mjs type check fails any page that declares its
 * own h1 size, body size or store-button fill, unless the page and selector
 * are listed with a reason in docs/site-type-exceptions.json.
 *
 * The native app's design system (src/theme) is separate and stays separate.
 * Dark only, system fonts, no new shadows.
 */
:root {
  --site-font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* Ink. Secondary is the reading color for paragraphs; primary carries
     headings, UI labels and emphasis. */
  --site-text-primary: #F4F3FB;
  --site-text-secondary: #AAA8BE;
  --site-link: #B8A8FF;
  --site-link-underline: rgba(184, 168, 255, 0.4);

  /* Type scale. One body role; headings clamp between phone and desktop. */
  --site-body-size: 17px;
  --site-body-line: 1.75;
  --site-meta-size: 14px;
  --site-label-size: 12px;
  --site-h1-size: clamp(30px, 2.6vw + 20px, 40px);
  --site-h1-weight: 300;
  --site-h1-line: 1.15;
  --site-h1-tracking: -0.02em;
  --site-h2-size: clamp(24px, 1vw + 20px, 26px);
  --site-h2-weight: 500;
  --site-h2-line: 1.25;
  --site-h2-tracking: -0.015em;
  --site-h3-size: 20px;
  --site-h3-weight: 600;
  --site-h3-line: 1.35;
  /* The home hero is the one display-size headline on the site. */
  --site-display-size: clamp(40px, 7vw, 72px);
  --site-display-line: 1.05;
  --site-display-tracking: -0.02em;

  /* Buttons. One filled store action (lilac with dark ink) and one ghost. */
  --site-action: #B8A8FF;
  --site-on-action: #08080F;
  --site-action-hover: #F4F3FB;
  --site-ghost-bg: #1A1A24;
  --site-ghost-border: #2A2A38;
  --site-ghost-ink: #F4F3FB;
  --site-radius: 14px;
}

body {
  font-family: var(--site-font);
  font-size: var(--site-body-size);
  line-height: var(--site-body-line);
  color: var(--site-text-primary);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: var(--site-h1-size);
  font-weight: var(--site-h1-weight);
  line-height: var(--site-h1-line);
  letter-spacing: var(--site-h1-tracking);
  color: var(--site-text-primary);
  text-wrap: balance;
}
h2 {
  font-size: var(--site-h2-size);
  font-weight: var(--site-h2-weight);
  line-height: var(--site-h2-line);
  letter-spacing: var(--site-h2-tracking);
  color: var(--site-text-primary);
  text-wrap: balance;
}
h3 {
  font-size: var(--site-h3-size);
  font-weight: var(--site-h3-weight);
  line-height: var(--site-h3-line);
  color: var(--site-text-primary);
}
h1 strong, h2 strong, h3 strong { font-weight: 600; }

/* Reading text. Pages set margins and widths; the role comes from here.
   Zero specificity on purpose: a page's own label, byline or eyebrow color
   must still win. */
:where(.article, .prose, .content) :where(p, li) {
  color: var(--site-text-secondary);
}

/* Links: one color everywhere. Prose links (anchors without a class) underline
   quietly and brighten on hover. Anything with a class is a component, such as
   a button or a card, and keeps its own ink. */
a {
  color: var(--site-link);
  text-decoration-color: var(--site-link-underline);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }
:where(.article, .prose, .content, .faq-answer, .blog-cta p, .resource-notes) a:not([class]) {
  color: var(--site-link);
  text-decoration: underline;
  text-decoration-color: var(--site-link-underline);
  text-underline-offset: 3px;
  border-bottom: 0;
}
:where(.article, .prose, .content, .faq-answer, .blog-cta p, .resource-notes) a:not([class]):hover {
  text-decoration-color: currentColor;
}
/* Related-reading and resource-index lists keep their secondary ink from
   article-navigation.css and get a quiet underline as the link cue. */
.article-related a:not([class]), .article-resource-index a:not([class]) {
  text-decoration: underline;
  text-decoration-color: var(--site-ghost-border);
  text-underline-offset: 4px;
}
.article-related a:not([class]):hover, .article-resource-index a:not([class]):hover {
  text-decoration-color: currentColor;
}

/* Buttons. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--site-radius);
  font-family: var(--site-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { opacity: 0.8; transform: translateY(-1px); text-decoration: none; }
.btn:active { opacity: 1; transform: translateY(0); }
.btn-ghost {
  background: transparent;
  color: var(--site-text-secondary);
  padding: 10px 16px;
}
.btn-ghost:hover, .btn-ghost:focus-visible { color: var(--site-text-primary); }

/* The filled store action. Every button that leads to a store or the on-page
   download area uses this fill, whatever its class history. */
.btn-primary,
.article .btn-primary,
.download-actions a.btn-primary,
.cta-primary,
.article a.cta-primary,
.np-cta-btn[data-player-store],
nav .nav-actions .btn-primary,
nav .player-get-app,
nav .article-get-app {
  background: var(--site-action);
  color: var(--site-on-action);
  border: 1px solid var(--site-action);
  font-weight: 600;
  text-decoration: none;
}
.btn-primary:hover, .btn-primary:focus-visible,
.cta-primary:hover, .cta-primary:focus-visible,
.article a.cta-primary:hover,
.np-cta-btn[data-player-store]:hover,
nav .nav-actions .btn-primary:hover,
nav .player-get-app:hover,
nav .article-get-app:hover {
  opacity: 1;
  background: var(--site-action-hover);
  border-color: var(--site-action-hover);
  color: var(--site-on-action);
  text-decoration: none;
}
.cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 14px 24px;
  border-radius: var(--site-radius);
  font-size: 15px;
  line-height: 1.5;
}

/* The ghost button: a quiet surface with a border, primary ink. Used for the
   second store on a page and for store badges beside a filled action. */
.btn-secondary,
.np-cta-btn,
.store-btn,
:where(.download-actions, .stores, .listen-links) a:not([class]) {
  background: var(--site-ghost-bg);
  color: var(--site-ghost-ink);
  border: 1px solid var(--site-ghost-border);
  text-decoration: none;
}
.np-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: var(--site-radius);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.np-cta-btn:hover { border-color: var(--tint, var(--site-link)); }
.btn-secondary:hover, .store-btn:hover, :where(.download-actions, .stores, .listen-links) a:not([class]):hover {
  border-color: var(--site-link);
}

/* The updated-date line under a byline or title (2026-10-17), written by
   scripts/localize/lib/updated-date.mjs from the sitemap lastmod. Doubled
   class so a page's own paragraph rules (lede, article p) do not restyle it. */
p.page-updated.page-updated {
  margin: 4px 0 20px;
  max-width: none;
  font-size: var(--site-meta-size);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--site-text-secondary);
}