/* ============================================================
   SOMA ACADEMY — DESIGN TOKENS
   Single source of truth. Every SOMA stylesheet consumes these
   and defines no palette values of its own.
   ============================================================ */

:root {

	/* ---------- Brand palette (canonical) ----------
	   Deep Indigo is confirmed by the master brand SVG (#131527).
	   Deep Teal is the precision accent, confirmed as a live design
	   token on the parent site. Note: teal is normally drawn at low
	   alpha over ivory, which reads as a soft grey-green — that is a
	   rendered blend, not a separate brand colour. */
	--soma-indigo:      #131527;
	--soma-ivory:       #F2F0EF;
	--soma-teal:        #0D7C68;
	--soma-white:       #FFFFFF;

	/* Functional derivations — all traceable to the four above. */
	--soma-indigo-soft: #1E2138;                  /* raised surfaces on dark, button hover */
	--soma-teal-deep:   #0A6354;                  /* pressed / active accent */
	--soma-ink:         var(--soma-indigo);       /* body text on light */
	--soma-ink-muted:   rgba(19, 21, 39, 0.72);
	--soma-ink-faint:   rgba(19, 21, 39, 0.48);
	--soma-rule:        rgba(19, 21, 39, 0.12);
	--soma-teal-wash:   rgba(13, 124, 104, 0.08); /* panel tints */
	--soma-teal-line:   rgba(13, 124, 104, 0.45);

	/* On dark (Deep Indigo) surfaces */
	--soma-on-dark:           var(--soma-ivory);
	--soma-on-dark-muted:     rgba(242, 240, 239, 0.72);
	--soma-on-dark-faint:     rgba(242, 240, 239, 0.45);
	--soma-rule-on-dark:      rgba(242, 240, 239, 0.16);

	/* ---------- Typography ---------- */
	--font-display: 'Cormorant', Georgia, serif;
	--font-body:    'Raleway', system-ui, -apple-system, sans-serif;

	/* Display scale — reserved for cinematic sections.
	   Editorial pages deliberately run smaller; see --size-h*-editorial. */
	/* The upper bounds are the brief's desktop targets. The lower bounds are
	   deliberately smaller than the brief states: a 4rem floor renders a
	   ~64px headline on a 375px screen, which pushes the supporting copy and
	   CTA below the fold. Floors are sized so the hero still composes on a
	   small screen; desktop rendering is unchanged. */
	--size-hero: clamp(2.75rem, 7vw, 7rem);
	--size-h1:   clamp(2.4rem, 6vw, 5.5rem);
	--size-h2:   clamp(2rem, 5vw, 4.5rem);
	--size-h3:   clamp(1.5rem, 3vw, 3rem);

	/* Editorial scale — long-form reading contexts. */
	--size-h1-editorial: clamp(2.6rem, 5.4vw, 4.4rem);
	--size-h2-editorial: clamp(1.75rem, 3vw, 2.4rem);

	--size-lead:     clamp(1.25rem, 2vw, 1.5rem);   /* 20–24px */
	--size-body:     1.0625rem;                      /* 17px */
	--size-body-sm:  0.9375rem;
	--size-meta:     0.75rem;                        /* 12px */

	--tracking-eyebrow: 0.14em;
	--tracking-tight:  -0.022em;

	--leading-tight: 1.08;
	--leading-snug:  1.3;
	--leading-body:  1.72;

	/* ---------- Layout ---------- */
	--container:        1400px;
	--container-text:   1120px;   /* editorial reading width */
	--measure:          62ch;
	--section-space:    clamp(5rem, 10vw, 10rem);
	--section-space-sm: clamp(3rem, 6vw, 5rem);
	--gutter:           clamp(1.5rem, 6vw, 6rem);

	/* ---------- Radius ----------
	   Restrained by design: no large pills, no oversized cards. */
	--radius-small:  4px;
	--radius-medium: 10px;
	--radius-large:  16px;

	/* ---------- Motion ---------- */
	--ease-soma: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-micro:     200ms;
	--dur-ui:        320ms;
	--dur-section:   800ms;
	--dur-cinematic: 1200ms;
}

/* ============================================================
   Dark context utility — Phase 4 cinematic sections opt in by
   adding `soma-dark`, which re-points the semantic tokens so
   components need no dark-specific rules of their own.
   ============================================================ */

.soma-dark {
	--soma-ink:       var(--soma-on-dark);
	--soma-ink-muted: var(--soma-on-dark-muted);
	--soma-ink-faint: var(--soma-on-dark-faint);
	--soma-rule:      var(--soma-rule-on-dark);
	background: var(--soma-indigo);
	color: var(--soma-on-dark);
}

/* ============================================================
   Shared primitives
   ============================================================ */

.soma-eyebrow {
	font-family: var(--font-body);
	font-size: var(--size-meta);
	font-weight: 700;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--soma-teal);
	margin: 0 0 1rem;
}

/* Primary action — teal, slight radius, never a pill. */
.soma-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	padding: 0.9rem 1.6rem;
	border-radius: var(--radius-small);
	background: var(--soma-teal);
	color: var(--soma-white);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--dur-ui) var(--ease-soma);
}

.soma-btn span { transition: transform var(--dur-ui) var(--ease-soma); }
.soma-btn:hover, .soma-btn:focus-visible { background: var(--soma-teal-deep); color: var(--soma-white); }
.soma-btn:hover span, .soma-btn:focus-visible span { transform: translateX(3px); }

/* Secondary — transparent, thin border. */
.soma-btn--ghost {
	background: transparent;
	color: var(--soma-ink);
	border-color: var(--soma-rule);
}
.soma-btn--ghost:hover, .soma-btn--ghost:focus-visible {
	background: var(--soma-teal-wash);
	border-color: var(--soma-teal);
	color: var(--soma-ink);
}

:where(.soma-btn, .soma-hero__cta, .soma-founder__cta):focus-visible {
	outline: 2px solid var(--soma-teal);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.soma-btn, .soma-btn span { transition: none; }
	.soma-btn:hover span { transform: none; }
}