/* ==========================================================================
   Design Tokens — Creative Dental
   --------------------------------------------------------------------------
   Tokens populated by figma-plugin-importer + design-tokens registry as the
   homepage build progresses. This file is the runtime source of truth: every
   block CSS must consume CSS custom properties from here.
   ========================================================================== */

:root {
	/* Layout ------------------------------------------------------------ */
	--container-max:        1920px;
	--container-padding:    24px;

	/* Breakpoints (mirrored from project-config.json — informational) ---- */
	--bp-xs:  375px;
	--bp-sm:  768px;
	--bp-md:  1024px;
	--bp-lg:  1280px;
	--bp-xl:  1920px;

	/* Typography -------------------------------------------------------- */
	--font-display: "Marcellus", "Times New Roman", serif;
	--font-body:    "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Color tokens — placeholders. Overwritten / extended by the
	   design-tokens registry once Figma data is imported.               */
	--color-bg:       #ffffff;
	--color-text:     #1a1a1a;
	--color-muted:    #6b6b6b;
	--color-border:   #e5e5e5;

	/* Spacing scale ---------------------------------------------------- */
	--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;
	--space-10: 128px;

	/* Radii ------------------------------------------------------------ */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	/* Header sizing ---------------------------------------------------- */
	--header-height: 96px;
	--header-bg:     #ffffff;

	/* z-index ---------------------------------------------------------- */
	--z-header: 100;
	--z-nav:    110;
}