/* ============================================================
   BASE — Design Tokens & Global Reset
   Anchor Uptime Theme
   ============================================================ */

/* ── Tokens ── */
:root {
	/* Header height — docs layout offset */
	--nav-h: 62px;

	/* Backgrounds */
	--bg:  #07090e;
	--bg2: #0c0f18;
	--bg3: #111521;

	/* Borders */
	--border:  rgba(255, 255, 255, .06);
	--border2: rgba(255, 255, 255, .11);

	/* Text */
	--text:  #dde2ef;
	--muted: #6b7491;
	--faint: #3a4060;

	/* Accent — Indigo */
	--indigo:      #6366f1;
	--indigo-soft: rgba(99, 102, 241, .08);
	--indigo-glow: rgba(99, 102, 241, .15);

	/* Status */
	--green:      #22c55e;
	--green-glow: rgba(34, 197, 94, .12);
	--red:        #ef4444;
	--amber:      #f59e0b;
	--cyan:       #06b6d4;

	/* Typography */
	--display: 'Bricolage Grotesque', sans-serif;
	--mono:    'IBM Plex Mono', monospace;
	--body:    'Figtree', sans-serif;

	/* Layout */
	--container: 1080px;
	--radius-lg: 14px;
	--radius-md: 10px;
	--radius-sm: 9px;
	--radius-xs: 7px;
}

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

ul,
ol {
	list-style: none;
}

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

body {
	background:    var(--bg);
	color:         var(--text);
	font-family:   var(--body);
	font-size:     15px;
	line-height:   1.7;
	overflow-x:    hidden;
	-webkit-font-smoothing:  antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
	display:   block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 2px; }

/* ── Focus visible ── */
:focus-visible {
	outline:        2px solid var(--indigo);
	outline-offset: 3px;
	border-radius:  4px;
}

/* ── Skip link ── */
.skip-link {
	position:   absolute;
	top:        -999px;
	left:       16px;
	z-index:    9999;
	padding:    8px 16px;
	background: var(--indigo);
	color:      #fff;
	font-size:  13px;
	border-radius: var(--radius-xs);
	text-decoration: none;
}
.skip-link:focus {
	top: 16px;
}

/* ── Container ── */
.container {
	max-width: var(--container);
	margin:    0 auto;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Shared buttons ── */
.btn {
	display:         inline-flex;
	align-items:     center;
	font-family:     var(--body);
	font-weight:     600;
	cursor:          pointer;
	text-decoration: none;
	transition:      all .2s;
	white-space:     nowrap;
	border-radius:   100px;
}

.btn.ghost {
	border:     1px solid var(--border2);
	background: transparent;
	color:      var(--muted);
}
.btn.ghost:hover {
	border-color: var(--indigo);
	color:        var(--text);
	background:   var(--indigo-soft);
}

.btn.solid {
	background:  var(--indigo);
	color:       #fff;
	border:      none;
	box-shadow:  0 0 20px var(--indigo-glow);
}
.btn.solid:hover {
	opacity:   .88;
	transform: translateY(-1px);
}

.btn.sm  { font-size: 13px; padding: 6px 16px; }
.btn.xs  { font-size: 12px; padding: 5px 14px; }
.btn.lg  { font-size: 15px; padding: 13px 28px; }

/* ── Scroll reveal ── */
.fade-up {
	opacity:    0;
	transform:  translateY(22px);
	transition: opacity .6s ease, transform .6s ease;
}
.fade-up.in {
	opacity:   1;
	transform: translateY(0);
}
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; }

/* ── Animations ── */
@keyframes blink {
	0%, 100% { opacity: 1; }
	50%       { opacity: .25; }
}

@keyframes rowflash {
	0%   { background: rgba(99, 102, 241, .15); }
	100% { background: transparent; }
}

@media (max-width: 767px) {
	:root {
		--nav-h: 94px; /* mobile-top (40px) + mobile-nav (54px) */
	}
}

/* ── Section spacing ── */
.site-section {
	padding: 100px 40px;
}

@media (max-width: 640px) {
	.site-section {
		padding: 72px 20px;
	}
}