/* TPI OS's colour tokens for the base's desk and web pages (T-042): the web app's values
   (apps/tpi_os/frontend/src/ui/styles/tokens.css), the subset the desk uses, the gilt pair with them (the gilt keeps
   its value in both themes, the text-grade gilt-ink lightens on dark); a test keeps every one equal. The only file of
   the desk theme that holds a colour value. Set on :root:root, which outranks the base's own :root wherever its
   sheets load (web pages load this one first). */

:root:root,
:root:root[data-theme="light"] {
	--tpi-black: #000000;
	--ink-1: #1A1A1A;
	--ink-2: #3F3F3F;
	--ink-3: #6C6C6C;
	--paper: #FAFAF8;
	--paper-2: #F4F3F0;
	--surface-card: #FFFFFF;
	--hairline: #E5E3DF;
	--control-border: #858583;
	--tpi-gilt: #AD8A45;
	--tpi-gilt-ink: #7A6230;
	--text-on-ink: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
	:root:root:not([data-theme="light"]) {
		--tpi-black: #FFFFFF;
		--ink-1: #E6E6E6;
		--ink-2: #C9C9C9;
		--ink-3: #9B9B9B;
		--paper: #0E0E0E;
		--paper-2: #1F1F1F;
		--surface-card: #161616;
		--hairline: #2A2A2A;
		--control-border: #7A7A7A;
		--tpi-gilt-ink: #C4A468;
		--text-on-ink: #0E0E0E;
	}
}

:root:root[data-theme="dark"] {
	--tpi-black: #FFFFFF;
	--ink-1: #E6E6E6;
	--ink-2: #C9C9C9;
	--ink-3: #9B9B9B;
	--paper: #0E0E0E;
	--paper-2: #1F1F1F;
	--surface-card: #161616;
	--hairline: #2A2A2A;
	--control-border: #7A7A7A;
	--tpi-gilt-ink: #C4A468;
	--text-on-ink: #0E0E0E;
}

/* TPI OS over the base's desk and web pages (T-042): Poppins light, TPI's ink-and-paper tokens (tokens.css, published
   in front of this sheet as one file), square corners, hairlines for structure and no shadows outside floating
   layers. The brand setup publishes it with each url(...) pointing at the published file. Web pages load it before the
   base's own sheets, so the variables are set on :root:root, which outranks the base's :root wherever it loads. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url(/files/Poppins-300.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(/files/Poppins-400.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(/files/Poppins-500.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 300; font-display: swap; src: url(/files/IBMPlexSansArabic-300.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url(/files/IBMPlexSansArabic-400.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url(/files/IBMPlexSansArabic-500.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }

:root:root,
:root:root[data-theme="light"] {
	/* the base's own variables, mapped to TPI's tokens (tokens.css) */
	--font-stack: "Poppins", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
	--border-radius-tiny: 0;
	--border-radius-sm: 0;
	--border-radius: 0;
	--border-radius-md: 0;
	--border-radius-lg: 0;
	--border-radius-xl: 0;
	--primary: var(--tpi-black);
	--primary-color: var(--tpi-black);
	--btn-primary: var(--tpi-black);
	--border-primary: var(--tpi-black);
	--brand-color: var(--tpi-black);
	--bg-color: var(--paper);
	--fg-color: var(--surface-card);
	--card-bg: var(--surface-card);
	--navbar-bg: var(--surface-card);
	--heading-color: var(--tpi-black);
	--text-color: var(--ink-1);
	--text-muted: var(--ink-3);
	--border-color: var(--hairline);
	--table-border-color: var(--hairline);
	--card-shadow: none;
	--btn-shadow: none;
	--shadow-xs: none;
	--shadow-sm: none;
}

body {
	font-family: var(--font-stack);
	font-weight: 300;
}

/* the base sets 600 and 700; the house style stops at 500 */
:root:root :is(h1, h2, h3, h4, h5, h6, b, strong, .bold, th, .btn, .indicator-pill, .font-medium) {
	font-weight: 500;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--tpi-black);
	border-color: var(--tpi-black);
	color: var(--text-on-ink);
}

/* Arabic joins only without letter-spacing */
[dir="rtl"] *,
:lang(ar) {
	letter-spacing: normal !important;
}

/* The lockup is artwork: the white one on the dark theme, never a recoloured ink one. The signed-out pages carry no
   theme attribute and go dark with the browser (tokens.css), so the same swap follows the browser there. */
[data-theme="dark"] #brand-logo,
[data-theme="dark"] img.app-logo,
[data-theme="dark"] .splash img {
	content: url(/files/tpi-os-lockup-white.svg);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) #brand-logo,
	:root:not([data-theme]) img.app-logo,
	:root:not([data-theme]) .splash img {
		content: url(/files/tpi-os-lockup-white.svg);
	}
}

/* Ink, not the base's colours: desktop and sidebar icons in greyscale; the empty icon desk.js gives an icon-less
   menu entry is not drawn. */
.desktop-icon img.app-icon,
.sidebar-item-icon img,
.header-logo img {
	filter: grayscale(1);
}

.desktop-icon .icon-container {
	background-color: var(--paper-2) !important;
}

.desktop-icon .desktop-alphabet {
	color: var(--ink-1) !important;
}

img[src="data:,"] {
	display: none;
}

/* The sidebar header's subtitle names the base app a workspace belongs to. */
:root:root .sidebar-header .header-subtitle {
	display: none;
}

/* The notifications panel's "What's New" tab lists the base's own release notes, from its own site. */
:root:root .notification-item-tabs #changelog_feed {
	display: none;
}

/* The one gilt gesture of each surface, drawn, never filled: on a desk page and on the desktop, a 40 px gilt lead on
   the masthead's closing hairline, where the title (or the lockup) starts; on the sign-in page, the masthead tick
   above the heading. Only one of the three is ever on a page; every other line stays ink. */
:root:root .page-head::after,
:root:root .desktop-navbar::after {
	content: "";
	position: absolute;
	inset-block-end: -1px;
	inset-inline-start: 15px;
	inline-size: 40px;
	border-block-end: 2px solid var(--tpi-gilt);
}

:root:root .desktop-navbar::after {
	inset-inline-start: 20px;
}

:root:root .page-card-head-text::before {
	content: "";
	display: block;
	inline-size: 40px;
	margin-block-end: 12px;
	border-block-start: 2px solid var(--tpi-gilt);
}