/*
 * Antena: brand basics for the GeneratePress theme (RTL).
 * Loaded after the theme's stylesheets. No !important, so Customizer >
 * Additional CSS can still override anything here.
 */

/* Brand tokens. Orange (#FF5A1F) is only the small mast light inside the voice avatars. */
:root {
	--antena-blue: #2B3CFF;
	--antena-ink: #0E1330;
	--antena-paper: #F5F6FB;
	--antena-white: #FFFFFF;
	--antena-muted: #4B5274;
	--antena-tint-blue: #E6E9FF;
	--antena-tint: #E9EBF5;
	--antena-line: #D6DAEA;
	--antena-font-display: "Karantina", "IBM Plex Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
	--antena-font-text: "IBM Plex Sans Hebrew", "Arial Hebrew", "Segoe UI", Arial, sans-serif;
	--antena-font-data: "IBM Plex Mono", "IBM Plex Sans Hebrew", ui-monospace, Menlo, Consolas, monospace;
}

/*
 * Colours, through GeneratePress's global colour palette: by default the theme paints
 * the page with --base-2, text with --contrast and links with --accent. So the page is
 * paper, the text ink and the links blue, and a colour picked for one element in
 * Customizer > Colors (body, links, header, menu...) still wins over these.
 */
:root {
	--contrast: #0E1330;   /* text: ink */
	--contrast-2: #4B5274; /* secondary text (post meta): muted */
	--base: #E9EBF5;       /* light surfaces and field borders */
	--base-2: #F5F6FB;     /* page background: paper */
	--base-3: #FFFFFF;     /* content boxes: white */
	--accent: #2B3CFF;     /* links: blue */
}

/* Fonts: text in IBM Plex Sans Hebrew, headings in Karantina, times in IBM Plex Mono. */
body,
button,
input,
select,
textarea {
	font-family: var(--antena-font-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
.main-title {
	font-family: var(--antena-font-display);
}

.entry-meta time,
.comment-metadata time {
	font-family: var(--antena-font-data);
}

/*
 * Logo: the wordmark at 140px wide. GeneratePress's own Logo Width
 * (Customizer > Site Identity) uses a more specific selector, so it still wins.
 */
.header-image {
	width: 140px;
	height: auto;
}

/* Avatars ("אות קריאה"): round, and a quiet disc until avatars.js draws them. */
.comment-list .avatar,
.comment-meta .avatar {
	border-radius: 50%;
}

.antena-avatar:empty {
	background-color: var(--antena-tint);
	border-radius: 50%;
}

.antena-avatar svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* The "קול של אנטנה" chip after a voice's name in comments. */
.antena-tag {
	display: inline-block;
	margin-inline-start: 8px;
	padding: 1px 9px;
	border-radius: 999px;
	background-color: var(--antena-tint-blue);
	color: var(--antena-blue);
	font-family: var(--antena-font-data);
	font-size: 11.5px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.6;
	white-space: nowrap;
}