/* ===============================
   ARC Brand Tokens
   =============================== */

/* Prefer linking fonts in HTML, but @import is ok if you want */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Lora:ital,wght@0,400..700;1,400..700&display=swap");

:root {
	/* Core Colours */
	--arc-navy: #0a1e3f;
	--arc-teal: #74a9ac;
	--arc-orange: #c75634;
	--arc-dark-grey: #d3d6d9;
	--arc-light-silver: #f4f4f4;
	--arc-black: #000000;
	--arc-white: #ffffff;

	/* Semantic Usage */
	--arc-bg: var(--arc-white);
	--arc-bg-soft: var(--arc-light-silver);
	--arc-text-primary: var(--arc-white);
	--arc-text-secondary: #4b5563;
	--arc-border: var(--arc-dark-grey);
	--arc-accent: var(--arc-teal);
	--arc-action: var(--arc-orange);

	/* Typography */
	--font-heading: "Lora", Georgia, "Times New Roman", serif;
	--font-body:
		"DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter,
		Roboto, Helvetica, Arial, sans-serif;
}

/* ===============================
   Base Typography Overrides
   =============================== */

html,
body {
	font-family: var(--font-body);
	color: var(--arc-text-primary);
	background-color: var(--arc-bg);
}

/* Make sure headings always win */
h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
	font-family: var(--font-heading) !important;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--arc-text-primary);
}

/* Optional helpers */
.font-body {
	font-family: var(--font-body) !important;
}

/* Tailwind class override: if you leave font-serif in markup, it will still fight.
   This makes Tailwind's font-serif resolve to your heading font. */
.font-serif {
	font-family: var(--font-heading) !important;
}
.font-sans {
	font-family: var(--font-body) !important;
}

/* ===============================
   ARC Utility Classes
   =============================== */

.text-arc-navy {
	color: var(--arc-navy);
}
.text-arc-teal {
	color: var(--arc-teal);
}
.text-arc-orange {
	color: var(--arc-orange);
}

.bg-arc-navy {
	background-color: var(--arc-navy);
}
.bg-arc-teal {
	background-color: var(--arc-teal);
}
.bg-arc-orange {
	background-color: var(--arc-orange);
}
.bg-arc-soft {
	background-color: var(--arc-bg-soft);
}

.border-arc {
	border-color: var(--arc-border);
}