@font-face {
	
  font-family: "Roboto";
  src: url( "/css/fonts/roboto/Roboto-VariableFont_wdth,wght.ttf" ) format( "truetype" );
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
  
}

@font-face {
	
  font-family: "Source Serif 4";
  src: url( "/css/fonts/source_serif_4/SourceSerif4-VariableFont_opsz,wght.ttf" ) format( "truetype" );
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
  
}

@font-face {
	
  font-family: "Actual";
  src: url( "/css/fonts/actual/Actual.ttf" ) format( "truetype" );
  font-weight: 600;
  font-style: normal;
  
}

:root {
	
	/**********[ LIGHT MODE ]************************************/
	--bg: #f7f5f0;
	--bg-elev: #ffffff;
	--bg-sunken: #efece5;
	--border: #e3ddcf;
	--border-strong: #cfc8b7;
	--ink: #1a1a1a;
	--ink-2: #4a4a4a;
	--ink-muted: #7a7466;
	--accent: #7a7466;
	--accent-soft: #f1dfd9;
	--accent-ink: #ffffff;
	--link: #b77f18;
	--unit: rgba( 122, 59, 46, 0.12 );
	--unit-active: rgba( 122, 59, 46, 0.28 );
	--verse-num: #a89a7a;
	--selection: rgba( 122, 59, 46, 0.25 );
	--red-letter: #a01b24;
	--shadow-1: 0 1px 2px rgba( 20, 14, 0, 0.05 ), 0 2px 6px rgba( 20, 14, 0, 0.06 );
	--shadow-2: 0 4px 12px rgba( 20, 14, 0, 0.08 ), 0 12px 32px rgba( 20, 14, 0, 0.10 );
	
	/**********[ TYPOGRAPHY ]************************************/
	--font-ui: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-read: "Iowan Old Style", "Source Serif 4", "Palatino", "Palatino Linotype", Georgia, "Times New Roman", serif;
	--fs-read: 1.0625rem;
	--fs-read-lg: 1.1875rem;
	--lh-read: 1.7;
	
	/**********[ APPEARANCE ]************************************/
	--radius: 10px;
	--radius-md: 14px;
	--radius-lg: 32px;
	
	/**********[ SIZING ]****************************************/
	--app-bar-h: 52px;
	--nav-w: 260px;
	--panel-w: 420px;
	
}

@media (prefers-color-scheme: dark ) {
	
	:root {
		
		/**********[ DARK MODE ]*************************************/
		--bg: #15171a;
		--bg-elev: #1d2024;
		--bg-sunken: #101215;
		--border: #2a2e33;
		--border-strong: #3a3f46;
		--ink: #ebe6db;
		--ink-2: #c2bdb0;
		--ink-muted: #8a8577;
		--accent: #d99a82;
		--accent-soft: #3b2620;
		--accent-ink: #15171a;
		--link: #F28A23;
		--unit: rgba( 217, 154, 130, 0.14 );
		--unit-active: rgba( 217, 154, 130, 0.32 );
		--verse-num: #6e6a6e;
		--selection: rgba( 217, 154, 130, 0.28 );
		--red-letter: #ef6c6f;
		--shadow-1: 0 1px 2px rgba( 0, 0, 0, 0.25 ), 0, 2px 6px rgba( 0, 0, 0, 0.35 );
		--shaodw-2: 0 4px 12px rgba( 0, 0, 0, 0.4 ), 0, 12px 32px rgba( 0, 0, 0, 0.55 );
		
	}
	
}

/**********[ MANUAL OVERRIDES ]******************************/
html[data-theme="light"] {
	
	--bg: #f7f5f0;
	--bg-elev: #ffffff;
	--bg-sunken: #efece5;
	--border: #e3ddcf;
	--border-strong: #cfc8b7;
	--ink: #1a1a1a;
	--ink-2: #4a4a4a;
	--ink-muted: #7a7466;
	--accent: #7a7466;
	--accent-soft: #f1dfd9;
	--accent-ink: #ffffff;
	--link: #b77f18;
	--unit: rgba( 122, 59, 46, 0.12 );
	--unit-active: rgba( 122, 59, 46, 0.28 );
	--verse-num: #a89a7a;
	--selection: rgba( 122, 59, 46, 0.25 );
	--red-letter: #a01b24;
	--shadow-1: 0 1px 2px rgba( 20, 14, 0, 0.05 ), 0 2px 6px rgba( 20, 14, 0, 0.06 );
	--shadow-2: 0 4px 12px rgba( 20, 14, 0, 0.08 ), 0 12px 32px rgba( 20, 14, 0, 0.10 );
	
}

html[data-theme="dark"] {
	
	--bg: #15171a;
	--bg-elev: #1d2024;
	--bg-sunken: #101215;
	--border: #2a2e33;
	--border-strong: #3a3f46;
	--ink: #ebe6db;
	--ink-2: #c2bdb0;
	--ink-muted: #8a8577;
	--accent: #d99a82;
	--accent-soft: #3b2620;
	--accent-ink: #15171a;
	--link: #F28A23;
	--unit: rgba( 217, 154, 130, 0.14 );
	--unit-active: rgba( 217, 154, 130, 0.32 );
	--verse-num: #6e6a6e;
	--selection: rgba( 217, 154, 130, 0.28 );
	--red-letter: #ef6c6f;
	--shadow-1: 0 1px 2px rgba( 0, 0, 0, 0.25 ), 0, 2px 6px rgba( 0, 0, 0, 0.35 );
	--shaodw-2: 0 4px 12px rgba( 0, 0, 0, 0.4 ), 0, 12px 32px rgba( 0, 0, 0, 0.55 );
	
}

::selection { background: var( --selection ); }