/*
 * Theoatrix site stylesheet.
 *
 * Shared design system across theoatrix.app (landing) and
 * legal.theoatrix.app (privacy / terms / delete-account). The two Pages
 * projects each ship a copy of this file — keep them in sync.
 *
 * Source of truth: website/legal/site.css.
 * Mirror:          website/root/site.css.
 *
 * Tokens ported from the iOS/Android app's dark surface theme + red
 * accent (the default theme for ~99% of users per ADR-036). See:
 *   apps/ios/Toolkit/Toolkit/Theme/Color+Theme.swift
 *   apps/ios/Toolkit/Toolkit/Theme/Spacing.swift
 *   apps/ios/Toolkit/Toolkit/Theme/Typography.swift
 *   apps/ios/Toolkit/Toolkit/Theme/CornerRadius.swift
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Surface — dark theme */
  --bg:                 #0A0A0A;
  --surface-card:       #141414;
  --surface-elevated:   #1E1E1E;
  --surface-input:      #2A2A2A;
  --border:             #2A2A2A;
  --toolbar:            #0A0A0A;

  /* Text */
  --text-primary:       #FFFFFF;
  --text-secondary:     #A0A0A0;
  --text-disabled:      rgba(160, 160, 160, 0.5);

  /* Brand accent — red (default) */
  --accent:             #E8364B;
  --accent-shade:       #CC2F42;
  --accent-tint:        #EA4B5D;
  --accent-contrast:    #FFFFFF;

  /* Spacing ladder */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   12px;
  --space-lg:   16px;
  --space-xl:   24px;
  --space-2xl:  32px;
  --space-3xl:  48px;
  --space-4xl:  64px;

  /* Corner radius */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* Layout */
  --content-width: 720px;
  --nav-height:    64px;

  /* Type ramp (matches Toolkit Typography.swift) */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-display:   2rem;
  --fs-title:     1.25rem;
  --fs-headline:  1.125rem;
  --fs-body:      1rem;
  --fs-small:     0.875rem;
  --fs-label:     0.8125rem;

  /* Elevation */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-icon: 0 4px 12px rgba(0, 0, 0, 0.5);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-family);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-tint); }

/* ── Top nav ──────────────────────────────────────────────────────── */
.site-nav {
  background: var(--toolbar);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-nav-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  height: var(--nav-height);
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.site-nav .brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-primary);
  font-weight: 700;
  font-size: var(--fs-title);
  letter-spacing: -0.01em;
}
.site-nav .brand:hover { color: var(--text-primary); }
.site-nav .brand img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
}
.site-nav .brand .accent { color: var(--accent); }

.site-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
}
.site-nav-links a {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: color 0.15s, background 0.15s;
}
.site-nav-links a:hover {
  color: var(--text-primary);
  background: var(--surface-elevated);
}
.site-nav-links a.active {
  color: var(--text-primary);
  background: var(--surface-elevated);
}

/* Hide nav labels on narrow screens, keep just the brand */
@media (max-width: 540px) {
  .site-nav-links a { padding: var(--space-sm); }
  .site-nav-links .nav-label-long { display: none; }
}

/* ── Page header (in-content title block) ─────────────────────────── */
.page-header {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg) var(--space-lg);
}
.page-header h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.page-header .crumb {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}
.page-header .crumb a { color: var(--text-secondary); }
.page-header .crumb a:hover { color: var(--text-primary); }
.page-header .meta {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

/* ── Main content ─────────────────────────────────────────────────── */
main.content {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-lg) var(--space-3xl);
}

section.card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-card);
}

section.card h2 {
  font-size: var(--fs-headline);
  font-weight: 600;
  margin-bottom: var(--space-md);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
section.card h3 {
  font-size: var(--fs-body);
  font-weight: 600;
  margin: var(--space-lg) 0 var(--space-xs);
  color: var(--text-primary);
}
section.card h3:first-child { margin-top: 0; }
section.card p {
  margin-bottom: var(--space-md);
  color: var(--text-secondary);
}
section.card p:last-child { margin-bottom: 0; }
section.card ul, section.card ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
  color: var(--text-secondary);
}
section.card ul:last-child, section.card ol:last-child { margin-bottom: 0; }
section.card li { margin-bottom: var(--space-xs); }
section.card strong { color: var(--text-primary); font-weight: 600; }

/* ── Hero (landing page) ──────────────────────────────────────────── */
.hero {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl) var(--space-xl);
  margin: var(--space-xl) 0 var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-card);
}
.hero .icon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  box-shadow: var(--shadow-icon);
  margin-bottom: var(--space-xl);
}
.hero h1 {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}
.hero h1 .accent { color: var(--accent); }
.hero .tagline {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto var(--space-2xl);
}

/* ── Store buttons ────────────────────────────────────────────────── */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--fs-small);
  transition: background 0.15s, border-color 0.15s;
}
.store-btn:hover {
  background: var(--surface-input);
  border-color: var(--accent);
  color: var(--text-primary);
}
.store-btn .label-stack { text-align: left; line-height: 1.2; }
.store-btn .label-sm { display: block; font-size: 0.6875rem; font-weight: 400; color: var(--text-secondary); }
.store-btn .label-lg { display: block; font-size: var(--fs-body); font-weight: 600; }

/* ── Feature grid (landing page) ──────────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 540px) {
  .features-grid { grid-template-columns: 1fr 1fr; }
}
.feature {
  padding: var(--space-lg);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.feature h3 {
  font-size: var(--fs-body);
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--text-primary);
}
.feature p {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  margin: 0;
}

/* ── Link rows (legal index, generic listing) ─────────────────────── */
.links-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
@media (min-width: 540px) {
  .links-grid { grid-template-columns: 1fr 1fr; }
}
.link-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}
.link-row:hover {
  background: var(--surface-input);
  border-color: var(--accent);
  color: var(--text-primary);
}
.link-row .arrow { color: var(--accent); font-weight: 600; }

/* ── Footer ───────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--toolbar);
  margin-top: var(--space-2xl);
}
.site-footer-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: center;
  text-align: center;
}
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  list-style: none;
}
.site-footer-links a {
  color: var(--text-secondary);
  font-size: var(--fs-small);
}
.site-footer-links a:hover { color: var(--text-primary); }
.site-footer-copy {
  font-size: var(--fs-label);
  color: var(--text-disabled);
  max-width: 480px;
}