/* Shared brand stylesheet for randomvideocall.in — tokens mirror the Android app's own theme
   (app/src/main/java/.../ui/theme/Color.kt) so the site and the app read as one product. */

:root {
	--bg: #F6F6F3;
	--surface: #FFFFFF;
	--surface-variant: #EDEDE9;
	--ink: #121214;
	--muted: #6E6E76;
	--accent: #32D46A;
	--accent-dim: #1E9C4E;
	--danger: #EA4B42;
	--border: rgba(18, 18, 20, 0.08);
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0C0C0E;
		--surface: #1A1A1D;
		--surface-variant: #232327;
		--ink: #F5F5F7;
		--muted: #A3A3AB;
		--border: rgba(245, 245, 247, 0.08);
	}
}

* { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.55;
}

a { color: var(--accent-dim); }
@media (prefers-color-scheme: dark) { a { color: var(--accent); } }

img { max-width: 100%; }

.wrap {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Header, shared across every page */
.site-header {
	padding: 20px 0;
	border-bottom: 1px solid var(--border);
}
.site-header .wrap {
	max-width: 1040px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--ink);
	font-weight: 700;
	font-size: 17px;
}
.brand-mark {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent), var(--accent-dim));
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.brand-mark svg { width: 18px; height: 18px; }
.site-header nav {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	font-size: 14px;
}
.site-header nav a { color: var(--muted); text-decoration: none; }
.site-header nav a:hover { color: var(--ink); }

/* Footer, shared across every page */
.site-footer {
	margin-top: 64px;
	padding: 32px 0 48px;
	border-top: 1px solid var(--border);
	color: var(--muted);
	font-size: 13px;
}
.site-footer .wrap { max-width: 1040px; }
.site-footer nav {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.site-footer nav a { color: var(--muted); }
.site-footer nav a:hover { color: var(--ink); }

/* Policy document pages */
.doc { padding: 48px 0 24px; }
.doc h1 { font-size: 28px; margin: 0 0 6px; letter-spacing: -0.02em; }
.doc .meta { color: var(--muted); font-size: 14px; margin-bottom: 40px; }
.doc h2 { font-size: 19px; margin: 36px 0 10px; letter-spacing: -0.01em; }
.doc h3 { font-size: 16px; margin: 22px 0 8px; }
.doc p, .doc li { color: var(--ink); }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.callout {
	background: var(--surface-variant);
	border-radius: 16px;
	padding: 18px 20px;
	margin: 20px 0;
	font-size: 15px;
}
.callout.action { text-align: center; }
table.data-table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0 28px;
	font-size: 14px;
}
table.data-table th, table.data-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}
table.data-table th { color: var(--muted); font-weight: 600; }

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	border: none;
	cursor: pointer;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--border); }
.btn-accent { background: var(--accent); color: #FFFFFF; }