/* ============================================================
   SpenceZeta Design Tokens
   Ported 1:1 from the SpenceZeta design system so the theme CSS
   can be read side by side with the source design.
   Brand palette: Navy + Orange, clean white, warm neutrals.
   ============================================================ */

:root {
	/* -- Brand Navy -- */
	--navy-50: #eef2f9;
	--navy-100: #cfdaee;
	--navy-200: #9fb5dd;
	--navy-300: #6f90cb;
	--navy-400: #3f6bba;
	--navy-500: #2a53a0;
	--navy-600: #1c3a6b; /* Primary brand navy */
	--navy-700: #152c51;
	--navy-800: #0e1e37;
	--navy-900: #07101d;

	/* -- Brand Orange -- */
	--orange-50: #fef4ea;
	--orange-100: #fde3c1;
	--orange-200: #fbca83;
	--orange-300: #f9b246;
	--orange-400: #f59a28;
	--orange-500: #e8781c; /* Primary brand orange */
	--orange-600: #c4620e;
	--orange-700: #9f4e0a;
	--orange-800: #7a3b08;
	--orange-900: #552806;

	/* -- Neutrals -- */
	--neutral-0: #ffffff;
	--neutral-50: #f7f8fa;
	--neutral-100: #edeef2;
	--neutral-200: #e0e1e7;
	--neutral-300: #c8cad4;
	--neutral-400: #a9acba;
	--neutral-500: #898da0;
	--neutral-600: #636680; /* muted text */
	--neutral-700: #404464;
	--neutral-800: #252847;
	--neutral-900: #0f1020;

	/* -- Semantic aliases -- */
	--text-primary: var(--navy-600);
	--text-secondary: var(--neutral-600);
	--text-inverse: var(--neutral-0);
	--text-accent: var(--orange-500);
	--surface-page: var(--neutral-0);
	--surface-brand: var(--navy-600);
	--border-default: var(--neutral-200);

	/* -- Radius -- */
	--radius-sm: 4px;
	--radius-full: 9999px;
	--radius-button: var(--radius-sm);
	--radius-chip: var(--radius-full);

	/* -- Shadows (navy tinted) -- */
	--shadow-sm: 0 2px 6px rgba(28, 58, 107, 0.08), 0 1px 2px rgba(28, 58, 107, 0.06);
	--shadow-md: 0 4px 16px rgba(28, 58, 107, 0.1), 0 2px 4px rgba(28, 58, 107, 0.06);
	--shadow-accent: 0 4px 20px rgba(232, 120, 28, 0.32);
	--focus-ring: 0 0 0 3px rgba(232, 120, 28, 0.45);

	/* -- Motion -- */
	--duration-fast: 120ms;
	--duration-normal: 200ms;
	--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);

	/* -- Type -- */
	--font-primary: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--tracking-wide: 0.04em;
	--tracking-widest: 0.12em;

	/* -- Hero decoration --
	   Asset paths are relative to this stylesheet, so they resolve the same way
	   on the front end and inside the block editor iframe. To use different
	   artwork, drop your file in assets/images/ and change this one line.
	   The artwork carries the blueprint grid as well as the line drawing. */
	--sz-hero-art: url("../images/interior-linework.jpg");

	/* Login glyph, drawn with a CSS mask so it inherits the button colour. */
	--sz-icon-login: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E");
}