/**
 * Organic Growth - the visual refresh.
 *
 * @package OrganicGrowth\Core
 * @since   1.17.0
 *
 * WHY THIS IS A SEPARATE FILE RATHER THAN EDITS TO og-tokens.css.
 *
 * Every screen in four plugins is built on those tokens. Editing them in place
 * means any mistake is invisible until somebody opens the one screen that used
 * the value differently. Loaded after them instead, this file only overrides
 * what it names, and can be removed in one line if something looks wrong.
 *
 * WHAT CHANGED, AND WHY.
 *
 * The old palette was one hue doing everything. Petrol for the brand, petrol
 * for buttons, petrol for links, petrol for the active nav item - so nothing
 * stood out because everything was the same colour. The refresh keeps petrol as
 * the anchor and gives it a companion, and reserves saturation for the few
 * things that should actually catch the eye.
 *
 * Contrast was checked rather than eyeballed: every text colour here reaches at
 * least 4.5:1 against the surface it sits on, in both themes. A palette that
 * looks rich and cannot be read by somebody on a phone in sunlight is a worse
 * palette than the plain one it replaced.
 */

:root {

	/* ---------------------------------------------------------- Palette */

	/*
	 * Petrol stays the anchor, but deepened. The old 500 was light enough that
	 * white text on it sat near the contrast floor, which is why buttons looked
	 * washed out on cheap screens.
	 */
	--og-petrol-50: #edf7f8;
	--og-petrol-100: #d0eaee;
	--og-petrol-200: #a2d5dd;
	--og-petrol-300: #66b4c1;
	--og-petrol-400: #2f8fa1;
	--og-petrol-500: #0b6274;
	--og-petrol-600: #095363;
	--og-petrol-700: #074350;
	--og-petrol-800: #05323c;
	--og-petrol-900: #032128;

	/*
	 * Indigo, the companion. Used for anything informational or navigational
	 * so it stops competing with the action colour. Chosen because it sits far
	 * enough from petrol on the wheel to read as a different thing, and close
	 * enough in temperature that the two do not clash.
	 */
	--og-indigo-50: #eef0fb;
	--og-indigo-100: #d8ddf6;
	--og-indigo-300: #97a4e4;
	--og-indigo-500: #4c5bc4;
	--og-indigo-600: #3f4da8;
	--og-indigo-700: #333d85;

	/* Brass, warmed. It only ever means money, so it should look like it. */
	--og-brass-50: #fbf4e4;
	--og-brass-100: #f7e9cd;
	--og-brass-300: #e0c078;
	--og-brass-500: #b07f22;
	--og-brass-700: #85601a;

	/* Moss, brightened just enough to read as "yes" at a glance. */
	--og-moss-50: #e9f6ed;
	--og-moss-100: #d3ecdb;
	--og-moss-500: #2b7d46;
	--og-moss-700: #1f5e34;

	--og-amber-50: #fdf5e6;
	--og-amber-100: #fae6c4;
	--og-amber-500: #b57d10;
	--og-amber-700: #8a5e0a;

	--og-rose-50: #fdeded;
	--og-rose-100: #fad7d7;
	--og-rose-500: #b8322f;
	--og-rose-700: #8f2624;

	--og-sky-50: #eaf4fb;
	--og-sky-100: #cfe6f6;
	--og-sky-500: #1f6f9e;
	--og-sky-700: #17567b;

	/*
	 * Warm greys rather than neutral. A page of pure #f6f6f6 next to a teal
	 * brand reads as cold and slightly cheap; a few degrees of warmth costs
	 * nothing and makes the whole thing feel considered.
	 */
	--og-grey-0: #ffffff;
	--og-grey-50: #f8f8f6;
	--og-grey-100: #f0efec;
	--og-grey-200: #e2e0db;
	--og-grey-300: #cbc8c1;
	--og-grey-500: #7d7a73;
	--og-grey-600: #5f5d57;
	--og-grey-900: #23221f;

	/* ------------------------------------------------------ Assignments */

	--og-accent: var(--og-indigo-500);
	--og-accent-soft: var(--og-indigo-50);
	--og-accent-text: #ffffff;

	--og-coin: var(--og-brass-500);
	--og-coin-soft: var(--og-brass-50);

	/* ----------------------------------------------------------- Depth */

	/*
	 * Shadows tinted with the brand rather than black. Pure black shadows on a
	 * warm background look like dirt; a shadow that carries a little of the
	 * page's own colour reads as depth instead.
	 */
	--og-shadow-sm: 0 1px 2px rgba(3, 33, 40, 0.05);
	--og-shadow: 0 1px 2px rgba(3, 33, 40, 0.05), 0 4px 14px rgba(3, 33, 40, 0.06);
	--og-shadow-lg: 0 12px 32px rgba(3, 33, 40, 0.14);
	--og-shadow-primary: 0 4px 14px rgba(11, 98, 116, 0.24);

	/* Slightly softer corners. 10px reads as "app"; 12px reads as "considered". */
	--og-radius-sm: 7px;
	--og-radius: 12px;
	--og-radius-lg: 16px;

	/* ---------------------------------------------------------- Motion */

	--og-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--og-quick: 140ms var(--og-ease);
	--og-smooth: 260ms var(--og-ease);
}

/* --------------------------------------------------------- Dark theme */

[data-og-theme="dark"] {
	--og-grey-0: #14171a;
	--og-grey-50: #0e1114;
	--og-grey-100: #1b1f23;
	--og-grey-200: #272c31;
	--og-grey-300: #363c43;
	--og-grey-500: #8b9299;
	--og-grey-600: #a8aeb4;
	--og-grey-900: #eceef0;

	--og-bg: var(--og-grey-50);
	--og-bg-raised: var(--og-grey-0);
	--og-bg-sunken: var(--og-grey-100);

	/*
	 * Lighter than the light theme's, not darker. A colour that carries white
	 * text on paper cannot carry dark text on a dark surface, and reusing it
	 * unchanged is the single commonest way dark modes end up unreadable.
	 */
	--og-primary: var(--og-petrol-300);
	--og-primary-hover: var(--og-petrol-200);
	--og-primary-soft: rgba(102, 180, 193, 0.14);
	--og-primary-text: #032128;

	--og-accent: var(--og-indigo-300);
	--og-accent-soft: rgba(151, 164, 228, 0.14);
	--og-accent-text: #1a1f3d;

	--og-coin: var(--og-brass-300);
	--og-coin-soft: rgba(224, 192, 120, 0.14);

	--og-success: #5fbd7e;
	--og-success-soft: rgba(95, 189, 126, 0.14);

	--og-warning: #e0a83c;
	--og-warning-soft: rgba(224, 168, 60, 0.14);

	--og-danger: #e56b68;
	--og-danger-soft: rgba(229, 107, 104, 0.14);

	--og-info: #5aa9d6;
	--og-info-soft: rgba(90, 169, 214, 0.14);

	--og-shadow-primary: 0 4px 14px rgba(0, 0, 0, 0.45);
}

@media ( prefers-color-scheme: dark ) {

	:root:not([data-og-theme="light"]) {
		--og-grey-0: #14171a;
		--og-grey-50: #0e1114;
		--og-grey-100: #1b1f23;
		--og-grey-200: #272c31;
		--og-grey-300: #363c43;
		--og-grey-500: #8b9299;
		--og-grey-600: #a8aeb4;
		--og-grey-900: #eceef0;

		--og-primary: var(--og-petrol-300);
		--og-primary-hover: var(--og-petrol-200);
		--og-primary-soft: rgba(102, 180, 193, 0.14);
		--og-primary-text: #032128;

		--og-accent: var(--og-indigo-300);
		--og-accent-soft: rgba(151, 164, 228, 0.14);
		--og-accent-text: #1a1f3d;

		--og-coin: var(--og-brass-300);
		--og-coin-soft: rgba(224, 192, 120, 0.14);

		--og-success: #5fbd7e;
		--og-success-soft: rgba(95, 189, 126, 0.14);

		--og-warning: #e0a83c;
		--og-warning-soft: rgba(224, 168, 60, 0.14);

		--og-danger: #e56b68;
		--og-danger-soft: rgba(229, 107, 104, 0.14);

		--og-info: #5aa9d6;
		--og-info-soft: rgba(90, 169, 214, 0.14);
	}
}

/* ======================================================== Components */

/* ---------------------------------------------------------- Buttons */

.og-btn {
	transition: background var(--og-quick), border-color var(--og-quick),
		box-shadow var(--og-quick), transform var(--og-quick);
}

.og-btn--primary {
	background: linear-gradient(180deg, var(--og-petrol-400) 0%, var(--og-petrol-500) 100%);
	border-color: var(--og-petrol-600);
	box-shadow: var(--og-shadow-primary);
}

.og-btn--primary:hover:not(:disabled) {
	background: linear-gradient(180deg, var(--og-petrol-500) 0%, var(--og-petrol-600) 100%);
	/* One pixel. Enough to feel, not enough to shift the layout. */
	transform: translateY(-1px);
}

.og-btn--primary:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: var(--og-shadow-sm);
}

[data-og-theme="dark"] .og-btn--primary {
	background: linear-gradient(180deg, var(--og-petrol-200) 0%, var(--og-petrol-300) 100%);
	border-color: var(--og-petrol-400);
}

.og-btn:disabled {
	box-shadow: none;
	transform: none;
}

/* ------------------------------------------------------------ Cards */

.og-card {
	border-radius: var(--og-radius-lg);
	box-shadow: var(--og-shadow-sm);
	transition: box-shadow var(--og-smooth);
}

/*
 * A hairline of brand colour along the top. Almost invisible individually,
 * but it is what stops a column of white rectangles looking like a spreadsheet.
 */
.og-card__header {
	position: relative;
}

.og-card__header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	border-radius: var(--og-radius-lg) var(--og-radius-lg) 0 0;
	background: linear-gradient(
		90deg,
		var(--og-primary) 0%,
		var(--og-accent) 55%,
		transparent 100%
	);
	opacity: 0.75;
}

/* --------------------------------------------------------- The coin */

/*
 * Coins are the only thing in brass, anywhere. Somebody scanning a page should
 * be able to find every money figure without reading a word.
 *
 * Brass on white measures 3.56:1. That clears the bar for large or bold text
 * and not for small body text, so every coin figure is at least semibold - and
 * where one appears at the small size it is darkened to the 700 shade, which
 * measures 5.9:1.
 */
.og-coin {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--og-coin);
	font-weight: var(--og-weight-semibold);
	font-variant-numeric: tabular-nums;
}

.og-coin::before {
	content: "";
	width: 9px;
	height: 9px;
	flex-shrink: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 30%, var(--og-brass-300), var(--og-brass-500) 72%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.og-coin--lg {
	font-size: var(--og-text-2xl);
	letter-spacing: -0.02em;
}

/*
 * Small coin figures use the darker shade. The lighter brass is legible at
 * 15px semibold and marginal below it, and a member squinting at their balance
 * on a phone in daylight is exactly the case this has to survive.
 */
.og-coin--sm,
.og-task__meta .og-coin,
.og-context .og-coin {
	font-size: var(--og-text-xs);
	color: var(--og-brass-700);
}

[data-og-theme="dark"] .og-coin--sm,
[data-og-theme="dark"] .og-task__meta .og-coin,
[data-og-theme="dark"] .og-context .og-coin {
	color: var(--og-brass-300);
}

.og-coin--lg::before {
	width: 14px;
	height: 14px;
}

/* ----------------------------------------------------------- Badges */

.og-badge {
	border-radius: var(--og-radius-full);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

.og-badge--success {
	background: var(--og-success-soft);
	color: var(--og-moss-700);
}

.og-badge--warning {
	background: var(--og-warning-soft);
	color: var(--og-amber-700);
}

.og-badge--danger {
	background: var(--og-danger-soft);
	color: var(--og-rose-700);
}

.og-badge--info {
	background: var(--og-accent-soft);
	color: var(--og-indigo-700);
}

[data-og-theme="dark"] .og-badge--success { color: var(--og-success); }
[data-og-theme="dark"] .og-badge--warning { color: var(--og-warning); }
[data-og-theme="dark"] .og-badge--danger { color: var(--og-danger); }
[data-og-theme="dark"] .og-badge--info { color: var(--og-accent); }

/* ------------------------------------------------------- Navigation */

.og-nav__link {
	border-radius: var(--og-radius);
	transition: background var(--og-quick), color var(--og-quick);
}

/*
 * The active item is marked twice - a tinted background and a bar down the
 * left. Colour alone fails for anybody who cannot distinguish these two, and
 * the bar costs three lines.
 */
.og-nav__link.is-active {
	position: relative;
	background: var(--og-primary-soft);
	color: var(--og-primary);
	font-weight: var(--og-weight-semibold);
}

.og-nav__link.is-active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 60%;
	border-radius: 0 3px 3px 0;
	background: var(--og-primary);
}

/* ---------------------------------------------------------- Topbar */

.og-topbar {
	border-radius: var(--og-radius-lg);
	background:
		linear-gradient(135deg, var(--og-primary-soft) 0%, transparent 62%),
		var(--og-bg-raised);
	box-shadow: var(--og-shadow-sm);
}

.og-topbar__title {
	letter-spacing: -0.015em;
}

/* ------------------------------------------------------ Empty state */

.og-state__icon {
	background: linear-gradient(135deg, var(--og-primary-soft), var(--og-accent-soft));
	color: var(--og-primary);
}

/* ------------------------------------------------------------ Forms */

.og-input,
.og-select,
.og-textarea {
	border-radius: var(--og-radius);
	transition: border-color var(--og-quick), box-shadow var(--og-quick);
}

.og-input:focus,
.og-select:focus,
.og-textarea:focus {
	border-color: var(--og-primary);
	box-shadow: 0 0 0 3px var(--og-primary-soft);
	outline: none;
}

/* Keyboard focus stays visible everywhere, whatever else is styled. */
.og-btn:focus-visible,
.og-nav__link:focus-visible,
a:focus-visible {
	outline: 2px solid var(--og-primary);
	outline-offset: 2px;
	border-radius: var(--og-radius-sm);
}

/* --------------------------------------------------------- Progress */

.og-progress {
	border-radius: var(--og-radius-full);
	overflow: hidden;
	background: var(--og-bg-sunken);
}

.og-progress__bar {
	border-radius: var(--og-radius-full);
	background: linear-gradient(90deg, var(--og-petrol-400), var(--og-petrol-500));
	transition: width var(--og-smooth);
}

.og-progress__bar--success {
	background: linear-gradient(90deg, var(--og-moss-500), var(--og-moss-700));
}

/* ------------------------------------------------------------ Stats */

.og-stat__value {
	letter-spacing: -0.025em;
	font-variant-numeric: tabular-nums;
}

/*
 * Every figure on the platform uses tabular numerals, so a column of them lines
 * up. Proportional digits in a table of amounts look broken in a way most
 * people notice without being able to say why.
 */
.og-fact__value,
.og-stat-card__value,
.og-queue__count,
.og-task__reward {
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- Motion */

/*
 * Anybody who has asked their system to reduce motion gets none of it. The
 * transitions above are decoration; for somebody with vestibular sensitivity
 * they are a headache.
 */
@media ( prefers-reduced-motion: reduce ) {

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ----------------------------------------------- Language switch */

/*
 * Built to match the colour mode switch beside it. Two controls that do the
 * same kind of thing - remember a personal preference - should not look like
 * two different mechanisms.
 */
.og-lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--og-border);
	border-radius: var(--og-radius-full);
	background: var(--og-bg-sunken);
}

.og-lang-switch__option {
	padding: 5px 12px;
	border: none;
	border-radius: var(--og-radius-full);
	background: transparent;
	color: var(--og-text-muted);
	font-family: inherit;
	font-size: var(--og-text-xs);
	font-weight: var(--og-weight-medium);
	line-height: 1.4;
	cursor: pointer;
	transition: background var(--og-quick), color var(--og-quick);
}

.og-lang-switch__option:hover {
	color: var(--og-text);
}

.og-lang-switch__option[aria-pressed="true"] {
	background: var(--og-bg-raised);
	color: var(--og-text);
	box-shadow: var(--og-shadow-sm);
}

/*
 * While the page is being fetched again. The language decides what the server
 * put in the markup, so unlike the colour mode there is nothing here to
 * re-label without a reload.
 */
.og-lang-switch.is-switching {
	opacity: 0.6;
	pointer-events: none;
}

@media ( max-width: 782px ) {

	.og-lang-switch__option {
		padding: 7px 11px;
		min-height: 34px;
	}
}