/*
 * Trias Documents — Design System
 * White + orange identity derived from the logo gradient
 * (#FC8430 → #F83838 on near-black)
 */

:root {
	/* Brand — logo-inspired orange */
	--primary: #EF6C2F;
	--primary-dark: #D4551A;
	--primary-light: #FFF4ED;
	--accent: #FB923C;
	--accent-deep: #F83838;

	/* Surfaces */
	--background: #FAFAF9;
	--surface: #FFFFFF;
	--surface-muted: #F5F5F4;

	/* Borders */
	--border: #E8E4E1;
	--border-strong: #D6D3D1;

	/* Text — near-black like logo continents */
	--text-primary: #1C1917;
	--text-secondary: #78716C;
	--text-muted: #A8A29E;
	--text-inverse: #FFFFFF;

	/* Semantic */
	--success: #198754;
	--success-bg: #E8F5E9;
	--success-border: #A7D7B0;
	--warning: #D97706;
	--warning-bg: #FFF8E6;
	--warning-border: #F5D78E;
	--danger: #C0392B;
	--danger-bg: #FDECEA;
	--danger-border: #F5C2C0;
	--info: #2563EB;
	--info-bg: #EFF6FF;
	--info-border: #BFDBFE;

	/* Header / chrome — logo black + orange accent */
	--header-bg: #0A0A0A;
	--header-bg-end: #171717;
	--nav-bg: #FFFFFF;

	/* Elevation */
	--shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.06);
	--shadow-md: 0 2px 8px rgba(28, 25, 23, 0.08);
	--shadow-lg: 0 8px 24px rgba(28, 25, 23, 0.12);

	/* Shape */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;

	/* Focus */
	--focus-ring: 0 0 0 3px rgba(239, 108, 47, 0.2);
	--focus-border: var(--primary);
}

body {
	color: var(--text-primary);
	background-color: var(--surface);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--text-primary);
}

a {
	color: var(--text-primary);
}

a:hover,
a:focus {
	color: var(--primary);
}

.form-control:focus,
.input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	border-color: var(--focus-border) !important;
	outline: none;
	box-shadow: var(--focus-ring) !important;
}

.btn-primary-app {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--primary);
	color: var(--text-inverse);
	border: 1px solid var(--primary);
	border-radius: var(--radius-md);
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s, border-color .2s;
}
.btn-primary-app:hover,
.btn-primary-app:focus {
	background: var(--primary-dark);
	border-color: var(--primary-dark);
	color: var(--text-inverse);
	text-decoration: none;
}

.btn-secondary-app {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--surface);
	color: var(--text-primary);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: all .2s;
}
.btn-secondary-app:hover,
.btn-secondary-app:focus {
	border-color: var(--primary);
	color: var(--primary);
	background: var(--primary-light);
	text-decoration: none;
}

.btn-danger-app {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--danger);
	color: var(--text-inverse);
	border: 1px solid var(--danger);
	border-radius: var(--radius-md);
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s;
}
.btn-danger-app:hover,
.btn-danger-app:focus {
	background: #A93226;
	border-color: #A93226;
	color: var(--text-inverse);
}

.surface-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}