/*
 * SpendFoxy web pages (support, privacy). Same palette and type as the app: src/theme/colors.ts,
 * src/theme/typography.ts, src/theme/spacing.ts, docs/DESIGN.md "Approved refinements".
 * Flat and quiet: no boxes, no shadows, no badges. Content sits on the canvas, separated by space and hairlines.
 * Fonts are self-hosted (SIL OFL, assets/fonts/OFL.txt): no third-party requests from these pages.
 */

@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark light;
  /* Dark palette (the default), from src/theme/colors.ts */
  --canvas: #121316;
  --border: #272932;
  --text-primary: #F3F2EE;
  --text-secondary: #8E8F97;
  --text-tertiary: #7C7E86;
  --accent: #E2D9C8;        /* cream: links, section headings */
  --accent-sand: #C2B49A;   /* the faint glow at the top */
  --fox-top: #D9925A;       /* foxAccent */
  --fox-bottom: #B8733F;

  /* spacing.ts */
  --xs: 4px; --sm: 8px; --md: 16px; --lg: 24px; --xl: 36px; --margin: 20px;

  --font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --canvas: #F6F4EF;
    --border: #DCD7CC;
    --text-primary: #1D1C1A;
    --text-secondary: #5F5C56;
    --text-tertiary: #67635C;
    --accent: #3A3226;
    --accent-sand: #7D6745;
    --fox-top: #8F4F24;
    --fox-bottom: #6E3A18;
  }
}

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

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

body {
  margin: 0;
  background-color: var(--canvas);
  /* The faint sand glow at the top of each top-level screen (about 8%), docs/DESIGN.md "Depth". */
  background-image: radial-gradient(120% 320px at 50% 0, color-mix(in srgb, var(--accent-sand) 8%, transparent), transparent);
  background-repeat: no-repeat;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 16px;            /* body: 16/22 */
  line-height: 22px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 720px;           /* DESIGN.md: max-width 720 on wide screens, a pocket-notebook feel */
  margin: 0 auto;
  padding: var(--xl) var(--margin) var(--xl);
}

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--margin); top: var(--sm); color: var(--accent); background: var(--canvas); padding: var(--sm); }

/* Header */
.brand { display: flex; flex-direction: column; gap: var(--md); padding-top: var(--md); }
.fox { width: 64px; height: auto; display: block; }
.fox .t { stop-color: var(--fox-top); }
.fox .b { stop-color: var(--fox-bottom); }

h1 {                          /* largeTitle: 28/34 medium, -0.56 */
  margin: 0;
  font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -0.56px;
}
.lede { margin: 0; color: var(--text-secondary); }

/* Sections: sentence-case headings, 14 semibold, cream accent, more space above than below (DESIGN.md) */
section { margin-top: var(--xl); }
h2 {
  margin: 0 0 var(--sm);
  font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.1px;
  color: var(--accent);
}
p { margin: 0 0 var(--sm); }
p:last-child { margin-bottom: 0; }
.secondary { color: var(--text-secondary); }

/* FAQ: flat rows on the canvas with hairlines between them */
.faq { list-style: none; margin: 0; padding: 0; }
.faq > li { padding: var(--md) 0; border-top: 1px solid var(--border); }
.faq > li:first-child { border-top: 0; padding-top: var(--sm); }
h3 {                          /* headline: 17/22 medium */
  margin: 0 0 var(--xs);
  font-size: 17px; line-height: 22px; font-weight: 500;
}
.faq p, .faq ol, .faq ul { color: var(--text-secondary); font-size: 16px; line-height: 22px; }
.faq ol, .faq ul { margin: var(--xs) 0 var(--sm); padding-left: var(--lg); }
.faq li li { margin: 2px 0; }

/* Lists in running text (the privacy policy). The support FAQ list is excluded; its own rules above already match. */
main ul:not(.faq), main ol { padding-left: var(--lg); margin: var(--xs) 0 var(--sm); }
main ul:not(.faq) > li, main ol > li { margin: 2px 0; }

.path { color: var(--text-primary); }   /* in-app paths, e.g. Settings › Data › Erase all data */

a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.email { font-size: 17px; line-height: 22px; font-weight: 500; }

/* Developer block and footer: on the canvas, separated by a hairline */
.developer p { color: var(--text-secondary); }
.developer strong { color: var(--text-primary); font-weight: 500; }

footer {
  margin-top: var(--xl);
  padding-top: var(--md);
  border-top: 1px solid var(--border);
  color: var(--text-tertiary);
  font-size: 12px; line-height: 16px; letter-spacing: 0.1px;   /* caption */
}
footer nav { display: flex; flex-wrap: wrap; gap: var(--xs) var(--md); margin-bottom: var(--sm); }
footer a { color: var(--text-secondary); }
footer p { margin: 0 0 var(--xs); }

@media (min-width: 640px) {
  .page { padding-top: 64px; }
  h1 { font-size: 32px; line-height: 38px; letter-spacing: -0.64px; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }