/**
 * CARIBICO UI Foundation System v1
 *
 * Tokens + opt-in utilities for future redesign.
 * Does NOT restyle existing pages. Use classes only when migrating UI.
 *
 * Typography: professional B2B, soft hierarchy, no pure black.
 * Cards: compact soft skeuomorphic surfaces.
 * Spacing: tight vertical rhythm.
 * Responsive: fluid containers for desktop / tablet / mobile.
 */

:root{
	/* —— Color foundation —— */
	--cwb-f-navy:#1B5A7A;
	--cwb-f-navy-hover:#164A65;
	--cwb-f-navy-active:#123E55;
	--cwb-f-navy-deep:#1A2B44;
	--cwb-f-blue:#2B6F94;
	--cwb-f-blue-soft:#EAF3F7;
	--cwb-f-success:#027A48;
	--cwb-f-success-soft:#ECFDF3;
	--cwb-f-warning:#B54708;
	--cwb-f-warning-soft:#FFFAEB;
	--cwb-f-danger:#B42318;
	--cwb-f-danger-soft:#FEF3F2;
	--cwb-f-bg:#F6F8FA;
	--cwb-f-bg-elevated:#FFFFFF;
	--cwb-f-bg-muted:#F8FAFB;
	--cwb-f-border:#D9E1E7;
	--cwb-f-border-soft:#E4E9ED;
	--cwb-f-border-strong:#C9DDE7;

	/* —— Text hierarchy (avoid pure #000) —— */
	--cwb-f-text:#1A2B44;
	--cwb-f-text-secondary:rgba(0,0,0,.55);
	--cwb-f-text-label:rgba(0,0,0,.45);
	--cwb-f-text-muted:rgba(0,0,0,.38);
	--cwb-f-text-on-navy:#FFFFFF;

	/* —— Typography scale —— */
	--cwb-f-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
	--cwb-f-fs-page-title:22px;
	--cwb-f-fs-page-title-max:24px;
	--cwb-f-fs-section:15px;
	--cwb-f-fs-label:11px;
	--cwb-f-fs-value:13px;
	--cwb-f-fs-body:13px;
	--cwb-f-fw-regular:400;
	--cwb-f-fw-medium:500;
	--cwb-f-fw-semibold:600;
	--cwb-f-fw-bold:700;
	--cwb-f-lh-tight:1.25;
	--cwb-f-lh-body:1.4;
	--cwb-f-tracking-label:.04em;

	/* —— Spacing (compact) —— */
	--cwb-f-space-xs:4px;
	--cwb-f-space-sm:8px;
	--cwb-f-space-md:12px;
	--cwb-f-space-lg:16px;
	--cwb-f-space-xl:24px;

	/* —— Card / elevation —— */
	--cwb-f-radius:10px;
	--cwb-f-radius-sm:8px;
	--cwb-f-shadow:0 1px 2px rgba(16,24,40,.04),0 2px 8px rgba(16,24,40,.06);
	--cwb-f-shadow-soft:0 1px 3px rgba(16,24,40,.04);
	--cwb-f-card-pad:var(--cwb-f-space-md);

	/* —— Layout —— */
	--cwb-f-content-max:1120px;
	--cwb-f-narrow-max:540px;
	--cwb-f-gutter:16px;
	--cwb-f-gutter-sm:12px;

	/* —— Shared viewport tokens (used by caribico-mobile.css) —— */
	--cwb-bp-phone:767px;
	--cwb-bp-tablet:1023px;
	--cwb-bp-nav:1100px;
	--cwb-tap:44px;
	--cwb-fs-min:12px;
	--cwb-fs-body-mobile:16px;
	--cwb-lh-mobile:1.5;
}

/* —— Typography utilities (opt-in) —— */
.cwb-f-page-title{
	margin:0;
	font-family:var(--cwb-f-font);
	font-size:clamp(20px,2.2vw,var(--cwb-f-fs-page-title-max));
	font-weight:var(--cwb-f-fw-bold);
	line-height:var(--cwb-f-lh-tight);
	letter-spacing:-.02em;
	color:var(--cwb-f-text);
}
.cwb-f-section-title{
	margin:0;
	font-family:var(--cwb-f-font);
	font-size:var(--cwb-f-fs-section);
	font-weight:var(--cwb-f-fw-semibold);
	line-height:var(--cwb-f-lh-tight);
	color:var(--cwb-f-text);
}
.cwb-f-label{
	margin:0;
	font-family:var(--cwb-f-font);
	font-size:var(--cwb-f-fs-label);
	font-weight:var(--cwb-f-fw-medium);
	line-height:var(--cwb-f-lh-body);
	letter-spacing:var(--cwb-f-tracking-label);
	text-transform:uppercase;
	color:var(--cwb-f-text-label);
}
.cwb-f-value{
	margin:0;
	font-family:var(--cwb-f-font);
	font-size:var(--cwb-f-fs-value);
	font-weight:var(--cwb-f-fw-medium);
	line-height:var(--cwb-f-lh-body);
	color:var(--cwb-f-text);
}
.cwb-f-body{
	margin:0;
	font-family:var(--cwb-f-font);
	font-size:var(--cwb-f-fs-body);
	font-weight:var(--cwb-f-fw-regular);
	line-height:var(--cwb-f-lh-body);
	color:var(--cwb-f-text-secondary);
}
.cwb-f-text-primary{color:var(--cwb-f-text)}
.cwb-f-text-secondary{color:var(--cwb-f-text-secondary)}
.cwb-f-text-label{color:var(--cwb-f-text-label)}

/* —— Card foundation (opt-in) —— */
.cwb-f-card{
	box-sizing:border-box;
	background:var(--cwb-f-bg-elevated);
	border:1px solid var(--cwb-f-border-soft);
	border-radius:var(--cwb-f-radius);
	box-shadow:var(--cwb-f-shadow);
	padding:var(--cwb-f-card-pad);
	color:var(--cwb-f-text);
}
.cwb-f-card.is-compact{
	padding:var(--cwb-f-space-sm) var(--cwb-f-space-md);
	box-shadow:var(--cwb-f-shadow-soft);
}
.cwb-f-card.is-muted{
	background:var(--cwb-f-bg-muted);
}
.cwb-f-card-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--cwb-f-space-sm);
	margin:0 0 var(--cwb-f-space-sm);
}
.cwb-f-card-body{
	display:grid;
	gap:var(--cwb-f-space-sm);
}

/* —— Spacing utilities —— */
.cwb-f-stack-sm{display:grid;gap:var(--cwb-f-space-sm)}
.cwb-f-stack-md{display:grid;gap:var(--cwb-f-space-md)}
.cwb-f-stack-lg{display:grid;gap:var(--cwb-f-space-lg)}
.cwb-f-row{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:var(--cwb-f-space-sm);
}
.cwb-f-gap-sm{gap:var(--cwb-f-space-sm)}
.cwb-f-gap-md{gap:var(--cwb-f-space-md)}
.cwb-f-gap-lg{gap:var(--cwb-f-space-lg)}
.cwb-f-mt-sm{margin-top:var(--cwb-f-space-sm)}
.cwb-f-mt-md{margin-top:var(--cwb-f-space-md)}
.cwb-f-mt-lg{margin-top:var(--cwb-f-space-lg)}
.cwb-f-mb-sm{margin-bottom:var(--cwb-f-space-sm)}
.cwb-f-mb-md{margin-bottom:var(--cwb-f-space-md)}
.cwb-f-mb-lg{margin-bottom:var(--cwb-f-space-lg)}

/* —— Status tone helpers —— */
.cwb-f-tone-success{color:var(--cwb-f-success)}
.cwb-f-tone-warning{color:var(--cwb-f-warning)}
.cwb-f-tone-danger{color:var(--cwb-f-danger)}
.cwb-f-tone-navy{color:var(--cwb-f-navy)}
.cwb-f-tone-blue{color:var(--cwb-f-blue)}

/* —— Responsive foundation —— */
.cwb-f-container{
	box-sizing:border-box;
	width:100%;
	max-width:var(--cwb-f-content-max);
	margin-left:auto;
	margin-right:auto;
	padding-left:var(--cwb-f-gutter);
	padding-right:var(--cwb-f-gutter);
}
.cwb-f-container.is-narrow{
	max-width:var(--cwb-f-narrow-max);
}
.cwb-f-grid-2{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:var(--cwb-f-space-md);
}
.cwb-f-grid-3{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:var(--cwb-f-space-md);
}

/* Tablet */
@media(max-width:1100px){
	:root{
		--cwb-f-gutter:14px;
		--cwb-f-fs-page-title:22px;
	}
	.cwb-f-grid-3{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

/* Mobile */
@media(max-width:760px){
	:root{
		--cwb-f-gutter:var(--cwb-f-gutter-sm);
		--cwb-f-fs-page-title:20px;
		--cwb-f-card-pad:var(--cwb-f-space-sm) var(--cwb-f-space-md);
		--cwb-f-space-lg:14px;
		--cwb-f-space-xl:18px;
	}
	.cwb-f-grid-2,
	.cwb-f-grid-3{
		grid-template-columns:1fr;
	}
	.cwb-f-page-title{
		font-size:var(--cwb-f-fs-page-title);
	}
}