/* ================================================
   3e News – Global Styles
   @font-face Lato (self-hosted WOFF2) + CSS Custom Properties
   ================================================ */

/* ── Font Faces ──────────────────────────────────── */

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	font-display: fallback;
	src: url('../fonts/lato-v23-latin-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Lato';
	font-style: italic;
	font-weight: 400;
	font-display: fallback;
	src: url('../fonts/lato-v23-latin-italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	font-display: fallback;
	src: url('../fonts/lato-v23-latin-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Lato';
	font-style: italic;
	font-weight: 700;
	font-display: fallback;
	src: url('../fonts/lato-v23-latin-700italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 900;
	font-display: fallback;
	src: url('../fonts/lato-v23-latin-900.woff2') format('woff2');
}

/* ── CSS Custom Properties ───────────────────────── */

:root {
	/* Brand */
	--color-primary:        #CC1717;
	--color-primary-dark:   #a81212;
	--color-primary-light:  #fdf0f0;
	--color-accent:         #0097AC;
	--color-accent-dark:    #007a8c;
	--color-accent-light:   #e4f5f8;

	/* Text */
	--color-text:           #111827;
	--color-text-secondary: #4b5563;
	--color-text-muted:     #9ca3af;

	/* UI */
	--color-border:         #e5e7eb;
	--color-bg:             #dde1e7;
	--color-surface:        #ffffff;

	/* Typography */
	--font-sans: 'Lato', system-ui, -apple-system, sans-serif;

	/* Radii */
	--radius-sm: 5px;
	--radius-md: 8px;
	--radius-lg: 12px;

	/* Shadows */
	--shadow-card:       0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
	--shadow-card-hover: 0 6px 20px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.05);
	--shadow-box:        0 0 0 1px rgba(0,0,0,.07), 0 8px 40px rgba(0,0,0,.12);
}

/* ── Base Reset ──────────────────────────────────── */

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
}

body {
	font-family: var(--font-sans);
	color: var(--color-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}