/**
 * Number Plate Maker - Design Tokens
 *
 * Every design decision as a CSS custom property. The palette is taken
 * directly from the brand logo: registration-plate yellow, deep navy ink,
 * plate-white surfaces. Change values here to restyle the whole site.
 */

:root {
	/* ------------------------------------------------------------ */
	/* Brand - from the logo                                          */
	/* ------------------------------------------------------------ */
	--npm-navy: #1b2a4a;         /* logo ink */
	--npm-navy-deep: #101b33;    /* footer / dark surfaces */
	--npm-navy-soft: #eef1f7;    /* tinted panels */
	--npm-yellow: #ffc800;       /* plate yellow (logo band) */
	--npm-yellow-hover: #eab700;
	--npm-yellow-deep: #8a6d00;  /* yellow that passes contrast on white */
	--npm-yellow-soft: #fff8e0;

	/* Neutrals */
	--npm-white: #ffffff;
	--npm-canvas: #f4f5f7;       /* page background behind cards */
	--npm-grey-100: #eceef2;
	--npm-grey-200: #dfe3ea;
	--npm-grey-300: #c7cdd8;
	--npm-grey-500: #6b7280;
	--npm-grey-700: #374151;

	/* States */
	--npm-success: #059669;
	--npm-success-soft: #ecfdf5;
	--npm-warning: #b45309;
	--npm-warning-soft: #fffbeb;
	--npm-danger: #dc2626;
	--npm-danger-soft: #fef2f2;

	/* Semantic aliases */
	--npm-text: #17203a;
	--npm-text-muted: var(--npm-grey-500);
	--npm-text-inverse: var(--npm-white);
	--npm-surface: var(--npm-white);
	--npm-surface-alt: var(--npm-canvas);
	--npm-border: var(--npm-grey-200);
	--npm-border-strong: var(--npm-grey-300);
	--npm-link: var(--npm-navy);
	--npm-link-hover: #2f4577;

	/* ------------------------------------------------------------ */
	/* Typography                                                    */
	/* System stacks only - no webfont requests. Display headings    */
	/* borrow the pressed-plate voice: very heavy, uppercase, tight. */
	/* ------------------------------------------------------------ */
	--npm-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--npm-font-display: var(--npm-font-body);
	--npm-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--npm-text-xs: 0.75rem;
	--npm-text-sm: 0.875rem;
	--npm-text-base: 1rem;
	--npm-text-lg: 1.125rem;
	--npm-text-xl: 1.375rem;
	--npm-text-2xl: 1.75rem;
	--npm-text-3xl: 2.25rem;
	--npm-text-4xl: clamp(2.4rem, 5vw, 3.4rem);

	--npm-leading-tight: 1.15;
	--npm-leading-normal: 1.65;

	--npm-weight-normal: 400;
	--npm-weight-semibold: 600;
	--npm-weight-bold: 700;
	--npm-weight-plate: 800;   /* display headings */

	--npm-track-plate: 0.01em;   /* display */
	--npm-track-eyebrow: 0.14em; /* small uppercase labels */

	/* ------------------------------------------------------------ */
	/* Spacing / radius / shadow                                     */
	/* ------------------------------------------------------------ */
	--npm-space-1: 0.25rem;
	--npm-space-2: 0.5rem;
	--npm-space-3: 0.75rem;
	--npm-space-4: 1rem;
	--npm-space-5: 1.5rem;
	--npm-space-6: 2rem;
	--npm-space-8: 3rem;
	--npm-space-10: 4rem;
	--npm-space-12: 5.5rem;

	/* Radii follow the pressed-plate corner */
	--npm-radius-sm: 6px;
	--npm-radius: 10px;
	--npm-radius-lg: 16px;
	--npm-radius-plate: 12px;

	--npm-shadow-sm: 0 1px 2px rgba(16, 27, 51, 0.07);
	--npm-shadow: 0 4px 14px rgba(16, 27, 51, 0.1);
	--npm-shadow-lg: 0 14px 40px rgba(16, 27, 51, 0.16);

	/* Layout */
	--npm-container: 1200px;
	--npm-container-narrow: 760px;
	--npm-header-height: 72px;

	/* Motion */
	--npm-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
	--npm-fast: 150ms;
	--npm-slow: 300ms;
}