@use "../kit-deps" as *;

/* =========================
	 FONT FAMILIES
========================= */

$font-family-base: "IBM Plex Mono", monospace;
$font-family-code: $font-family-base;

/* =========================
	 FONT WEIGHTS
========================= */

$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

/* =========================
	 FONT SIZES (scale)
========================= */

$font-size-xs: 12px;
$font-size-sm: 13px;
$font-size-md: 14px;
$font-size-base: 15px;
$font-size-lg: 16px;
$font-size-xl: 20px;

$font-size-h1: 34px;
$font-size-h2: 26px;
$font-size-h3: 22px;
$font-size-h4: 20px;
$font-size-h5: 18px;
$font-size-h6: 16px;

/* =========================
	 LINE HEIGHTS
========================= */

$line-height-base: 1;
$line-height-tight: 1.15;
$line-height-snug: 1.25;
$line-height-normal: 1.4;
$line-height-relaxed: 1.6;

/* =========================
	 LETTER SPACING
========================= */

$letter-spacing-tight: 0;
$letter-spacing-normal: 0;
$letter-spacing-wide: 0.04em;

/* =========================
	 BASE TYPOGRAPHY
========================= */

html {
	font-size: 100%;
}

body {
	font-family: $font-family-base;
	font-size: $font-size-base;
	font-weight: $font-weight-regular;
	line-height: $line-height-relaxed;
	letter-spacing: $letter-spacing-normal;
	color: $color-text-light;
}

/* =========================
	 HEADINGS
========================= */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: $font-family-base;
	font-weight: $font-weight-semibold;
	line-height: $line-height-snug;
	margin: 0;

	&.contrast {
		background: $color-text-light;
		color: $color-black;
		display: inline;
		padding: 0 $space-2;
	}
}

h1 {
	font-size: $font-size-h1;
	letter-spacing: $letter-spacing-tight;
}

h2 {
	font-size: $font-size-h2;
}

h3 {
	font-size: $font-size-h3;
}

h4 {
	font-size: $font-size-h4;
}

h5 {
	font-size: $font-size-h5;
}

h6 {
	font-size: $font-size-h6;
	font-weight: $font-weight-medium;
}

/* =========================
	 TEXT VARIANTS
========================= */

.text,
p {
	font-size: $font-size-base;
	line-height: $line-height-relaxed;
}

.text-sm {
	font-size: $font-size-sm;
	line-height: $line-height-normal;
}

.text-lg {
	font-size: $font-size-lg;
	line-height: $line-height-relaxed;
}

.text-lead {
	max-width: 760px;
	color: $color-text-light;
	font-size: $font-size-lg;
	font-weight: $font-weight-medium;
	line-height: $line-height-relaxed;
}

.text-muted {
	font-size: $font-size-sm;
	color: $color-text-dark;
}

.text-strong,
strong {
	font-weight: $font-weight-semibold;
}

.text-bold {
	font-weight: $font-weight-bold;
}

.text-italic,
em {
	font-style: italic;
}

.text-success {
	color: $color-success;
}

.text-warning {
	color: $color-warning;
}

.text-danger,
.text-error {
	color: $color-error;
}

.text-info {
	color: $color-info;
}

.eyebrow {
	display: inline-flex;
	width: max-content;
	max-width: 100%;
	padding: $space-1 $space-2;
	color: $color-black;
	background: $color-secondary;
	font-size: $font-size-xs;
	font-weight: $font-weight-bold;
	line-height: $line-height-base;
	text-transform: uppercase;
}

.caption {
	color: $color-text-dark;
	font-size: $font-size-xs;
	line-height: $line-height-normal;
}

/* =========================
	 CODE / MONO
========================= */

code,
pre,
.code {
	font-family: $font-family-code;
	font-size: $font-size-base;
	line-height: $line-height-normal;
	background-color: $color-dark;
}

.text-primary {
	color: $color-text-light;
}

.text-secondary {
	color: $color-text-medium;
}

pre {
	font-size: $font-size-base;
	line-height: $line-height-relaxed;
	white-space: pre-wrap;
}

pre code,
.code {
	tab-size: 2;
	-moz-tab-size: 2;
}

.code {
	display: inline-flex;
	padding: 0 $space-1;
	color: $color-secondary;
	border: $border-width-base solid rgba($color-secondary, 0.24);
}

.kbd {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0 $space-2;
	border: $border-width-base solid $border-color-muted;
	border-bottom-color: $color-secondary;
	color: $color-text-light;
	background: $surface-panel-muted;
	font-family: $font-family-code;
	font-size: $font-size-xs;
	font-weight: $font-weight-bold;
	line-height: $line-height-base;
	text-transform: uppercase;
}

.quote {
	max-width: 760px;
	margin: 0;
	padding: $space-4;
	border: $border-width-base solid $border-color-muted;
	border-left-width: $border-width-accent;
	color: $color-text-medium;
	background: $surface-panel-muted;
	font-size: $font-size-base;
	line-height: $line-height-relaxed;

	cite {
		display: block;
		margin-top: $space-3;
		color: $color-secondary;
		font-size: $font-size-sm;
		font-style: normal;
		text-transform: uppercase;
	}
}

/* =========================
	 LINKS
========================= */

a {
	font-weight: $font-weight-medium;
	text-decoration: none;
	color: $color-secondary;

	@include hover_touch {
		color: $color-warning;
	}
}

.link {
	font-size: inherit;
	font-weight: $font-weight-medium;
}

/* =========================
	 LABELS / META
========================= */

.label {
	font-size: $font-size-sm;
	font-weight: $font-weight-medium;
	line-height: $line-height-normal;
}

.hint,
.meta {
	font-size: $font-size-xs;
	line-height: $line-height-normal;
}

/* =========================
	 TABLE TEXT
========================= */

.table {
	font-size: $font-size-sm;
	line-height: $line-height-normal;

	th {
		font-weight: $font-weight-semibold;
	}

	td {
		font-weight: $font-weight-regular;
	}
}

/* =========================
	 LISTS
========================= */

.list {
	font-size: $font-size-base;
	line-height: $line-height-relaxed;
}

.list-item {
	font-size: inherit;
}

/* =========================
	 MODALS
========================= */

.modal-title {
	font-size: $font-size-h4;
	font-weight: $font-weight-semibold;
}

.modal-body {
	font-size: $font-size-base;
}

/* =========================
	 TOASTS
========================= */

.toast-title {
	font-size: $font-size-md;
	font-weight: $font-weight-semibold;
}

.toast-text {
	font-size: $font-size-sm;
	line-height: $line-height-normal;
}
