/*
 * SkillionsPro Portal - design tokens (light theme). Dark overrides live in dark.css.
 * Brand colours are for accents, icons and tints. Text and filled buttons use the *-strong / --spp-primary
 * variants, which meet WCAG AA (4.5:1) on white; raw #1DA1F2 is only 2.9:1.
 */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }

:root {
	/* Brand */
	--spp-blue: #1DA1F2;
	--spp-teal: #5CB8A8;
	--spp-pink: #F0436C;
	--spp-yellow: #FCC72E;
	--spp-purple: #7443E8;

	/* Accessible roles */
	--spp-primary: #0A6CA9;
	--spp-primary-hover: #085A8D;
	--spp-on-primary: #FFFFFF;
	--spp-on-primary-veil: rgba(0, 0, 0, .18); /* quote/pill inside an own (primary) chat bubble */
	--spp-primary-tint: rgba(29, 161, 242, .12);
	--spp-teal-strong: #23786B;
	--spp-teal-tint: rgba(92, 184, 168, .14);
	--spp-pink-strong: #C8264D;
	--spp-pink-tint: rgba(240, 67, 108, .12);
	--spp-yellow-strong: #8A6500;
	--spp-yellow-tint: rgba(252, 199, 46, .18);
	--spp-purple-strong: #5B2FCB;
	--spp-purple-tint: rgba(116, 67, 232, .12);
	--spp-success: #1A6B45;
	--spp-success-tint: rgba(30, 123, 79, .12);

	/* Surfaces and text */
	--spp-bg: #F4F7FA;
	--spp-surface: #FFFFFF;
	--spp-surface-2: #F8FAFC;
	--spp-border: #E3E8EF;
	--spp-border-strong: #7B8594; /* 3:1+ as an input border on surface-2 */
	--spp-text: #1F2937;
	--spp-muted: #5B6472;
	--spp-focus: #0A6CA9;
	--spp-overlay: rgba(15, 23, 32, .5);

	/* Portal accents */
	--spp-banner: #23786B; /* teal welcome banner: white text 5.3:1 */
	--spp-on-banner: #FFFFFF;
	--spp-banner-chip: rgba(0, 0, 0, .2);
	--spp-on-yellow: #1F2937; /* text/icons on the yellow support button */

	/* Shape, depth, type */
	--spp-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--spp-radius-card: 12px;
	--spp-radius: 8px;
	--spp-radius-full: 999px;
	--spp-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
	--spp-shadow-lg: 0 8px 32px rgba(16, 24, 40, .12);

	/* Spacing scale 4/8/12/16/24/32 */
	--spp-space-1: 4px;
	--spp-space-2: 8px;
	--spp-space-3: 12px;
	--spp-space-4: 16px;
	--spp-space-5: 24px;
	--spp-space-6: 32px;

	/* Motion */
	--spp-dur: 200ms;
	--spp-ease: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
	:root { --spp-dur: 0ms; }
}