/**
 * Core Base — dizaina tokeni un izkārtojuma primitīvi.
 *
 * TRĪS SLĀŅI, un tos nedrīkst jaukt:
 *
 *   1. PRIMITĪVI  — neapstrādātas vērtības (--cb-brand-500, --cb-neutral-200).
 *                   Projekts DRĪKST tos pārrakstīt savā tokens.css.
 *   2. SEMANTIKA  — nozīme, ne vērtība (--cb-text-muted, --cb-surface-subtle).
 *                   Projekts parasti NEPĀRRAKSTA — tā ir sistēmas gramatika.
 *   3. LIETOTĀJI  — components.css un tēmas style.css lieto TIKAI 2. slāni.
 *
 * KĀPĒC TĀ: klientam mainās 5–8 vērtības 1. slānī. Ja komponenti lasītu
 * primitīvus tieši, katra zīmola maiņa nozīmētu meklēšanu pa visu projektu —
 * tieši tas, kas notika apartment-base (196 hex kodi vienā failā).
 *
 * HEX KODS ĀRPUS ŠĪ FAILA = KĻŪDA. Šis ir vienīgais fails, kur tie dzīvo.
 */

:root {

	/* ══ 1. SLĀNIS — PRIMITĪVI ═══════════════════════════════════════════ */

	/* Zīmola krāsa nāk no Customizer (inc/customizer.php izvada --cb-brand
	   un --cb-brand-dark kā inline stilu PĒC šī faila, tāpēc pārraksta).
	   Šeit ir tikai rezerves vērtība, lai lapa nav salauzta, kamēr klients
	   krāsu vēl nav izvēlējies. */
	--cb-brand: #2c3e50;
	--cb-brand-dark: #1c2833;

	/* Skala atvasinās no vienas krāsas ar color-mix() — klientam jāizvēlas
	   viena vērtība, ne deviņas. Ja projektam vajag precīzāku skalu (piem.
	   pārnesot no dizaina), pārraksti šos savā tokens.css ar hex. */
	--cb-brand-50:  color-mix( in srgb, var( --cb-brand )  6%, #fff );
	--cb-brand-100: color-mix( in srgb, var( --cb-brand ) 14%, #fff );
	--cb-brand-200: color-mix( in srgb, var( --cb-brand ) 28%, #fff );
	--cb-brand-400: color-mix( in srgb, var( --cb-brand ) 65%, #fff );
	--cb-brand-500: var( --cb-brand );
	--cb-brand-700: var( --cb-brand-dark );
	--cb-brand-900: color-mix( in srgb, var( --cb-brand-dark ) 80%, #000 );

	/* Akcents — otrā krāsa (pogas, skaitļi, izcēlumi). Pēc noklusējuma
	   vienāds ar zīmolu, t.i. vienkrāsaina lapa. Projekts to pārraksta,
	   ja zīmolam ir īsts otrais tonis. */
	--cb-accent-500: var( --cb-brand );
	--cb-accent-100: color-mix( in srgb, var( --cb-accent-500 ) 16%, #fff );
	--cb-accent-600: color-mix( in srgb, var( --cb-accent-500 ) 88%, #000 );
	--cb-accent-700: color-mix( in srgb, var( --cb-accent-500 ) 74%, #000 );

	/* Neitrāļi. Nedaudz vēsi (zilgani) — der vairumam biznesa lapu.
	   Siltam zīmolam pārraksti projektā uz siltākiem toņiem. */
	--cb-neutral-0:   #ffffff;
	--cb-neutral-50:  #f6f8f9;
	--cb-neutral-100: #eef1f4;
	--cb-neutral-200: #e0e5ea;
	--cb-neutral-300: #cbd3da;
	--cb-neutral-400: #9aa6b1;
	--cb-neutral-500: #6b7884;
	--cb-neutral-600: #515c67;
	--cb-neutral-700: #3a444d;
	--cb-neutral-800: #252d34;
	--cb-neutral-900: #161c21;

	/* Semantiskās stāvokļu krāsas */
	--cb-green-600: #2e7d5b;
	--cb-red-600:   #c2453b;
	--cb-blue-600:  #2c6e9b;


	/* ══ 2. SLĀNIS — SEMANTIKA (šo lieto komponenti) ═════════════════════ */

	/* Teksts */
	--cb-text-strong:        var( --cb-neutral-900 );
	--cb-text-body:          var( --cb-neutral-700 );
	--cb-text-muted:         var( --cb-neutral-500 );
	--cb-text-quiet:         var( --cb-neutral-400 );
	--cb-text-inverse:       var( --cb-neutral-0 );
	--cb-text-inverse-muted: var( --cb-neutral-300 );
	--cb-text-accent:        var( --cb-accent-700 );
	--cb-text-link:          var( --cb-accent-700 );

	/* Virsmas. NOKLUSĒJUMS IR GAIŠS. Tumšu fonu liek tikai atsevišķām
	   sekcijām (.cb-section--dark) vai tad, ja projekta brief to prasa —
	   nevis tāpēc, ka tumšs izskatās "moderni". */
	--cb-surface-page:   var( --cb-neutral-0 );
	--cb-surface-subtle: var( --cb-neutral-50 );
	--cb-surface-sunken: var( --cb-neutral-100 );
	--cb-surface-dark:   var( --cb-brand-700 );
	--cb-surface-darker: var( --cb-brand-900 );
	--cb-surface-accent: var( --cb-accent-500 );

	/* Apmales */
	--cb-border-default: var( --cb-neutral-200 );
	--cb-border-strong:  var( --cb-neutral-300 );
	--cb-border-dark:    color-mix( in srgb, var( --cb-neutral-0 ) 16%, transparent );
	--cb-border-accent:  var( --cb-accent-500 );

	/* Stāvokļi */
	--cb-focus-ring: var( --cb-accent-600 );
	--cb-success:    var( --cb-green-600 );
	--cb-danger:     var( --cb-red-600 );
	--cb-info:       var( --cb-blue-600 );

	/* Aptumšojums virs fotogrāfijām — lai teksts uz bildes ir lasāms */
	--cb-scrim-bottom: linear-gradient( to top, rgba( 0, 0, 0, .78 ) 0%, rgba( 0, 0, 0, .42 ) 45%, rgba( 0, 0, 0, 0 ) 100% );
	--cb-scrim-side:   linear-gradient( 90deg, rgba( 0, 0, 0, .82 ) 0%, rgba( 0, 0, 0, .40 ) 50%, rgba( 0, 0, 0, .06 ) 100% );


	/* ══ TIPOGRĀFIJA ════════════════════════════════════════════════════ */

	/* Fontu faili ielādējami LOKĀLI (tēmas assets/fonts + @font-face).
	   Nekad no Google CDN: ārējs pieprasījums, GDPR jautājums un lēnāks LCP. */
	--cb-font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--cb-font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Mērogs ar clamp() — nav vajadzīgi atsevišķi media query lūzumi
	   katram virsraksta izmēram. Vidējā vērtība aug līdz ar ekrānu. */
	--cb-display-xl: clamp( 2.25rem, 1.30rem + 4.2vw, 4.00rem );
	--cb-display-lg: clamp( 1.90rem, 1.30rem + 2.6vw, 3.00rem );
	--cb-display-md: clamp( 1.55rem, 1.20rem + 1.6vw, 2.25rem );
	--cb-display-sm: clamp( 1.25rem, 1.08rem + 0.8vw, 1.60rem );

	--cb-heading-lg: 1.25rem;
	--cb-heading-md: 1.10rem;
	--cb-heading-sm: 1.00rem;
	--cb-heading-xs: 0.90rem;

	--cb-body-lg: 1.06rem;
	--cb-body-md: 1.00rem;
	--cb-body-sm: 0.90rem;
	--cb-caption: 0.80rem;

	--cb-lh-display: 1.12;
	--cb-lh-heading: 1.30;
	--cb-lh-body:    1.60;

	--cb-eyebrow-size:     0.75rem;
	--cb-eyebrow-tracking: 0.18em;
	--cb-label-tracking:   0.04em;

	--cb-weight-body:        400;
	--cb-weight-body-strong: 500;
	--cb-weight-ui:          600;
	--cb-weight-display:     700;

	/* Teksta rindas maksimālais platums. Garākas rindas lasās sliktāk. */
	--cb-measure: 65ch;


	/* ══ ATSTARPES ══════════════════════════════════════════════════════ */

	/* SLĒGTA SKALA — 9 soļi, citu vērtību NAV.
	   18px, 22px, 35px nav "gandrīz pareizi", tie ir ārpus sistēmas.
	   Jo mazāk izvēles, jo mazāk vietas acij kļūdīties. */
	--cb-space-1: 4px;
	--cb-space-2: 8px;
	--cb-space-3: 12px;
	--cb-space-4: 16px;
	--cb-space-5: 24px;
	--cb-space-6: 32px;
	--cb-space-7: 48px;
	--cb-space-8: 64px;
	--cb-space-9: 96px;

	/* Izkārtojums */
	--cb-page-max:       1200px;
	--cb-page-gutter:    var( --cb-space-5 );
	--cb-page-gutter-sm: var( --cb-space-4 );

	/* Sekcijas vertikālais ritms. VIENS mainīgais visai lapai — tāpēc
	   sekcijas nevar būt "viena tuvāk, otra tālāk". Ja kādai sekcijai
	   tiešām vajag citu ritmu, lieto .cb-section--tight/--loose, nevis
	   raksti savu padding. */
	--cb-section-y:  clamp( 48px, 6vw, 96px );
	--cb-flow-space: var( --cb-space-4 );
	--cb-grid-gap:   var( --cb-space-5 );


	/* ══ FORMAS UN ĒNAS ═════════════════════════════════════════════════ */

	/* Viena apaļuma sistēma visai lapai. Kantains zīmols → 0/2px.
	   Mīksts → 12/16px. Nejauc: 4px pogām un 16px kartītēm izskatās
	   pēc nejaušības, ne pēc izvēles. */
	--cb-radius-sm:   4px;
	--cb-radius-md:   6px;
	--cb-radius-lg:   10px;
	--cb-radius-pill: 999px;

	--cb-border-w:       1px;
	--cb-border-w-thick: 2px;

	--cb-shadow-card:   0 1px 2px rgba( 22, 28, 33, .06 );
	--cb-shadow-raised: 0 8px 24px rgba( 22, 28, 33, .10 );
	--cb-shadow-float:  0 24px 60px rgba( 22, 28, 33, .22 );


	/* ══ KUSTĪBA ════════════════════════════════════════════════════════ */

	--cb-dur-fast: 120ms;
	--cb-dur-base: 200ms;
	--cb-dur-slow: 420ms;
	--cb-ease-out:    cubic-bezier( .2, .6, .3, 1 );
	--cb-ease-in-out: cubic-bezier( .4, 0, .2, 1 );
	--cb-press-scale: .985;
}

/* Kustības samazināšana ir OBLIGĀTA, ne izvēle. Nullējot ilgumus šeit,
   visi komponenti, kas lieto --cb-dur-*, paklausa automātiski — nav
   jāatceras katrai animācijai atsevišķi. */
@media ( prefers-reduced-motion: reduce ) {
	:root {
		--cb-dur-fast: 0ms;
		--cb-dur-base: 0ms;
		--cb-dur-slow: 0ms;
	}
}


/* ═══════════════════════════════════════════════════════════════════════
   IZKĀRTOJUMA PRIMITĪVI

   Šie risina "viens bloks tuvāk, otrs tālāk". Princips: atstarpes pieder
   VECĀKAM, ne bērnam. Komponents nekad neliek sev ārējo margin — ja tas
   to darītu, tā margin saskaitītos ar vecāka gap, un rezultāts būtu te
   24px, te 44px, atkarībā no vietas.
   ═══════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Ārējo atstarpju nullēšana.
   :where() SPECIFISKUMS IR NULLE — un tas šeit ir viss punkts. Ja šie būtu
   parasti selektori vai (kā sākotnēji) `margin: 0` katra komponenta iekšienē
   components.css failā, tie sakristu ar `.cb-flow > * + *` specifiskumā
   (0,1,0) un uzvarētu, jo ielādējas vēlāk — .cb-flow klusi nedarītu NEKO.
   Tieši tas arī notika, un atklājās tikai tad, kad virsraksts uzkāpa
   rindkopai virsū. Ar :where() plūsmas noteikums uzvar vienmēr. */
:where( h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, pre ) {
	margin: 0;
}

/* Konteiners — maksimālais platums un malas. Nekad nedeklarē tos no jauna. */
.cb-container {
	width: 100%;
	max-width: var( --cb-page-max );
	margin-inline: auto;
	padding-inline: var( --cb-page-gutter );
}

@media ( max-width: 600px ) {
	.cb-container {
		padding-inline: var( --cb-page-gutter-sm );
	}
}

/* Sekcija — vienīgais vertikālā ritma avots. */
.cb-section {
	padding-block: var( --cb-section-y );
}

.cb-section--tight { padding-block: calc( var( --cb-section-y ) * .55 ); }
.cb-section--loose { padding-block: calc( var( --cb-section-y ) * 1.4 ); }

/* Ritms netiek dublēts: ja sekcijai ir padding, pirmajam bērnam nav
   margin-top un pēdējam nav margin-bottom. */
.cb-section > *:first-child { margin-block-start: 0; }
.cb-section > *:last-child  { margin-block-end: 0; }

.cb-section--subtle { background: var( --cb-surface-subtle ); }
.cb-section--sunken { background: var( --cb-surface-sunken ); }

/* Tumšā sekcija. Pārslēdz TIKAI semantiskos tokenus, tāpēc visi komponenti
   iekšā pielāgojas paši — nav jāraksta .cb-section--dark .cb-btn utt. */
.cb-section--dark {
	background: var( --cb-surface-dark );
	--cb-text-strong: var( --cb-text-inverse );
	--cb-text-body: var( --cb-text-inverse-muted );
	--cb-text-muted: var( --cb-text-inverse-muted );
	--cb-border-default: var( --cb-border-dark );
	--cb-surface-page: transparent;
}

/* Vertikālā plūsma — "owl" selektors. Elementi paši nenes margin;
   atstarpi starp tiem nosaka šis viens noteikums. */
.cb-flow > * + * {
	margin-block-start: var( --cb-flow-space );
}

.cb-flow--tight { --cb-flow-space: var( --cb-space-2 ); }
.cb-flow--loose { --cb-flow-space: var( --cb-space-6 ); }

/* Režģis. Noklusējums ir auto-fit, ne fiksētas 3 kolonnas — tāpēc mobilā
   tas sabrūk pats un "3 vienādas kartītes" nav noklusējums. */
.cb-grid {
	display: grid;
	gap: var( --cb-grid-gap );
	grid-template-columns: repeat( auto-fit, minmax( min( 260px, 100% ), 1fr ) );
}

.cb-grid--2 { grid-template-columns: repeat( 2, 1fr ); }
.cb-grid--3 { grid-template-columns: repeat( 3, 1fr ); }

/* Asimetriskie varianti — pretlīdzeklis "trīs vienādām kartītēm".
   Ja ir 3 vienumi, --asym-3 izskatās pēc izvēles, ne pēc noklusējuma. */
.cb-grid--asym-3 { grid-template-columns: 1.6fr 1fr 1fr; }
.cb-grid--asym-2 { grid-template-columns: 1.7fr 1fr; }
.cb-grid--split  { grid-template-columns: 1fr 1fr; align-items: center; gap: var( --cb-space-7 ); }

@media ( max-width: 860px ) {
	.cb-grid--2,
	.cb-grid--3,
	.cb-grid--asym-3,
	.cb-grid--asym-2,
	.cb-grid--split {
		grid-template-columns: 1fr;
	}
}

/* Teksta bloks ar ierobežotu rindas platumu */
.cb-prose {
	max-width: var( --cb-measure );
}

.cb-prose--center {
	margin-inline: auto;
	text-align: center;
}