/*
 * Admiralty Chart: the design tokens of ChartsCheck (see PRODUCT.md and .impeccable/surfaces/template-default-phtml.md).
 * One sheet for the whole site: a day chart (light) and a night chart (dark). The page picks the theme with <html data-theme="light|dark">,
 * the chart application stores the choice in localStorage['theme'] (dev/theme.js), the other pages read the same key (css/admiralty-theme.js).
 * Colors carry meaning: magenta marks the ONE active or selected thing, teal/brick mean up/down and are ALWAYS paired with an arrow or a line form,
 * never hue alone. Fonts: Source Sans 3 (SIL OFL 1.1, fonts/source-sans-3/LICENSE.txt), self-hosted, Latin subset.
 */

@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-sans-3/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-sans-3/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/source-sans-3/source-sans-3-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/source-sans-3/source-sans-3-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/source-sans-3/source-sans-3-latin-600-italic.woff2") format("woff2"); }

:root {
	color-scheme: light;

	/* water: the grounds, from the page to the panels */
	--ac-water: #EAF3F6;		/* page ground, deep water */
	--ac-shallow: #BCDCE8;		/* hero band, selected tab, banded areas */
	--ac-shallow-soft: #D6E9F0;	/* zebra rows, hover, chart bands */
	--ac-panel: #FFFFFF;		/* cards, tables, inputs */

	/* ink */
	--ac-ink: #14232E;			/* text, solid buttons */
	--ac-ink-soft: #3B5262;		/* secondary text */
	--ac-ink-muted: #455F6F;	/* captions, units (4.5:1 on panel, water and shallow) */
	--ac-on-ink: #FFFFFF;		/* text on the ink */

	/* lines */
	--ac-line: #5E8A9E;			/* borders of controls (3:1 on water and panel) */
	--ac-line-soft: #C3DAE4;	/* hairlines of tables and tiles */

	/* meaning */
	--ac-magenta: #AD1456;		/* the one active or selected thing, annotations, focus (4.5:1 on every ground) */
	--ac-magenta-soft: #F7DDE8;
	--ac-up: #0A6A57;			/* up, always with an arrow (4.5:1 on every ground) */
	--ac-down: #B23A1E;			/* down, always with an arrow */
	--ac-land: #E9D8A6;			/* buff 'land' accent, small labels only */
	--ac-land-ink: #5A4A12;

	/* shape and rhythm */
	--ac-radius: 4px;
	--ac-radius-lg: 8px;
	--ac-shadow: 0 1px 2px rgba(20, 35, 46, .08), 0 6px 18px rgba(20, 35, 46, .06);
	--ac-space: 8px;			/* the 8px grid: use multiples */
	--ac-measure: 68ch;

	/* type */
	--ac-font: "Source Sans 3", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ac-num: "tnum" 1, "lnum" 1;	/* font-feature-settings of every figure */
}

:root[data-theme="dark"] {
	color-scheme: dark;

	--ac-water: #0E1B23;
	--ac-shallow: #17303D;
	--ac-shallow-soft: #142A35;
	--ac-panel: #132530;

	--ac-ink: #E6F1F5;
	--ac-ink-soft: #B3C9D3;
	--ac-ink-muted: #92AAB7;
	--ac-on-ink: #0E1B23;

	--ac-line: #5E8296;
	--ac-line-soft: #24404E;

	--ac-magenta: #FF6FA5;
	--ac-magenta-soft: #3A1B2B;
	--ac-up: #3DD6B0;
	--ac-down: #FF8A65;
	--ac-land: #3A3422;
	--ac-land-ink: #E9D8A6;

	--ac-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .25);
}