/*
 * Stone Cliff Digital — Design System Primitives
 * Reusable section surfaces, typography, eyebrows, headline accents,
 * and CTA/link foundations from the approved Design System.
 * No page-specific components (cards, nav, FAQ, timelines, pricing).
 */

/* -------------------------------------------------------------------- */
/* Section surfaces                                                     */
/* -------------------------------------------------------------------- */

.section--white {
	background: var(--sc-paper);
	color: var(--sc-text-onlight);
}

.section--icy {
	background: var(--sc-icy);
	color: var(--sc-text-onlight);
}

.section--dark {
	background: var(--sc-ink);
	color: var(--sc-text-ondark);
}

/* Secondary/deeper dark surface — reserved for sections that need to read
   as a step darker than the standard dark section (e.g. footer). */
.section--dark-deep {
	background: var(--sc-footer-base);
	color: var(--sc-text-ondark);
}

.section--white a,
.section--icy a {
	color: var(--sc-blue);
}

.section--white a:hover,
.section--icy a:hover {
	color: var(--sc-blue-dark);
}

.section--dark a,
.section--dark-deep a {
	color: var(--sc-blue-light);
}

.section--dark a:hover,
.section--dark-deep a:hover {
	color: var(--sc-blue);
}

/* -------------------------------------------------------------------- */
/* Typography                                                           */
/* -------------------------------------------------------------------- */

.c-h1--home {
	font-size: var(--sc-text-h1-home);
	font-weight: 800;
	letter-spacing: -1.8px;
	line-height: 1.08;
}

.c-h1--service {
	font-size: var(--sc-text-h1-service);
	font-weight: 800;
	letter-spacing: -1.6px;
	line-height: 1.1;
}

.c-h2 {
	font-size: var(--sc-text-h2);
	font-weight: 700;
	letter-spacing: -1px;
}

.c-h3 {
	font-size: var(--sc-text-h3);
	font-weight: 700;
}

/* -------------------------------------------------------------------- */
/* Eyebrow / leading line                                                */
/* -------------------------------------------------------------------- */

.c-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--sc-blue);
}

.section--dark .c-eyebrow,
.section--dark-deep .c-eyebrow {
	color: var(--sc-blue-light);
}

/* Force a variant outside a .section--* ancestor (e.g. inside a card). */
.c-eyebrow--force-light {
	color: var(--sc-blue);
}

.c-eyebrow--force-dark {
	color: var(--sc-blue-light);
}

.c-eyebrow__line {
	width: 22px;
	height: 1px;
	background: currentColor;
	flex-shrink: 0;
}

.c-eyebrow__label {
	font-family: var(--sc-font-mono);
	font-size: var(--sc-text-mono-label);
	font-weight: 500;
	letter-spacing: 2.2px;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------- */
/* Headline accent                                                      */
/* -------------------------------------------------------------------- */

/* Light-section headlines get one electric-blue emphasized phrase. */
.c-accent {
	color: var(--sc-blue);
}

/* Dark-section headlines get one periwinkle emphasized phrase instead. */
.section--dark .c-accent,
.section--dark-deep .c-accent {
	color: var(--sc-blue-light);
}

/* -------------------------------------------------------------------- */
/* Primary CTA                                                          */
/* -------------------------------------------------------------------- */

/* Selectors are qualified with the "a" element (not just .c-btn--primary)
   so specificity beats ".section--dark a" / ".section--dark a:hover" —
   otherwise a primary button placed in a dark section inherits the
   periwinkle link color instead of staying white. */
a.c-btn--primary {
	display: inline-block;
	background: var(--sc-blue);
	color: #fff;
	font-family: var(--sc-font-body);
	font-size: 14.5px;
	font-weight: 600;
	padding: 16px 28px;
	border-radius: var(--sc-radius-sm);
	box-shadow: 0 8px 34px rgba(42, 76, 255, 0.42);
	transition: background var(--sc-transition-base), box-shadow var(--sc-transition-base);
}

a.c-btn--primary:hover,
a.c-btn--primary:focus-visible {
	background: var(--sc-blue-dark);
	color: #fff;
	box-shadow: 0 8px 44px rgba(42, 76, 255, 0.68);
}

/* -------------------------------------------------------------------- */
/* Secondary editorial link                                             */
/* -------------------------------------------------------------------- */

.c-link--editorial {
	display: inline-block;
	font-size: 14.5px;
	font-weight: 600;
	padding: 16px 8px;
	color: var(--sc-text-onlight);
	border-bottom: 1px solid var(--sc-slate-500);
}

.section--dark .c-link--editorial,
.section--dark-deep .c-link--editorial {
	color: var(--sc-text-ondark);
}

.c-link--editorial:hover,
.c-link--editorial:focus-visible {
	color: var(--sc-blue-light);
	border-bottom-color: var(--sc-blue-light);
}