/**
 * Organic Growth - design tokens.
 *
 * Every colour, space, size, radius and font used anywhere in the member
 * interface is declared here and nowhere else. No other stylesheet contains a
 * raw hex value or a raw pixel spacing figure.
 *
 * WHY THAT MATTERS TO YOU: when you want to change the platform's look later,
 * you edit this one file. Not 27 screens.
 *
 * DARK MODE is the same variables with different values. Nothing is duplicated,
 * nothing is downloaded twice, and switching needs no page reload.
 *
 * THE PALETTE, AND WHY THESE COLOURS:
 *
 *   Petrol   the primary action colour. A deep blue-green rather than the
 *            indigo every dashboard uses, so the platform does not look like a
 *            template someone bought.
 *   Brass    reserved exclusively for Coins. Never used for an ordinary button.
 *            If something is brass, it is money.
 *   Moss     success. Kept clearly apart from petrol so "approved" never reads
 *            as "this is the main button".
 *   Rose     destructive and error.
 *   Amber    warning.
 *
 * THE ONE SIGNATURE RULE: coin amounts are set in a tabular monospace face and
 * are the only monospace text in the member interface. A number that means
 * money is physically distinguishable from a number that means anything else,
 * at a glance, without reading the label.
 *
 * @package OrganicGrowth\Core
 * @since   1.4.0
 */

.og-app,
.og-scope {

	/* ---------------------------------------------------------- Brand */

	--og-petrol-50: #eef6f7;
	--og-petrol-100: #d3e8eb;
	--og-petrol-200: #a7d0d7;
	--og-petrol-300: #6fb0bb;
	--og-petrol-400: #3d8b9a;
	--og-petrol-500: #0e5c6b;
	--og-petrol-600: #0c4e5b;
	--og-petrol-700: #0a3f4a;
	--og-petrol-800: #082f37;
	--og-petrol-900: #061f24;

	--og-brass-100: #f6ecd6;
	--og-brass-300: #ddbd77;
	--og-brass-500: #a87a2b;
	--og-brass-700: #7c5a1f;

	--og-moss-100: #dff0e5;
	--og-moss-500: #2f7a47;
	--og-moss-700: #235c36;

	--og-amber-100: #fbeed6;
	--og-amber-500: #9a6700;
	--og-amber-700: #7a5200;

	--og-rose-100: #fbe4e2;
	--og-rose-500: #b42318;
	--og-rose-700: #8c1b13;

	--og-sky-100: #e0eefb;
	--og-sky-500: #1b6ec2;

	/* ------------------------------------------------------- Neutrals */

	--og-grey-0: #ffffff;
	--og-grey-25: #fafaf9;
	--og-grey-50: #f7f6f3;
	--og-grey-100: #eeedea;
	--og-grey-200: #e1e0dc;
	--og-grey-300: #c9c8c3;
	--og-grey-400: #a3a29d;
	--og-grey-500: #78776f;
	--og-grey-600: #57564f;
	--og-grey-700: #3c3b36;
	--og-grey-800: #26251f;
	--og-grey-900: #16150f;

	/* ------------------------------------------- Semantic: light mode */

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

	--og-text: var(--og-grey-900);
	--og-text-muted: var(--og-grey-600);
	--og-text-subtle: var(--og-grey-500);
	--og-text-inverse: var(--og-grey-0);

	--og-border: var(--og-grey-200);
	--og-border-strong: var(--og-grey-300);

	--og-primary: var(--og-petrol-500);
	--og-primary-hover: var(--og-petrol-600);
	--og-primary-soft: var(--og-petrol-50);
	--og-primary-text: #ffffff;

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

	--og-success: var(--og-moss-500);
	--og-success-soft: var(--og-moss-100);

	--og-warning: var(--og-amber-500);
	--og-warning-soft: var(--og-amber-100);

	--og-danger: var(--og-rose-500);
	--og-danger-soft: var(--og-rose-100);

	--og-info: var(--og-sky-500);
	--og-info-soft: var(--og-sky-100);

	--og-focus: var(--og-petrol-400);

	/* --------------------------------------------------------- Shadow */

	--og-shadow-sm: 0 1px 2px rgba(6, 31, 36, 0.06);
	--og-shadow: 0 1px 3px rgba(6, 31, 36, 0.08), 0 4px 12px rgba(6, 31, 36, 0.05);
	--og-shadow-lg: 0 8px 28px rgba(6, 31, 36, 0.12);

	/* ----------------------------------------------------- Typography */

	/*
	 * Bengali needs more vertical room than Latin. Nirmala UI ships with
	 * Windows, Noto Sans Bengali with Android and most Linux, and the system
	 * stack covers Apple devices. No font is downloaded from anywhere.
	 */
	--og-font: "Segoe UI", "Nirmala UI", "Noto Sans Bengali", "Hind Siliguri",
		-apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Money only. Tabular figures keep columns of coins vertically aligned. */
	--og-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
		Menlo, Consolas, monospace;

	--og-text-2xs: 11px;
	--og-text-xs: 12px;
	--og-text-sm: 13px;
	--og-text-base: 15px;
	--og-text-lg: 17px;
	--og-text-xl: 21px;
	--og-text-2xl: 26px;
	--og-text-3xl: 34px;

	--og-weight-normal: 400;
	--og-weight-medium: 500;
	--og-weight-semibold: 600;
	--og-weight-bold: 700;

	/* Generous, because Bengali conjuncts sit taller than Latin letters. */
	--og-leading-tight: 1.35;
	--og-leading-normal: 1.65;
	--og-leading-relaxed: 1.8;

	--og-tracking-tight: -0.01em;
	--og-tracking-normal: 0;
	--og-tracking-wide: 0.08em;

	/* --------------------------------------------------------- Layout */

	--og-space-1: 4px;
	--og-space-2: 8px;
	--og-space-3: 12px;
	--og-space-4: 16px;
	--og-space-5: 24px;
	--og-space-6: 32px;
	--og-space-7: 48px;
	--og-space-8: 64px;

	--og-radius-sm: 6px;
	--og-radius: 10px;
	--og-radius-lg: 14px;
	--og-radius-full: 999px;

	--og-rail-width: 236px;
	--og-rail-collapsed: 72px;
	--og-topbar-height: 60px;
	--og-content-max: 1180px;

	--og-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);

	--og-z-sticky: 100;
	--og-z-overlay: 900;
	--og-z-modal: 1000;
	--og-z-toast: 1100;
}

/* -------------------------------------------------------- Dark mode */

/*
 * Applied when the member chooses dark, and automatically when their device
 * asks for it and they have expressed no preference.
 *
 * The surface is a very dark petrol rather than pure black. Pure black against
 * white text causes visible halation on OLED phones, which is most of the
 * audience.
 */

.og-app[data-theme="dark"],
.og-scope[data-theme="dark"] {

	--og-bg: #0a1618;
	--og-bg-raised: #102226;
	--og-bg-sunken: #071114;
	--og-bg-inverse: var(--og-grey-50);

	--og-text: #e8eceb;
	--og-text-muted: #9aa8a8;
	--og-text-subtle: #78888a;
	--og-text-inverse: var(--og-grey-900);

	--og-border: #1c3339;
	--og-border-strong: #274850;

	--og-primary: #4aa0b0;
	--og-primary-hover: #63b3c1;
	--og-primary-soft: #10303a;
	--og-primary-text: #04191d;

	--og-coin: #ddbd77;
	--og-coin-soft: #2e2617;

	--og-success: #5cb47a;
	--og-success-soft: #15291d;

	--og-warning: #d3a44a;
	--og-warning-soft: #2b2213;

	--og-danger: #e8776c;
	--og-danger-soft: #2e1614;

	--og-info: #63a5e0;
	--og-info-soft: #12212f;

	--og-focus: #63b3c1;

	--og-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--og-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35);
	--og-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.55);
}

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

	.og-app[data-theme="auto"],
	.og-scope[data-theme="auto"] {

		--og-bg: #0a1618;
		--og-bg-raised: #102226;
		--og-bg-sunken: #071114;
		--og-bg-inverse: var(--og-grey-50);

		--og-text: #e8eceb;
		--og-text-muted: #9aa8a8;
		--og-text-subtle: #78888a;
		--og-text-inverse: var(--og-grey-900);

		--og-border: #1c3339;
		--og-border-strong: #274850;

		--og-primary: #4aa0b0;
		--og-primary-hover: #63b3c1;
		--og-primary-soft: #10303a;
		--og-primary-text: #04191d;

		--og-coin: #ddbd77;
		--og-coin-soft: #2e2617;

		--og-success: #5cb47a;
		--og-success-soft: #15291d;

		--og-warning: #d3a44a;
		--og-warning-soft: #2b2213;

		--og-danger: #e8776c;
		--og-danger-soft: #2e1614;

		--og-info: #63a5e0;
		--og-info-soft: #12212f;

		--og-focus: #63b3c1;

		--og-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
		--og-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35);
		--og-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.55);
	}
}