/* Shared styles for the intention pages, taken from nickgascoigne.com's own tokens
   (src/styles/global.css). Fonts are self-hosted in ./fonts so nothing loads from a
   third party, which keeps "this page sends nothing" true. */
@import url("fonts/fonts.css");

:root {
  color-scheme: light;
  --prussian-950: hsl(207, 100%, 5%);
  --prussian-800: hsl(207, 100%, 12%);
  --prussian-700: hsl(207, 100%, 16%);
  --prussian-600: hsl(207, 90%, 22%);
  --prussian-400: hsl(207, 70%, 42%);
  --prussian-200: hsl(207, 55%, 70%);
  --prussian-100: hsl(207, 50%, 83%);
  --paper-50:  hsl(40, 60%, 98%);
  --paper-100: hsl(38, 55%, 95%);
  --paper-300: hsl(34, 45%, 78%);

  --color-bg:             var(--paper-50);
  --color-surface:        var(--paper-100);
  --color-border:         var(--paper-300);
  --color-text:           var(--prussian-800);
  --color-text-secondary: var(--prussian-600);
  --color-text-muted:     var(--prussian-400);
  --color-accent:         var(--prussian-700);
  --color-accent-hover:   var(--prussian-600);
  --color-on-accent:      var(--paper-50);

  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans:  'Mulish', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;

  --text-xs: 0.702rem; --text-sm: 0.790rem; --text-base: 1rem; --text-md: 1.125rem;
  --text-lg: 1.266rem; --text-2xl: 1.602rem; --text-3xl: 1.802rem; --text-4xl: 2.027rem;
  --tracking-tight: -0.02em; --tracking-wide: 0.05em; --tracking-wider: 0.1em;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;
  --container-prose: 42rem;
  --radius: 4px;
}

/* The Sage variant keeps its dark ground, drawn from the same Prussian range. */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg:             var(--prussian-950);
  --color-surface:        hsl(207, 70%, 9%);
  --color-border:         hsl(207, 40%, 20%);
  --color-text:           var(--paper-50);
  --color-text-secondary: var(--prussian-100);
  --color-text-muted:     var(--prussian-200);
  --color-accent:         var(--paper-100);
  --color-accent-hover:   var(--paper-50);
  --color-on-accent:      var(--prussian-800);
}

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--space-8));
}

a { color: inherit; }

.container {
  max-width: var(--container-prose);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* Header — the same mark as the site header */
.site-header {
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-4);
  padding-top: max(env(safe-area-inset-top, 0px), var(--space-4));
}
.site-header__logo {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}
.site-header__glyph {
  font-size: 2em;
  line-height: 1;
  vertical-align: 0.035em;
  margin-right: 0.15em;
  color: var(--color-text-muted);
}

/* Intro */
.intro { padding-block: var(--space-12) var(--space-8); }
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
h1, h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h1 { font-size: clamp(var(--text-2xl), 6vw, var(--text-4xl)); }
h1 span { display: block; }
h1 span + span { color: var(--color-text-secondary); font-weight: 400; }
.lead {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  margin: var(--space-6) 0 0;
}
blockquote {
  margin: var(--space-8) 0 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-border);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--color-text-secondary);
}
blockquote cite {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
blockquote cite a, .prose a, .site-footer a {
  color: var(--color-text-muted);
  text-decoration: none;
  text-underline-offset: 0.18em;
}
/* The link to the article under the quote is always underlined, so it reads as a link. */
blockquote cite a { text-decoration: underline; text-decoration-thickness: 1px; }
blockquote cite a:hover, .prose a:hover, .site-footer a:hover { text-decoration: underline; }

/* Form */
fieldset { border: 0; margin: 0 0 var(--space-6); padding: 0; }
label { display: block; font-weight: 600; }
.hint { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-1) 0 var(--space-2); }
textarea {
  width: 100%;
  min-height: 4.5rem;
  resize: vertical;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 16px; /* stops iOS zooming on focus */
}
textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--color-text-muted);
  outline-offset: 2px;
}

button {
  font: inherit;
  font-weight: 600;
  width: 100%;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius);
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
button:hover:not([disabled]) { background: var(--color-surface); }
button.primary { background: var(--color-accent); color: var(--color-on-accent); }
button.primary:hover { background: var(--color-accent-hover); }
button[disabled] { opacity: .4; cursor: not-allowed; }

/* Playback */
#playback {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
/* The read-back itself is set in the serif; everything after it returns to body type. */
#playback > p { margin: 0 0 var(--space-3); font-family: var(--font-serif); font-size: var(--text-lg); }
#playback .q { font-style: italic; }
.ask { margin: var(--space-6) 0 var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.ask p { margin: 0 0 var(--space-3); }
#playback > p.small, #playback > p.copied { font-family: var(--font-sans); font-size: var(--text-sm); }
.small { font-size: var(--text-sm); color: var(--color-text-muted); }
.copied { text-align: center; min-height: 1.2rem; margin-top: var(--space-2); }

/* Plain pages: privacy and thanks */
.prose { padding-block: var(--space-12) var(--space-8); }
.prose h1 { margin-bottom: var(--space-6); }
.prose h2 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-2); }
.prose ul { padding-left: 1.1rem; }
.prose li + li { margin-top: var(--space-2); }
.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-6);
  margin: var(--space-6) 0;
}
.card p { margin: 0 0 var(--space-2); }
.card p:last-child { margin-bottom: 0; }

/* Footer */
.site-footer {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.site-footer p { margin: 0 0 var(--space-2); }
.site-footer__meta { font-family: var(--font-mono); font-size: var(--text-xs); }