/* ============================================================
   MARMARIS — Shared Design System
   Mirrors marmaris-insurance/static/css/marmaris.css
   Ubuntu Sans (body) | Ubuntu Condensed (labels) | Ubuntu Sans Mono (currency) | Cera Pro (logo)
   Primary #8B0000 | Complementary #000034
   ============================================================ */

/* ── FONT-FACE ───────────────────────────────────────────── */
@font-face {
	font-family: 'Cera Pro';
	src: url('../assets/fonts/cera-bold.woff2') format('woff2'),
		 url('../assets/fonts/cera-pro-bold.ttf') format('truetype');
	font-weight: 700 800;
	font-style: normal;
	font-display: swap;
}

/* ── 0. TOKENS ───────────────────────────────────────────── */
:root {
	/* Core palette */
	--color-primary: #8B0000;
	--color-primary-light: #B22222;
	--color-primary-lighter: #D44A4A;
	--color-primary-dark: #5C0000;
	--color-primary-subtle: #F5E6E6;
	--color-primary-rgb: 139, 0, 0;
	--color-primary-alpha-10: rgba(139, 0, 0, 0.10);
	--color-primary-alpha-20: rgba(139, 0, 0, 0.20);

	--color-complementary: #000034;
	--color-complementary-light: #1A1A5E;
	--color-complementary-lighter: #2E2E82;
	--color-complementary-subtle: #E8E8F0;

	/* Neutrals */
	--color-deep: #1A1A1A;
	--color-mid: #999999;
	--color-light: #EAEAEA;
	--color-white: #FAFAFA;
	--color-pure: #FFFFFF;

	--color-gray-50: #F7F7F7;
	--color-gray-100: #EAEAEA;
	--color-gray-200: #D4D4D4;
	--color-gray-300: #B3B3B3;
	--color-gray-400: #999999;
	--color-gray-500: #737373;
	--color-gray-600: #525252;
	--color-gray-700: #3D3D3D;

	/* Semantic */
	--color-success: #1B7340;
	--color-success-light: #22914F;
	--color-success-subtle: #E6F4EC;
	--color-warning: #946B00;
	--color-warning-light: #B8860B;
	--color-warning-subtle: #FFF8E6;
	--color-error: #C41E3A;
	--color-error-subtle: #FDE8EB;
	--color-info: #1A5276;
	--color-info-light: #2471A3;
	--color-info-subtle: #E8F0F7;

	/* Surfaces */
	--surface-page: var(--color-white);
	--surface-raised: var(--color-pure);
	--surface-sunken: #F0F0F0;
	--surface-overlay: rgba(26, 26, 26, 0.60);
	--surface-inverse: var(--color-deep);

	/* Text */
	--text-primary: var(--color-deep);
	--text-secondary: var(--color-gray-600);
	--text-muted: var(--color-gray-500);
	--text-faint: var(--color-gray-400);
	--text-inverse: var(--color-white);
	--text-link: var(--color-primary);
	--text-link-hover: var(--color-primary-light);

	/* Borders */
	--border-default: var(--color-gray-200);
	--border-strong: var(--color-gray-400);
	--border-subtle: var(--color-gray-100);
	--border-focus: var(--color-complementary-lighter);
	--border-error: var(--color-error);
	--border-radius-s: 4px;
	--border-radius-m: 8px;
	--border-radius-l: 12px;

	/* Shadows */
	--shadow-xs: 0 1px 2px rgba(26, 26, 26, 0.05);
	--shadow-s: 0 1px 3px rgba(26, 26, 26, 0.08), 0 1px 2px rgba(26, 26, 26, 0.04);
	--shadow-m: 0 4px 6px rgba(26, 26, 26, 0.06), 0 2px 4px rgba(26, 26, 26, 0.04);
	--shadow-l: 0 10px 15px rgba(26, 26, 26, 0.08), 0 4px 6px rgba(26, 26, 26, 0.04);

	/* Typography */
	--font-sans: 'Ubuntu Sans', 'Ubuntu', sans-serif;
	--font-condensed: 'Ubuntu Condensed', 'Ubuntu Sans', sans-serif;
	--font-mono: 'Ubuntu Sans Mono', 'Ubuntu Mono', monospace;
	--font-logo: 'Cera Pro', var(--font-sans);
	--font-serif: 'PT Serif', Georgia, serif;
}

/* ── 1. GLOBAL TYPOGRAPHY ────────────────────────────────── */
:root,
[data-bs-theme=light] {
	--bs-font-sans-serif: var(--font-sans) !important;
	--bs-font-monospace: var(--font-mono) !important;
	--bs-body-font-family: var(--font-sans) !important;
	--bs-body-color: var(--color-deep);
	--bs-body-bg: var(--surface-page);
	--bs-link-color: var(--color-primary);
	--bs-primary: var(--color-primary);
	--bs-primary-rgb: var(--color-primary-rgb);
}

body {
	font-family: var(--font-sans);
	color: var(--color-deep);
	background-color: var(--surface-page);
	-webkit-font-smoothing: antialiased;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	font-variant: normal !important;
	font-family: var(--font-sans);
	color: var(--color-deep);
}

::selection { background-color: var(--color-gray-200); color: var(--color-deep); }
::-moz-selection { background-color: var(--color-gray-200); color: var(--color-deep); }
mark, .mark { background-color: var(--color-gray-200); color: inherit; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-light); }

/* ── 2. NEUTRALIZE KEEN GREYS / INFO ─────────────────────── */
.text-muted { color: var(--text-muted) !important; }
.text-gray-400 { color: var(--text-faint) !important; }
.text-gray-500 { color: var(--text-muted) !important; }
.text-gray-600 { color: var(--color-gray-600) !important; }
.text-gray-700 { color: var(--color-gray-700) !important; }
.text-gray-800 { color: var(--color-gray-700) !important; }
.text-gray-900 { color: var(--color-deep) !important; }
.border-gray-300 { border-color: var(--border-default) !important; }
.bg-light { background-color: var(--color-gray-50) !important; }
.bg-lighten { background-color: var(--surface-page) !important; }

/* ── 3. LOGO ─────────────────────────────────────────────── */
.logo-font {
	font-family: var(--font-logo);
	font-weight: 800;
	color: var(--color-primary);
	letter-spacing: 0.04em;
	text-decoration: none;
}

.logo-mark {
	font-family: var(--font-logo);
	font-weight: 800;
	color: var(--color-primary);
	line-height: 1;
	display: inline-block;
}

/* ── 4. SECTION / CONDENSED HEADINGS ─────────────────────── */
/* Ubuntu Condensed uppercase with letter-spacing — used for section labels,
   card headers, stat labels throughout the insurance theme. */
.m-section-label,
.section-label,
.card-label,
.stat-label,
.kicker {
	font-family: var(--font-condensed);
	font-weight: 400;
	font-size: 0.88rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-gray-300);
	margin: 0;
}

.m-section-title {
	font-family: var(--font-condensed);
	font-weight: 600;
	font-size: 0.88rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-gray-300);
	margin-bottom: 0;
}

.h-condensed {
	font-family: var(--font-condensed);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-gray-300);
}

/* Display headings — PT Serif for editorial feel (matches insurance serif accents) */
.display-1, .display-2, .display-3, .display-4 {
	font-family: var(--font-serif);
	font-weight: 700;
	color: var(--color-deep);
	font-variant: normal;
	letter-spacing: -0.01em;
	line-height: 1.05;
}

/* ── 5. BUTTONS ──────────────────────────────────────────── */
.btn {
	font-family: var(--font-sans);
	font-weight: 500;
	letter-spacing: 0.02em;
}

.btn-primary,
.btn.btn-primary {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-pure) !important;
}

.btn-primary:hover,
.btn.btn-primary:hover {
	background-color: var(--color-primary-light) !important;
	border-color: var(--color-primary-light) !important;
}

.btn-primary:active,
.btn.btn-primary:active {
	background-color: var(--color-primary-dark) !important;
	border-color: var(--color-primary-dark) !important;
}

.btn-outline-primary {
	color: var(--color-primary);
	border-color: var(--color-primary);
	background: transparent;
}

.btn-outline-primary:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-pure);
}

.btn-light-primary {
	background-color: var(--color-primary-subtle) !important;
	color: var(--color-primary) !important;
	border: none;
}

.btn-light-primary:hover {
	background-color: var(--color-primary) !important;
	color: var(--color-pure) !important;
}

.btn-complementary {
	background-color: var(--color-complementary);
	color: var(--color-pure);
	border: none;
}

.btn-complementary:hover {
	background-color: var(--color-complementary-light);
	color: var(--color-pure);
}

.btn-light {
	background-color: var(--color-gray-50);
	color: var(--color-deep);
	border: 1px solid var(--border-subtle);
}

.btn-light:hover {
	background-color: var(--color-gray-100);
	color: var(--color-deep);
}

.btn-outline-secondary {
	color: var(--color-gray-600);
	border-color: var(--color-gray-200);
}

.btn-outline-secondary:hover {
	background-color: var(--color-gray-100);
	border-color: var(--color-gray-200);
	color: var(--color-deep);
}

/* ── 6. CARDS ────────────────────────────────────────────── */
.main-card,
.table-card {
	background: var(--surface-raised);
	border-radius: var(--border-radius-m);
	box-shadow: var(--shadow-s);
	overflow: hidden;
	margin-bottom: 1.5rem;
}

.card.card-flush {
	background: var(--surface-raised);
	border-radius: var(--border-radius-m);
	box-shadow: var(--shadow-s);
	border: 0;
	margin-bottom: 1.5rem;
}

.card.card-flush .card-header {
	background: transparent;
	border: 0;
	padding: 1.25rem 1.25rem 0;
}

.card.card-flush .card-body {
	padding: 1rem 1.25rem 1.5rem;
}

/* Gradient cards — matches insurance dashboard cards */
.card-primary {
	background: linear-gradient(135deg, #8B0000 0%, #5C0000 100%) !important;
	color: var(--color-pure);
}

.card-success {
	background: linear-gradient(135deg, #000034 0%, #1A1A5E 100%) !important;
	color: var(--color-pure);
}

.card-warning {
	background: linear-gradient(135deg, #B8860B 0%, #946B00 100%) !important;
	color: var(--color-pure);
}

.card-primary .card-title,
.card-success .card-title,
.card-warning .card-title,
.card-primary .text-white,
.card-success .text-white,
.card-warning .text-white {
	color: var(--color-pure);
}

/* ── 7. STAT CARD ────────────────────────────────────────── */
.stat-card {
	background: var(--surface-raised);
	border-radius: var(--border-radius-m);
	padding: 1rem 1.25rem;
	box-shadow: var(--shadow-s);
}

.stat-card .stat-value {
	font-family: var(--font-mono);
	font-size: 1.9rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--color-deep);
	line-height: 1.2;
}

.stat-card .stat-label {
	font-family: var(--font-condensed);
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-top: 0.25rem;
}

.stat-card .stat-value.text-primary,
.stat-card.total .stat-value { color: var(--color-primary) !important; }
.stat-card .stat-value.text-success,
.stat-card.copacetic .stat-value { color: var(--color-success) !important; }
.stat-card .stat-value.text-warning { color: var(--color-warning) !important; }

/* ── 8. BADGES ───────────────────────────────────────────── */
.artifact-tag,
.room-badge,
.type-badge,
.status-badge {
	font-family: var(--font-condensed);
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	padding: 0.2rem 0.55rem;
	border-radius: var(--border-radius-s);
	display: inline-block;
	text-align: center;
	white-space: nowrap;
	text-transform: uppercase;
}

.artifact-tag {
	background: var(--color-primary-subtle);
	color: var(--color-primary);
	margin: 0.15rem 0.2rem 0.15rem 0;
}

.artifact-tag.alt-complementary {
	background: var(--color-complementary-subtle);
	color: var(--color-complementary-lighter);
}

.artifact-tag.alt-neutral {
	background: var(--color-gray-50);
	color: var(--text-secondary);
}

/* ── 9. GRADIENTS ────────────────────────────────────────── */
.bg-gradient-primary-to-complementary {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-complementary) 100%) !important;
}

.bg-gradient-primary-to-secondary {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-complementary) 100%) !important;
}

.bg-gradient-complementary {
	background: linear-gradient(135deg, var(--color-complementary) 0%, #0a0a1f 100%) !important;
}

.bg-gradient-primary {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
}

.text-gradient {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-complementary) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
}

.gradient-start-color { stop-color: var(--color-primary); }
.gradient-end-color { stop-color: var(--color-complementary); }

/* ── 10. FORMS ──────────────────────────────────────────── */
.form-control,
.form-select {
	border-color: var(--border-default);
	font-family: var(--font-sans);
}

.form-control:focus,
.form-select:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 0.2rem rgba(139, 0, 0, 0.12);
}

.form-floating > label {
	font-family: var(--font-condensed);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.8rem;
	color: var(--text-muted);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
	color: var(--text-faint);
}

/* ── 11. CURRENCY / MONO ────────────────────────────────── */
.currency,
.font-mono {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	font-weight: 500;
}

/* ── 12. MATERIAL SYMBOLS SIZING ────────────────────────── */
.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.icon-feature { font-size: 2.5rem; }
.material-symbols-outlined.icon-xl { font-size: 3rem; }
.material-symbols-outlined.icon-lg { font-size: 2rem; }

/* ── 13. MODAL ──────────────────────────────────────────── */
.modal-content {
	border: 0;
	border-radius: var(--border-radius-l);
	overflow: hidden;
}

.modal-header {
	border-bottom: 0;
}

.modal-title {
	font-family: var(--font-condensed);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ── 14. UTILITIES ──────────────────────────────────────── */
.text-white-50 { color: rgba(255, 255, 255, 0.6) !important; }
.text-white-75 { color: rgba(255, 255, 255, 0.78) !important; }

.ls-wide { letter-spacing: 0.1em; }
.ls-wider { letter-spacing: 0.14em; }