/* Our Note — ournote.net
   The palette is the app's own palette, lifted from Theme/OurNoteTheme.swift
   rather than picked again here, so the site and the app cannot drift apart.
   Violet is appPrimary, pink is appSecondary, blue is appAccent.

   Light is the default: :root carries the light values, and dark is an
   override. That is the opposite of scratchd.net, and deliberate. theme.js
   always stamps data-theme, so :root alone only shows with JavaScript off.

   The neutrals are tinted violet rather than grey, the way scratchd.net runs
   warm and carddle.net runs teal. Violet is this app's own colour, so the page
   should be violet the way the icon is. The brand values themselves are still
   the app's exact tokens; only the greys have been pulled toward them.

   A dark violet has to keep red clearly above green or it composites back to
   navy and reads as a cold grey. #14101c is hue 262, not 230. */

:root {
  color-scheme: light;

  --bg:        #f8f7ff;
  --card:      #ffffff;
  --surface:   #ece7ff;
  --text:      #2d2d3a;
  --muted:     #6a6a78;
  --faint:     #736f85;
  --line:      #e0daf5;
  --line-soft: rgba(94, 78, 168, 0.13);

  --violet: #6c63ff;
  --pink:   #e0457b;
  --blue:   #1573c4;
  --green:  #3e9b42;

  --link:      #5b52e8;
  --nav-bg:    rgba(248, 247, 255, 0.85);
  --btn-bg:    #6c63ff;
  --btn-fg:    #ffffff;
  --btn-hover: #574fe0;
  --wash:      rgba(108, 99, 255, 0.05);
  --shadow:    0 8px 26px rgba(45, 40, 90, 0.09);
  --shadow-lg: 0 18px 46px rgba(45, 40, 90, 0.14);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, sans-serif;
  --measure: 62ch;
  --pad: clamp(20px, 5vw, 40px);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #14101c;
  --card:      #1e1929;
  --surface:   #292236;
  --text:      #f2f2f7;
  --muted:     #a3a3b0;
  --faint:     #8d88a0;
  --line:      #38304a;
  --line-soft: rgba(178, 170, 255, 0.11);

  --violet: #8b85ff;
  --pink:   #ff8fb5;
  --blue:   #64b5f6;
  --green:  #81c784;

  --link:      #a49fff;
  --nav-bg:    rgba(18, 19, 27, 0.82);
  --btn-bg:    #8b85ff;
  --btn-fg:    #14141c;
  --btn-hover: #a49fff;
  --wash:      rgba(139, 133, 255, 0.08);
  --shadow:    0 8px 26px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 46px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { width: min(1040px, 100% - (var(--pad) * 2)); margin-inline: auto; }
.narrow { width: min(720px, 100% - (var(--pad) * 2)); margin-inline: auto; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 { line-height: 1.16; letter-spacing: -0.021em; margin: 0; }
h1 { font-size: clamp(34px, 5.4vw, 54px); font-weight: 700; }
h2 { font-size: clamp(25px, 3.4vw, 34px); font-weight: 650; }
h3 { font-size: 19px; font-weight: 620; }
p  { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--nav-bg);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner { display: flex; align-items: center; gap: 18px; height: 58px; }
.nav-home { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; font-weight: 620; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 15px; }
.nav-links a { color: var(--muted); text-decoration: none; }
.nav-links a:hover { color: var(--text); }
@media (max-width: 700px) { .nav-links .optional { display: none; } }

/* ---------- hero ---------- */

.hero { padding: clamp(48px, 9vw, 96px) 0 clamp(36px, 6vw, 64px); text-align: center; }
.hero .wrap { max-width: 780px; }
.app-icon {
  width: 92px; height: 92px; border-radius: 21px;
  box-shadow: var(--shadow-lg); margin-bottom: 22px;
}
.wordmark {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 12px;
}
.hero-sub {
  font-size: clamp(17px, 2.1vw, 20px); color: var(--muted);
  margin: 20px auto 0; max-width: 56ch;
}
.hero-sub strong { color: var(--text); font-weight: 600; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 11px;
  font-size: 16px; font-weight: 580; text-decoration: none;
  background: var(--btn-bg); color: var(--btn-fg);
  transition: background 0.15s ease;
}
.btn:hover { background: var(--btn-hover); }
.btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--line); box-shadow: none;
}
.btn-ghost:hover { background: var(--wash); }

/* Sits between the buttons and the availability pill, the way scratchd.net
   puts its price under the store badge. */
.price-note {
  margin: 16px 0 0;
  font-size: 15.5px;
  color: var(--muted);
}

.status {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 26px; padding: 7px 15px 7px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 14.5px; color: var(--muted); background: var(--card);
}
.status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--violet); flex: none;
}

/* ---------- sections ---------- */

.section { padding: clamp(44px, 7vw, 78px) 0; border-top: 1px solid var(--line-soft); }
.section:first-of-type { border-top: 0; }
.section h2 + p { margin-top: 14px; }
.section .narrow > p { color: var(--muted); max-width: var(--measure); }
.section .narrow > p strong { color: var(--text); font-weight: 600; }

.lede { font-size: 18.5px; }

.cards {
  display: grid; gap: 16px; margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 15px; padding: 20px; box-shadow: var(--shadow);
}
.card h3 { margin-bottom: 7px; }
.card p { font-size: 15.5px; color: var(--muted); margin: 0; }
.card .tag {
  display: inline-block; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 10px;
}
.t-violet { color: var(--violet); }
.t-pink   { color: var(--pink); }
.t-blue   { color: var(--blue); }
.t-green  { color: var(--green); }

/* ---------- mood grid ---------- */

.moods {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px;
  margin-top: 28px; max-width: 520px;
}
@media (max-width: 620px) { .moods { grid-template-columns: repeat(4, 1fr); } }
.mood {
  aspect-ratio: 1; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; font-size: 22px; line-height: 1;
}
.mood-note { margin-top: 14px; font-size: 15px; color: var(--faint); }

/* ---------- facts list ---------- */

.facts { list-style: none; margin: 26px 0 0; padding: 0; }
.facts li {
  padding: 14px 0; border-top: 1px solid var(--line-soft);
  display: grid; grid-template-columns: 190px 1fr; gap: 20px;
  font-size: 16px;
}
.facts li:last-child { border-bottom: 1px solid var(--line-soft); }
.facts dt, .facts b { font-weight: 600; }
.facts span { color: var(--muted); }
@media (max-width: 640px) {
  .facts li { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- footer ---------- */

.footer { border-top: 1px solid var(--line); padding: 40px 0 56px; font-size: 15px; }
.footer-top { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; }
.footer-tag { font-weight: 600; margin-bottom: 4px; }
.footer-plat { color: var(--faint); margin: 0; font-size: 14.5px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--text); }
.footer-note { margin-top: 22px; color: var(--faint); font-size: 14px; max-width: var(--measure); }

/* ---------- theme switch ---------- */

.theme-switch { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface); border-radius: 9px; }
.theme-switch button {
  display: grid; place-items: center; width: 27px; height: 25px;
  border: 0; border-radius: 7px; background: transparent;
  color: var(--faint); cursor: pointer; padding: 0;
}
.theme-switch button svg { width: 15px; height: 15px; }
.theme-switch button[aria-checked="true"] { background: var(--card); color: var(--text); box-shadow: var(--shadow); }

/* ---------- document pages ---------- */

.doc { padding: clamp(40px, 6vw, 72px) 0 72px; }
.doc h1 { font-size: clamp(29px, 4vw, 40px); margin-bottom: 8px; }
.doc .updated { color: var(--faint); font-size: 14.5px; margin-bottom: 34px; }
.doc h2 { font-size: 22px; margin: 38px 0 10px; }
.doc p, .doc li { color: var(--muted); max-width: var(--measure); }
.doc li { margin-bottom: 8px; }