/* =====================================================================
   tokens.css
   Every colour, font and spacing value the theme uses is defined once,
   here, as a CSS custom property. Every other stylesheet in the theme
   reads from these variables instead of writing its own hex codes —
   that's what makes a single edit here (say, changing the brand blue)
   apply everywhere at once, including inside dark mode.

   Load order matters: this file loads first, dark-theme.css second
   (so it can override these same variable names), then base.css,
   layout.css and the rest after that.
   ===================================================================== */

:root {
	/* ---- Colour: light mode (the default) ---------------------- */
	--paper:   #F4F5F8;  /* page background */
	--surface: #FFFFFF;  /* cards, the header bar, form fields */
	--ink:     #11162B;  /* primary text, headings */
	--muted:   #565F78;  /* secondary text, captions, labels */
	--line:    #DADDE6;  /* borders and dividers */

	--brand:      #2340FF; /* buttons, links, the default accent */
	--brand-text: #2340FF; /* brand colour when used as text (kept
	                           separate from --brand so dark mode can
	                           brighten it for contrast without also
	                           changing button backgrounds) */

	/* A project's own Work Category colour is applied per-page as
	   --accent (see single-project.css and case-study.css). Anywhere
	   --accent isn't set — the homepage hero, for instance — falls
	   back to --brand automatically via var(--accent, var(--brand)). */

	/* ---- Type ---------------------------------------------------- */
	--font-ui:   "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-body: "Source Serif 4", Georgia, "Times New Roman", serif;

	/* A short type scale, so headings stay consistent without every
	   component file inventing its own font-size numbers. */
	--text-xs:   0.85rem;
	--text-sm:   0.95rem;
	--text-base: 1.0625rem;
	--text-lg:   1.25rem;
	--text-xl:   1.6rem;
	--text-2xl:  2rem;
	--text-3xl:  2.6rem;

	/* ---- Spacing --------------------------------------------------
	   A small fixed scale keeps padding/margin choices consistent
	   across every component, the same way the type scale does. */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;

	/* ---- Shape and motion ------------------------------------------ */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-pill: 999px;

	--ease: cubic-bezier(0.3, 0.8, 0.3, 1);
	--duration: 0.2s;

	/* ---- Layout ------------------------------------------------- */
	--content-width: 1200px;
	--header-height: 68px;
}