/* ============================================================
   AZURA — shared brand styles for utility pages
   (privacy.html, thanks.html)

   index.html deliberately does NOT use this file. It is a paid
   landing page: one request, nothing to wait on, so its CSS is
   inlined. These tokens are a copy of the ones at the top of
   index.html — if you change a colour there, change it here too.
   ============================================================ */
:root {
  --ground:      #FCF4ED;
  --surface:     #FFFBF8;
  --ink:         #1D1D1D;
  --ink-soft:    #5C534C;
  --ink-faint:   #8B7F76;
  --rule:        #E8D6C7;
  --signal:      #F23801;
  --signal-text: #C42D00;
  --good:        #1B6B4A;
  --btn-bg:      #C92E00;
  --btn-ink:     #FFFFFF;

  --f-body:    "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 44rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #15120F;
    --surface:     #1D1A17;
    --ink:         #F2E7DD;
    --ink-soft:    #B0A296;
    --ink-faint:   #837568;
    --rule:        #322C26;
    --signal:      #FF5426;
    --signal-text: #FF7A52;
    --good:        #5CC994;
    --btn-bg:      #FF5426;
    --btn-ink:     #1A0B05;
  }
}
:root[data-theme="dark"] {
  --ground:      #15120F;
  --surface:     #1D1A17;
  --ink:         #F2E7DD;
  --ink-soft:    #B0A296;
  --ink-faint:   #837568;
  --rule:        #322C26;
  --signal:      #FF5426;
  --signal-text: #FF7A52;
  --good:        #5CC994;
  --btn-bg:      #FF5426;
  --btn-ink:     #1A0B05;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.site-head {
  border-bottom: 1px solid var(--rule);
  padding: 1.25rem 0;
}
.brand {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-decoration: none;
}
.brand em { color: var(--signal); font-style: normal; }

main { padding: clamp(2.5rem, 7vw, 4.5rem) 0 4rem; }

h1 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1.05;
  font-size: clamp(2rem, 6vw, 3rem);
  margin: 0 0 1rem;
}
h2 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.026em;
  font-size: 1.25rem;
  margin: 2.5rem 0 .5rem;
}
p, li { color: var(--ink-soft); }
p { margin: 0 0 1rem; }
ul { padding-left: 1.25rem; margin: 0 0 1rem; }
li { margin-bottom: .375rem; }
a { color: var(--signal-text); }
b, strong { color: var(--ink); font-weight: 600; }

.lede { font-size: 1.125rem; color: var(--ink-soft); }

.micro {
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--ink-faint);
}

.btn {
  display: inline-block;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: .875rem 1.5rem;
  border-radius: .5rem;
  transition: transform .16s cubic-bezier(0.23,1,0.32,1), filter .16s ease;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
}
.btn:active { transform: scale(0.98); }

.site-foot {
  border-top: 1px solid var(--rule);
  padding: 1.5rem 0 3rem;
  color: var(--ink-faint);
  font-size: .875rem;
}
.site-foot a { color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  .btn:hover, .btn:active { transform: none; }
}