/* ------------------------------------------------------------------------- *
 * ITN Connect — custom CSS layer
 * Matches the "Pacific Northwest Low-Voltage Craft" design system.
 * Everything here is plain CSS so you can edit it without rebuilding
 * Tailwind. The utility layer (itn-tailwind.css) handles the layout;
 * use the tokens & component classes below for anything you add by hand.
 * ------------------------------------------------------------------------- */

:root {
	/* Brand palette */
	--brand-teal: #0d7a7b;
	--brand-teal-dark: #095758;
	--brand-teal-light: #e6f4f4;
	--brand-charcoal: #1a202c; /* primary text */
	--brand-gray: #4a5568;     /* secondary text */
	--brand-muted: #718096;    /* tertiary / labels */
	--brand-border: #e8e2dc;   /* hairline borders */
	--brand-bg: #fff8f5;       /* page canvas (warm porcelain) */
	--brand-surface: #fcf2eb;  /* warm stone grouping */
	--brand-surface-dim: #f5eae1;
	--brand-accent: #fe932c;   /* copper/amber — notices only */

	/* Semantic */
	--success-bg: #ecfdf5;
	--success-border: #a7f3d0;
	--success-text: #065f46;

	/* Radii (design "roundedness: 2") */
	--radius-sm: 6px;
	--radius: 8px;    /* buttons, inputs, badges */
	--radius-md: 12px; /* cards, dialogs */
	--radius-lg: 16px; /* hero feature modules */

	/* Warm-tinted elevation */
	--shadow-card: 0 1px 3px rgba(28, 25, 23, 0.04), 0 4px 12px rgba(28, 25, 23, 0.03);
	--shadow-hover: 0 4px 6px -1px rgba(28, 25, 23, 0.05), 0 12px 24px -4px rgba(28, 25, 23, 0.07);
}

/* --- Base --- */
body {
	background: var(--brand-bg);
	color: var(--brand-charcoal);
}

::selection {
	background: var(--brand-teal);
	color: #fff;
}

/* Branded focus ring (no default browser blue) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: none;
	border-color: var(--brand-teal);
	box-shadow: 0 0 0 3px rgba(13, 122, 123, 0.15);
}

/* --- Buttons --- */
.itn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0 20px;
	border-radius: var(--radius);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 180ms ease-out;
}

.itn-btn--primary {
	background: var(--brand-teal);
	color: #fff;
	box-shadow: var(--shadow-card);
}
.itn-btn--primary:hover {
	background: var(--brand-teal-dark);
	color: #fff;
	transform: translateY(-1px);
}

.itn-btn--secondary {
	background: #fff;
	color: var(--brand-charcoal);
	border-color: var(--brand-border);
}
.itn-btn--secondary:hover {
	background: var(--brand-surface);
	border-color: #d6d3d1;
	color: var(--brand-charcoal);
}

.itn-btn--subtle {
	background: transparent;
	color: var(--brand-teal);
}
.itn-btn--subtle:hover {
	background: rgba(13, 122, 123, 0.08);
	color: var(--brand-teal-dark);
}

/* --- Cards --- */
.itn-card {
	background: #fff;
	border: 1px solid var(--brand-border);
	border-radius: var(--radius-md);
	padding: 24px;
	box-shadow: var(--shadow-card);
}

/* Interactive variant: teal edge + lift on hover */
.itn-card--action {
	transition: all 180ms ease-out;
}
.itn-card--action:hover {
	border-color: rgba(13, 122, 123, 0.4);
	box-shadow: var(--shadow-hover);
}

/* Grouping panel (flat, no shadow — Level 1) */
.itn-panel {
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	border-radius: var(--radius-md);
}

/* --- Badges & chips --- */
/* "Certified pass" verification badge */
.itn-badge--verified {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	background: var(--success-bg);
	border: 1px solid var(--success-border);
	color: var(--success-text);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.itn-badge--verified::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background: #059669;
}

/* Neutral service-type chip (Cat6A, Wi-Fi 7, Fiber...) */
.itn-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	color: var(--brand-gray);
	font-size: 11px;
	font-weight: 600;
}

/* --- Form controls --- */
.itn-input,
.itn-textarea,
.itn-select {
	width: 100%;
	min-height: 44px;
	background: #fff;
	border: 1px solid var(--brand-border);
	border-radius: var(--radius);
	padding: 10px 14px;
	font-size: 0.875rem;
	color: var(--brand-charcoal);
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.itn-input::placeholder,
.itn-textarea::placeholder {
	color: var(--brand-muted);
}
.itn-input:focus,
.itn-textarea:focus,
.itn-select:focus {
	outline: none;
	border-color: var(--brand-teal);
	box-shadow: 0 0 0 3px rgba(13, 122, 123, 0.15);
}

.itn-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--brand-charcoal);
	margin-bottom: 4px;
}

/* --- Eyebrow / section heading helpers --- */
.itn-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--brand-teal);
}

/* --- Status pulse dot (live link indicator) --- */
.itn-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 9999px;
	background: #059669;
}
.itn-dot--pulse {
	animation: itn-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.itn-dot--amber { background: #d97706; }
.itn-dot--slate { background: #718096; }

@keyframes itn-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}

/* --- Utility: horizontal hairline divider --- */
.itn-divider {
	border: 0;
	border-top: 1px solid var(--brand-border);
}

/* --- Mobile gutters (8-pt system) --- */
@media (max-width: 768px) {
	.ast-container {
		padding-inline: 1rem;
	}
}