/* ==========================================================================
	SECTION: COLOR TOKENS
========================================================================== */

/* -- Foundation (light theme) ------------------------------------------- */
/* Brand: Teal + Navy | Neutrals: Navy tints + Sand tints */
:root {

	/* -- Core / Brand ----------------------------------------------------- */
	--white: #fff;

	--teal-100: #03ddc2;
	--navy-100: #253746;

	/* Deep surface (footer / contrast sections) */
	--ink-100: #1d252d;

	/* -- Teal (Monochromatic) -------------------------------------------- */
	--teal-tint-95: #f2fdfc;
	--teal-tint-85: #d9faf6; /* card background */
	--teal-tint-70: #b3f5ed; /* border color */
	--teal-tint-45: #74ecdd;

	--teal-tone-70: #86cbc6;

	--teal-shade-10: #06ccb6;
	--teal-shade-25: #0cb4a3;
	--teal-shade-40: #119b90;
	--teal-shade-55: #16827e;
	--teal-shade-70: #1b696b;
	--teal-shade-85: #205059;

	/* -- Navy “Grays” (Neutral system) ----------------------------------- */
	--navy-tint-45: #8f99a0; /* muted/tertiary text on light backgrounds */
	--navy-tint-20: #515f6b; /* secondary text */
	--navy-tint-5: #30414f; /* subdued icons, labels, and stronger supporting text */

	/* -- Sand (Warm neutrals) -------------------------------------------- */
	--sand-100: #d0ad96;
	--sand-tint-95: #fdfbfa; /* optional: ultra-light warm canvas */
	--sand-tint-90: #faf7f4; /* background option */
	--sand-tint-85: #f8f3ef; /* card background */
	--sand-tint-60: #ecded5; /* border color */

	/* -- Status / Messaging ---------------------------------------------- */
	--red-100: #c81d25;
	--red-tint-95: #fcf4f4;
	--red-tint-80: #f4d2d3;

	--yellow-100: #f2c94c;
	--yellow-tint-85: #fdf7e4;
	--yellow-tint-45: #f8e19d;
	
	/* -- Social Brand Colors ----------------------------------------------- */
	--social-facebook: #1877f2;
	--social-instagram: #ff0069;
	--social-x: #000;
	--social-linkedin: #0a66c2;
	--social-pinterest: #e60023;
	--social-youtube: #ff0033;

	/* -- Universal UI Stroke --------------------------------------------- */
	/* one border token */
	/* Works across white / sand-85 / teal-85 */
	--ui-stroke-1: #e5e0dc; /* default borders, dividers, input resting borders */

	/* Optional stronger line (dense tables / no-shadows everywhere) */
	--ui-stroke-2: #d9d3ce;

	/* -- Semantic aliases (recommended) ---------------------------------- */
	/* Use these in components instead of raw palette values. */
	--bg-page: var(--white);
	--bg-section: var(--sand-tint-85); /* your common warm section */
	--bg-brand-section: var(--teal-tint-85); /* featured/selected moments */

	--surface-card: var(--white);
	
	--surface-card-muted: var(--sand-tint-85);
	/*--border-default: var(--sand-tint-60);*/

	--surface-card-featured: var(--teal-tint-85);
	--border-featured: var(--teal-tint-70);

	--border-default: var(--ui-stroke-1);
	--border-strong: var(--ui-stroke-2);

	--text-primary: var(--navy-100);
	--text-secondary: var(--navy-tint-20);
	--text-muted: var(--navy-tint-45);

	--link: var(--teal-shade-55);
	--link-hover: var(--teal-shade-70);

	--btn-primary-bg: var(--teal-100);
	--btn-primary-text: var(--navy-100); /* (avoid white on teal for normal text) */
	--btn-primary-hover-bg: var(--teal-shade-10);
	--btn-primary-active-bg: var(--teal-shade-25);

	--focus-ring: var(--teal-shade-40);

	--danger: var(--red-100);
	--danger-surface: var(--red-tint-95);

	--warning: var(--yellow-100);
	--warning-surface: var(--yellow-tint-85);
}

/* Example: footer base (optional starter)
.site-footer {
	background: var(--ink-100);
	color: var(--white);
}

.site-footer a {
	color: var(--teal-100);
}

.site-footer .divider {
	border-top: 1px solid var(--navy-tint-5);
}
*/