/*
Theme Name:   Scanset Child
Theme URI:    https://scanset.io
Description:  Child theme of Astra for Scanset customizations.
Author:       Curtis Slone
Author URI:   https://scanset.io
Template:     astra
Version:      0.1.0
Text Domain:  scanset-child
*/

/* ============================================================
   FONTS — self-hosted variable woff2 from /fonts/
   One file per family delivers every weight (100–900) via the
   variable axis. No external requests, no privacy leakage.
   ============================================================ */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/InterVariable.woff2') format('woff2-variations'),
	     url('fonts/InterVariable.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/InterVariable-Italic.woff2') format('woff2-variations'),
	     url('fonts/InterVariable-Italic.woff2') format('woff2');
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/JetBrainsMono-Variable.woff2') format('woff2-variations'),
	     url('fonts/JetBrainsMono-Variable.woff2') format('woff2');
}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
	/* Color: neutrals */
	--ss-bg:            #FAFAF9;
	--ss-surface:       #FFFFFF;
	--ss-text:          #0F172A;
	--ss-text-muted:    #475569;
	--ss-text-subtle:   #94A3B8;
	--ss-border:        #E5E7EB;
	--ss-border-strong: #CBD5E1;

	/* Color: brand */
	--ss-accent:        #B45309;
	--ss-accent-hover:  #92400E;
	--ss-accent-soft:   #FEF3C7;
	--ss-accent-ink:    #78350F;

	/* Typography */
	--ss-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--ss-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', 'Monaco', 'Cascadia Code', monospace;

	--ss-text-xs:   0.875rem;   /* 14 */
	--ss-text-sm:   1rem;       /* 16 — body */
	--ss-text-base: 1.125rem;   /* 18 — preferred body */
	--ss-text-md:   1.25rem;    /* 20 */
	--ss-text-lg:   1.5rem;     /* 24 */
	--ss-text-xl:   1.875rem;   /* 30 */
	--ss-text-2xl:  2.5rem;     /* 40 */
	--ss-text-3xl:  3.5rem;     /* 56 */
	--ss-text-4xl:  4.5rem;     /* 72 */

	/* Spacing (4px grid) */
	--ss-space-1:  4px;
	--ss-space-2:  8px;
	--ss-space-3:  12px;
	--ss-space-4:  16px;
	--ss-space-5:  24px;
	--ss-space-6:  32px;
	--ss-space-7:  48px;
	--ss-space-8:  64px;
	--ss-space-9:  96px;
	--ss-space-10: 128px;

	/* Radii */
	--ss-radius-sm: 6px;
	--ss-radius-md: 8px;
	--ss-radius-lg: 12px;
	--ss-radius-pill: 999px;

	/* Shadows (restrained) */
	--ss-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.06);
	--ss-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.05);

	/* Layout */
	--ss-content-max: 1200px;
	--ss-prose-max:   68ch;
}

/* ============================================================
   SCOPED TOKEN OVERRIDES — "dark punch" sections
   These sections intentionally use a near-black background as a
   focal-point contrast against the otherwise light page. Inside
   them, redefine text/border tokens so var(--ss-text) resolves
   to a light value instead of slate-900. Surfaces stay tinted
   for any nested cards/widgets.
   ============================================================ */
.section-problem-statement,
.section-problem,
.section-spectrum,
.section-approach,
.section-provenance-how,
.section-pathfinder-how,
.section-prooflayer-how {
	--ss-text:        #FAFAF9;
	--ss-text-muted:  #CBD5E1;
	--ss-text-subtle: #94A3B8;
	--ss-border:      #1F2937;
	--ss-surface:     #0F172A;
}

/* ============================================================
   AMBER-bg sections — Use Cases + Research & Technical Guidance
   Burnt amber section background. White text on the section
   chrome (eyebrow, headline, subhead, controls). Cards stay
   warm off-white via global --ss-bg; nested card scope flips
   text back to slate so the body content reads correctly.
   ============================================================ */
.section-cases,
.section-resources {
	--ss-text:        #FFFFFF;
	--ss-text-muted:  rgba(255, 255, 255, 0.85);
	--ss-text-subtle: rgba(255, 255, 255, 0.7);
	--ss-border:      rgba(255, 255, 255, 0.25);
	--ss-surface:     #FFFFFF;
}
.section-cases .case-card,
.section-resources .case-card {
	--ss-text:        #0F172A;
	--ss-text-muted:  #475569;
	--ss-text-subtle: #94A3B8;
	--ss-border:      #E5E7EB;
	--ss-surface:     #F1F5F9;
}

/* On-accent text: amber background components ALWAYS need light type. */
.hero-cta-primary,
.cta-button-primary,
.section-cta .cta-button,
.wpforms-submit,
input[type="submit"].wpforms-submit,
button[type="submit"] {
	color: #FFFFFF !important;
}

/* ============================================================
   BASE — body, headings, links, paragraphs
   ============================================================ */
body {
	font-family: var(--ss-font-sans);
	color: var(--ss-text);
	background: var(--ss-bg);
	font-size: var(--ss-text-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-archive-title,
.site-title {
	font-family: var(--ss-font-sans);
	color: var(--ss-text);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

h1, .entry-title {
	font-size: clamp(2rem, 5vw, var(--ss-text-3xl));
	font-weight: 800;
	letter-spacing: -0.025em;
}
h2 { font-size: clamp(1.75rem, 4vw, var(--ss-text-2xl)); }
h3 { font-size: var(--ss-text-xl); }
h4 { font-size: var(--ss-text-lg); }

p,
.entry-content p {
	color: var(--ss-text);
	max-width: var(--ss-prose-max);
}

a {
	color: var(--ss-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color 0.15s ease;
}
a:hover {
	color: var(--ss-accent-hover);
}

/* Mono — use deliberately for hashes, signatures, paths, attestation output */
code, pre, kbd, samp,
.scanset-mono {
	font-family: var(--ss-font-mono);
	font-size: 0.95em;
}
:not(pre) > code {
	background: var(--ss-accent-soft);
	color: var(--ss-accent-ink);
	padding: 2px 6px;
	border-radius: var(--ss-radius-sm);
}

/* ============================================================
   BUTTONS — override Astra & WP block defaults
   These use !important because Astra ships high-specificity
   customizer-driven inline styles that otherwise win.
   ============================================================ */
.wp-block-button__link,
.ast-button,
button.ast-button,
.ast-custom-button,
.ast-theme-button,
input[type="submit"].wp-block-search__button {
	background: var(--ss-accent) !important;
	color: #FFFFFF !important;
	border: 1px solid var(--ss-accent) !important;
	border-radius: var(--ss-radius-md) !important;
	padding: 12px 24px !important;
	font-family: var(--ss-font-sans) !important;
	font-weight: 600 !important;
	font-size: var(--ss-text-sm) !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
	transition: background 0.15s ease, border-color 0.15s ease !important;
	box-shadow: var(--ss-shadow-sm);
}
.wp-block-button__link:hover,
.ast-button:hover,
button.ast-button:hover,
.ast-custom-button:hover {
	background: var(--ss-accent-hover) !important;
	border-color: var(--ss-accent-hover) !important;
}

/* Outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--ss-accent) !important;
	border: 1px solid var(--ss-accent) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--ss-accent-soft) !important;
}

/* ============================================================
   FORM CONTROLS
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea,
select {
	font-family: var(--ss-font-sans);
	font-size: var(--ss-text-sm);
	color: var(--ss-text);
	background: var(--ss-surface);
	border: 1px solid var(--ss-border-strong);
	border-radius: var(--ss-radius-sm);
	padding: 10px 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--ss-accent);
	box-shadow: 0 0 0 3px var(--ss-accent-soft);
}

/* ============================================================
   SELECTION
   ============================================================ */
::selection {
	background: var(--ss-accent-soft);
	color: var(--ss-accent-ink);
}