/*
 * Acredita Design System tokens: the brand's colours, type, shapes and shadows, in one place.
 * The app and the landing read them from here, and the emails of acredita-api copy their values.
 * Before changing or adding one, read the Design System (see «Sistema de diseño» in the README).
 */

:root {
	/* Brand. Orange is the brand colour: never put white text on it, use --color-navy-950. */
	--color-orange: #ff5900;
	--color-orange-hover: #ff7226; /* the orange with 15% white, as src/lib/theme.js computes it */
	--color-orange-ink: #b83f00; /* orange text on light backgrounds (5.6:1 on white) */
	--color-orange-on-dark: #ff8a3d; /* orange text on navy (5.2:1) */
	--color-orange-soft: #ffe3d4;

	--color-navy-950: #051a2e; /* text on orange (5.6:1) */
	--color-navy-900: #0a2a48;
	--color-navy: #0d375e;
	--color-navy-700: #164a78;
	--color-navy-500: #3a6e9e;
	--color-navy-300: #9db8d2;
	--color-navy-100: #dde7f1;
	--color-navy-50: #f1f5f9;

	/* Text, surfaces and lines */
	--color-ink: var(--color-navy-900);
	--color-ink-soft: #46596e; /* secondary text (7.2:1 on white) */
	--color-ink-muted: #5e7086; /* hints, placeholders and icons (5.1:1 on white) */
	--color-surface: #ffffff;
	--color-background: var(--color-navy-50);
	--color-line: var(--color-navy-100); /* dividers and the borders of boxes */
	--color-line-strong: #7a8da3; /* borders that identify a control, like a field (3.4:1) */
	--color-focus: var(--color-navy);

	/* States: the strong colour reads as text on white and on its soft background */
	--color-success: #0f6b45;
	--color-success-soft: #e3f4ea;
	--color-danger: #b42318;
	--color-danger-soft: #fde7e5;
	--color-warning: #8a5300;
	--color-warning-soft: #fff1d6;
	--color-info-soft: #e8eff6;

	/*
	 * Charts: the series take these colours in this order, never cycled (src/components/chart.svelte
	 * copies them, as the canvas can't read CSS). A lighter navy, as the brand's is too dark to tell
	 * apart from the others: the three pass the dataviz palette validator on white (lightness,
	 * chroma, colour blindness and 3:1 contrast).
	 */
	--color-chart-1: #1f5f99;
	--color-chart-2: var(--color-orange);
	--color-chart-3: #2a9d6e;
	--color-chart-grid: var(--color-navy-100);
	--color-chart-axis: var(--color-navy-300);

	/*
	 * Theme: what an organization can customize (src/lib/theme.js). Only for the header, the
	 * active menu item and the buttons; the "on" colours are the text on top of them. The header
	 * only has icons and the logo, which can stay white on the orange (3.1:1, enough for graphics).
	 */
	--theme-primary: var(--color-orange);
	--theme-primary-hover: var(--color-orange-hover);
	--theme-on-primary: var(--color-navy-950);
	--theme-on-header: #ffffff;
	--theme-secondary: var(--color-navy);
	--theme-secondary-hover: var(--color-navy-700);
	--theme-on-secondary: #ffffff;

	/* Type: Plus Jakarta Sans for everything, Archivo for the big titles */
	--font-sans: 'Plus Jakarta Sans Variable', system-ui, -apple-system, 'Segoe UI', Roboto, Arial,
		sans-serif;
	--font-display: 'Archivo Variable', var(--font-sans);

	--text-tiny: 0.75rem;
	--text-small: 0.875rem;
	--text-medium: 1rem;
	--text-big: 1.25rem;
	--text-huge: 2rem;

	/* Shapes: pill buttons, 10 px fields and menus, 16 px boxes */
	--radius-small: 6px;
	--radius-field: 10px;
	--radius-card: 16px;
	--radius-pill: 999px;

	/* Shadows, tinted with the ink */
	--shadow-small: 0 1px 2px rgb(10 42 72 / 0.06), 0 2px 8px -2px rgb(10 42 72 / 0.1);
	--shadow-medium: 0 2px 4px rgb(10 42 72 / 0.04), 0 12px 32px -12px rgb(10 42 72 / 0.24);
	--shadow-large: 0 4px 8px rgb(10 42 72 / 0.04), 0 32px 64px -24px rgb(10 42 72 / 0.32);

	--space-tiny: 0.4rem;
	--space-small: 0.8rem;
	--space-medium: 1.4rem;
	--space-big: 2rem;
	--space-huge: 3.2rem;
}